← home
← notes

14 June 2021

Typesetting poetry online

When typesetting poetry, we want to reproduce formatting like spacing and line breaks as faithfully as possible. This is difficult on the web, where browser viewport and font sizes can change dynamically. To handle spacing and wrapping lines well, we can put each line of a poem in a div styled as follows:

<div style="white-space: pre-wrap; text-indent: -1rem; padding-left: 1rem;">line goes here</div>

Some examples set this way are below. You can play with your browser’s font size and window size to see how they respond.

Test Poem

a first test line that is actually somewhat rather long
a second line with a deliberate indent
a short third line, and
a fourth test line that is in fact even longer than the first which was actually somewhat rather long

Fire and Ice

Robert Frost, 1920
Some say the world will end in fire;
Some say in ice.
From what I've tasted of desire
I hold with those who favor fire.
But if it had to perish twice,
I think I know enough of hate
To know that for destruction ice
Is also great
And would suffice.

When I Heard the Learn'd Astronomer

Walt Whitman, 1865
When I heard the learn'd astronomer
When the proofs, the figures, were ranged in columns before me,
When I was shown the charts and diagrams, to add, divide, and measure them,
When I sitting heard the astronomer where he lectured with much applause in the lecture-room,
How soon unaccountable I became tired and sick,
Till rising and gliding out I wander'd off by myself,
In the mystical moist night-air, and from time to time,
Look'd up in perfect silence at the stars.