How I Format Poetry with inline CSS

Poetry looks beautiful in books, but how does it fare on websites?

To date, we haven’t found a sensible way to format poetry online. What do we do when our verses are so long that they spill over to the next line? How do we visually cue the reader that the continuation is part of the same verse and not a new one? We solve this by indenting the overflow to the right. That’s what’s called hanging indent. Read https://epubsecrets.com/well-hung-poetry-ebooks-and-indents-part-one.php for additional context.

General guidelines suggest using the <p>
tag for paragraphs and the <br> tag to break the paragraph into verses when formatting poetry with CSS. However, here I use the <span> tag for verse separation instead of the <br> as it provides more freedom to style the verses.

For the desired effect, I use three CSS properties: ‘padding-left’ and ‘text-indent’ for the <p> tag and ‘margin-left’ for the <span> tag. Here, I apply 3em of space.

The ‘padding-left’ property sets the space between the content and the left border, while the ‘text-indent’ specifies the indentation of the first line in a text-block. I then use the ‘margin-left’ to indent the other lines of the text-block.

To illustrate how the css code would look:

<h2>So you sit to write</h2>

<p style=”padding-left: 3em; text-indent: -3em;”>You are well versed on how this single verse works
<span style=”margin-left: -3em;”>An added verse and that’s a whole nother story</span>
<span style=”margin-left: -3em;”>These ‘oneliners’ need to talk to each other</span>
<span style=”margin-left: -3em;”>At times they just need to listen to themselves</span></p>

This produces the following output:

So you sit to write

You are well versed on how this single verse works
An added verse and that’s a whole nother story
These ‘oneliners’ need to talk to each other
At times they just need to listen to themselves

I recommend reading this in a browser (that’s where you should read this blog) to see how it works, and avoid using the Jetpack app reader. Otherwise, my verses might lose impact because I vary the way I structure them, and you might miss the clear separation scheme I intended for a particular poem. Sometimes, they might even look messy due to the app’s built-in styling choices.

If you’re on a mobile device, I suggest you try portrait and landscape page orientation to see how it affects the reading experience. As long as you read in a browser, it should look fine both ways.

I’d love to hear your thoughts on how poetry formatting works best for you online. Your feedback is invaluable in refining these approaches and making poetry more accessible and engaging in the digital realm.

Feel free to leave a comment and join the conversation!