This is what I am calling an MVP, which stands for Minimum Viable Poems. I have put together what I feel is good content (poems), and I have basic site navigation and responsive design working.
I realize there isn't huge overlap for those who might be interested in this blog for the technical or work related stuff and those who might be interested in poems and literature.
None the less, it's an area of interest for me: poetry and technology. I am curious about these two things, how they overlap, and how they can help us in our everyday lives.
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.
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.
Jonathan Fries on .