Writing CSS Poetry Poetry on the Web

CSS for Formatting a Poem on a Mobile Device

Posted by Jonathan Fries on October 18th, 2016.

This took me longer than I thought it would to get right. In the end the solution is simple.

The main idea is that each line of a poem needs to wrap in such a way that you can tell it is a line. So, to accomplish this each of the lines of the poem are contained in a <p> tag.

Here was my final class:

.poemLine
{
  p{margin: 0px 0px 0px 20px; text-indent: -20px;}
}

This works for both mobile and non-mobile. The crux is that text-indent: -20 will outdent the first line by 20 px. The margin setting ensures that the text doesn't accidentally overlap something else on the page.

If the screen is small enough and any lines wrap, text-indent will not impact any subsequent lines causing them to appear indented, which is the poetry convention for a wrapped line.

This is web-only, and not designed for e-readers. I started with an article on that here, but ultimately the first-line stuff led me astray for a while. For my purposes, text-indent alone was enough.