Solved: HTML/CSS for Poetry Standard Format (& a new Synaptic Syntactic sample up)

I have finally figured it out. Janky as it appears to the untrained eye, there is no nice looking (in code) way around the problem, since HTML ignores extra whitespace (tabs, line breaks, and spaces — with good reason). There is a CSS

text-indent: hanging;

property, but
1) it doesn’t solve the problem since it applies to block elements
2) it is in development/draft/experimental status, currently unsupported by all major browsers

So, for those who know what I’m talking about, the necessary code is thus:
For each ‘line’ of the poem (the reason this is important is for long lines that wrap, or for small screens where even not-very-long lines wrap) you do this:

<span class="poem-line"> TEXT TEXT TEXT </span><br />

For the CSS class “poem-line” or whatever, you do this:

.poem-line {
display: inline-block;
text-indent: -2em;
padding-left: 2em;

The reason for declaring them inline blocks is that text-indent and padding have no effect on standard inline elements, only block elements. (This is for static pages or WordPress or other web applications you can control. If you have free, if it is even possible, you would have to add the css code in style=”” tags to EACH LINE, since you can’t add CSS files or alter the html <head> tag contents. You could leave the class=”” declaration off though) [You can also declare your indent values with px, rem, % values and other ways. They do not have to be +/-2em

]For stanzas, of course, you would wrap them in <p> tags. For single stanza poems, a more complete example would be:

<span class="poem-line"> TEXT TEXT TEXT </span><br />
<span class="poem-line"> TEXT TEXT TEXT </span><br />  
<span class="poem-line"> TEXT TEXT TEXT </span><br />
<span class="poem-line"> etc </span></br>

To see an example in action, here is a newly uploaded sample from my ebook:
An Adventure It Would Surely Be . Try resizing the window and watch the lines reflow with hanging indents, no matter how small you make it.

Leave a comment or question in the box for me:

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s