Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
Help with Pre tags and Poetry formatting in Twine 2.0
Hi guys! I'm trying to format some poetry for a Twine 2.0 project I'm working on.
I've got this in my style sheet:
which I got from this site.
The full code for the poem (again, from that site) is this:
which appears to become double spaced when the Twine game is exported and viewed in an actual browser. I've had issues with posting poetry in code in the past, but can usually figure it out (i know a bit of html/css).
I guess my question is, what's the best way to format this to force the lines to be right on top of each other. I've also tried using manually forcing the line space, but couldn't get it to work within the pre tags.
I've got this in my style sheet:
.verse pre {
display: table;
margin: 0 auto;
}
which I got from this site.
The full code for the poem (again, from that site) is this:
<blockquote class="verse"
style="outline: 1px dotted silver;">
<h4>the sky was</h4>
<pre style="background-color: #fffff;">
the
sky
was
can dy lu
minous
edible
spry
pinks shy
lemons
greens coo l choc
olate
s.
un der,
a lo
co
mo
tive s pout
ing
vi
o
lets
</pre>
</blockquote>
which appears to become double spaced when the Twine game is exported and viewed in an actual browser. I've had issues with posting poetry in code in the past, but can usually figure it out (i know a bit of html/css).
I guess my question is, what's the best way to format this to force the lines to be right on top of each other. I've also tried using manually forcing the line space, but couldn't get it to work within the pre tags.
Comments
I think I solved my own issue, but still very interested in other suggestions!
I styled my <p> to have a 17px line spacing, threw out the pre tags and am using line by line <span> classes to indent when needed. Not elegant, sort of annoying, but it looks like it's supposed to look like (I assume) in all browsers.