A block for poems and lyrics?
Hey all,
I’ve been writing a bit of poetry and some song lyrics in Markdown lately, and I keep running into the same annoyance, so I wanted to throw an idea out there and see what people think.
There’s really no good way to write verse in Markdown right now. You end up picking the least-bad of three bad options:
-
Blockquotes, but those mean “someone said this,” not “I wrote this,” and half the renderers out there italicize them or slap quote marks on for good measure.
-
Two trailing spaces at the end of every line to force a line break. It works, but it’s invisible in the source, it’s the first thing any editor or linter strips out without asking, and it’s just miserable to type and maintain across a whole poem.
-
Code fences, which keep your line breaks but come with a monospace font and
<pre><code>, which is about as far from “poem” as you can get typographically.
I know Pandoc already has an answer for this — line blocks, where you prefix every line with |:
| This is the first verse,
| And this is the second one,
| But this is definitely the longest line,
| And this is the last line.
It does the job, but writing | in front of every single line of a long poem gets old fast, and it doesn’t really fit the “fenced block” mental model that code blocks already trained us to use. So my rough idea is: why not just give poems their own fence, the same way code got one?
```poem
This is the first verse,
And this is the second one,
But this is definitely the longest line of the stanza,
And this is the last line.
This is the second stanza.
```
Blank line = new stanza, everything else preserved exactly as typed, no trailing-space nonsense.
Now — I want to be upfront about something, because I think if I don’t say it myself someone will say it for me: what CommonMark should standardize here is just the meaning of the block, not how it looks. So the actual output I’d propose is something pretty boring, along these lines:
<div class="poem">
<p>
This is the first verse,<br>
And this is the second one,<br>
But this is definitely the longest line of the stanza,<br>
And this is the last line.
</p>
<p>
This is the second stanza.
</p>
</div>
Each stanza is a <p>, lines inside it joined with <br>. Nothing fancier than that. Whether it should be a <div class="poem"> or some other wrapper is obviously up for debate, I don’t have a strong opinion there.
The styling part is a separate conversation, and honestly not really CommonMark’s job — but since it’s the thing that got me thinking about this in the first place, I’ll mention it anyway. There’s an old typesetting trick from print poetry layout: you find the longest line in the poem, center that one line on the page, and use its left edge as the anchor for every other line. You end up with something that reads left-to-right normally (unlike centering every line, which turns into a “Christmas tree” your eye has to hunt around) but still looks balanced on the page instead of hugging the left margin with a huge gap on the right. In CSS that’s roughly:
.poem {
margin-left: auto;
margin-right: auto;
width: fit-content;
text-align: left;
}
Again, not something the spec needs to bless, maybe just a nice default in a reference stylesheet somewhere.
One thing I genuinely don’t know the answer to: what happens on a phone when one verse is too long for the screen and has to wrap? Does the wrapped bit get a hanging indent so it doesn’t look like a new line of the poem? I don’t think this needs to hold up the discussion, but it’ll come up eventually so figured I’d flag it now rather than pretend it isn’t a real case.
Anyway — curious what people think, especially about (a) whether a dedicated fence is actually worth it over just extending line blocks, and (b) the <p>/<br> output. Happy to be told this has been discussed to death already, I did a bit of searching but maybe missed a thread.