After reading Gwern’s article on typesetting poetry in html, I wanted to revisit the post I wrote on the same topic in March. My method of choice, which Gwern calls “semantic class soup”, was dismissed in the article as “a compilation target for some poetry dsl.”1
<div class="poem poem-wrap">
<div class="line" style="--indent: 0ch">Thou still unravish'd...</div>
<div class="line" style="--indent: 4ch">Thou foster-child of...</div>
<div class="line" style="--indent: 0ch">Sylvan historian, who...</div>
<div class="line" style="--indent: 4ch">A flowery tale...</div>
</div>
I don’t entirely agree with the criticism that authoring poetry by “encoding all the semantics” into classes is difficult—were we ever writing poetry directly in html anyway?2 A simple script can convert text into the proper html immediately. I can understand if you’re working in an environment where fonts, containers, styles, and all other kinds of presentation might be more complicated. If you need to make manual edits, I can agree that you probably don’t want class soup.
The better argument centers on the poem’s lack of accessibility in nonstandard reading environments. Screen-readers will certainly struggle with the unusual semantics, and if css falls out, you lose the indentation that was stuffed away in the padding. Even with everything loading perfectly, copy-pasting will flatten the spacing since it was never there to begin with.
In the end it seems that proper accessibility and semantic design are fundamentally incompatible with good typesetting on the web. With poetry particularly, if dynamic enjambment/indentation is a priority, a simple solution without JavaScript is elusive. Of course, if you’re not like me and don’t hate JavaScript, you can wrap the text however you please, even breaking at the least disruptive points.3
Looking for some answers online, I noticed that both the
Poetry Foundation and
the Academy of American Poets keep
things simple: Unicode spaces at the start of lines and the
padding-left: 1; text-indent: -1; trick for simple hanging
indentation. It doesn’t work with multiple levels of
indentation, and so I improved upon it for my own poetry
infrastructure.
However, I don’t feel proud of my battle with the Poetry Foundation anymore. Yes, my solution looks better on tiny screens when the text wraps, but, at that size, it was going to look bad anyway. And, to get there, I gave up the ability to copy the poem with indentation, and I tied all of it to a few fragile lines of css.
I’m going to keep it around for now. If needed, I can always link to the original plain text poem. I plan to continue looking for some way to have indentation with real spaces, and yet keep the dynamic hanging indent. I do believe it is possible somehow.4
This is actually a very interesting question to me, especially since I’ve been thinking a lot about hypertext literature in the last month. Most poems reaching the web were probably not written with the web in mind, I assume, and so to frame this as an issue of authoring feels like a distraction. Writing a poem to live on the web is a different thing altogether, and, to me, the medium somehow demands interacting with the soup. It is not, unless you make it one, a fixed 5 by 8 inch page on which you write a poem, and it is part of the process to decide how to handle that. ↩︎
See https://gwern.net/poetry-html#nicer-line-breaking. I accept that this level of design is beyond the capabilities of pure html and css, but I don’t see the value anyway. If you care that much about the formatting of your poem, you should just distribute a pdf ↩︎
My best idea so far: If we can guarantee the right font loads (now also restricted to that single font), we can match the width of a space to the unit used in our css. This unfortunately introduces a new problem: if the font fails to load but the css loads fine, our indentation would be out of alignment. Changing fonts would also be a nightmare if you have to recalibrate the spacing. ↩︎