First, a bit of background about how we like to mark up poetry. This will help you understand what you’re looking at when we get to the samples below.

Also see the official docs on poetry.

Encoding poetry can be tricky. Usually, poetry in HTML is structured by tagging each stanza as a paragraph, with line breaks after each line. You can do this by adding markdown line breaks (with double spaces or \\ at the end of each line) and tagging the paragraph with {:.verse}. However, this structure makes it impossible to have browsers, ereaders and PDF engines correctly indent runover lines (because there is no nth-line selector in CSS, unless you resort to a Javascript method that will bloat your code and won’t run on many ereaders).

Tech note: Some text and code editors (e.g. Atom) strip out spaces at the ends of lines automatically. So use \\ for line breaks, not double-spaces.

We prefer another approach: the poem is an unordered list (ul) and each line (including each blank line between stanzas) is a list item (li). We just hide any list markers (bullets) with list-style-type: none. This way, we can control indents on runover lines. This is a non-semantic use of HTML, since a poem is technically not a list. But it’s a healthy hack with universal browser and ereader support.

Our convention is to mark each line of a stanza with a hyphen -, and tag the list with {:.verse}:

-   I wandered lonely as a cloud
-   That floats on high o'er vales and hills,
-   When all at once I saw a crowd,
-   A host, of golden daffodils;
-   Beside the lake, beneath the trees,
-   Fluttering and dancing in the breeze.

This gives us:

We can also indent individual lines, where the poet wanted indents, by tagging individual list items.

-   Alas for man! day after day may rise,
-   {:.indent-3}Night may shade his thankless head,
-   He sees no God in the bright, morning skies
-   {:.indent-3}He sings no praises from his guarded bed.

The 2 in {:.indent-2} refers to the number of em spaces to indent by. Our CSS allows for indents from 1 ({:.indent-1}) to 30 ({:.indent-30}).

This gives us:

Big gaps between words in a line must be created with spaces or space entities like   in the poem text.

Centering poems

But wait, there’s more! Best practice for poetry layout is that – in print – a poem should be centered on its longest line. That is not centering the lines of poetry, but placing the left-justified poem in the horizontal middle of the page. Put another way, the poem should be indented till its longest line is centered on the page.

To achieve this, put the entire poem, including its title, in a blockquote, by adding > to the start of each line. Tag the whole blockquote as {:.verse}, too. Finally, decide how wide you want the poem to as a percentage of the page width. That is, if you reckon this poem’s longest line reaches across 90 per cent of the page, use .width-90.

> - ### To One Who Has Been Long in City Pent
> - To one who has been long in city pent,
> - {:.indent-2}'Tis very sweet to look into the fair
> - {:.indent-2}And open face of heaven,—to breathe a prayer
> - Full in the smile of the blue firmament.
> - Who is more happy, when, with heart's content,
> - {:.indent-2}Fatigued he sinks into some pleasant lair
> - {:.indent-2}Of wavy grass, and reads a debonair
> - And gentle tale of love and languishment?
> -    
> - Returning home at evening, with an ear
> - {:.indent-2}Catching the notes of Philomel,—an eye
> - Watching the sailing cloudlet's bright career,
> - {:.indent-2}He mourns that day so soon has glided by:
> - E'en like the passage of an angel's tear
> - {:.indent-2}That falls through the clear ether silently.
> {:.verse}
{:.verse .width-80}

In verse structured as a list like this, our CSS preserves white space. That is, if you type, say, three spaces you get three spaces. Normally, HTML collapses multiple spaces into one – which is great except when you want to deliberately use extra spaces, as some poets do. However, this doesn’t work at the start of lines, where markdown strips leading spaces. There you must use HTML space entities (like  ) or our indent tags explained above.

However, the whitespace: pre-wrap CSS we use for this is not currently supported on Kindle. If that’s important, it’s best to stick to using HTML space entities like  .

Here’s that poem rendered:

  • To One Who Has Been Long in City Pent

  • To one who has been long in city pent,
  • ‘Tis very sweet to look into the fair
  • And open face of heaven,—to breathe a prayer
  • Full in the smile of the blue firmament.
  • Who is more happy, when, with heart’s content,
  • Fatigued he sinks into some pleasant lair
  • Of wavy grass, and reads a debonair
  • And gentle tale of love and languishment?
  • Returning home at evening, with an ear
  • Catching the notes of Philomel,—an eye
  • Watching the sailing cloudlet’s bright career,
  • He mourns that day so soon has glided by:
  • E’en like the passage of an angel’s tear
  • That falls through the clear ether silently.

Here’s a long poetry example.

  • Gerontion

  • Thou hast nor youth nor age
  • But as it were an after dinner sleep
  • Dreaming of both.
  • Here I am, an old man in a dry month,
  • Being read to by a boy, waiting for rain.
  • I was neither at the hot gates
  • Nor fought in the warm rain
  • Nor knee deep in the salt marsh, heaving a cutlass,
  • Bitten by flies, fought.
  • My house is a decayed house,
  • And the jew squats on the window sill, the owner,
  • Spawned in some estaminet of Antwerp,
  • Blistered in Brussels, patched and peeled in London.
  • The goat coughs at night in the field overhead;
  • Rocks, moss, stonecrop, iron, merds.
  • The woman keeps the kitchen, makes tea,
  • Sneezes at evening, poking the peevish gutter.
  • I an old man,
  • A dull head among windy spaces.
  • Signs are taken for wonders. “We would see a sign”:
  • The word within a word, unable to speak a word,
  • Swaddled with darkness. In the juvescence of the year
  • Came Christ the tiger
  • In depraved May, dogwood and chestnut, flowering Judas,
  • To be eaten, to be divided, to be drunk
  • Among whispers; by Mr. Silvero
  • With caressing hands, at Limoges
  • Who walked all night in the next room;
  • By Hakagawa, bowing among the Titians;
  • By Madame de Tornquist, in the dark room
  • Shifting the candles; Fraulein von Kulp
  • Who turned in the hall, one hand on the door. Vacant shuttles
  • Weave the wind. I have no ghosts,
  • An old man in a draughty house
  • Under a windy knob.
  • After such knowledge, what forgiveness? Think now
  • History has many cunning passages, contrived corridors
  • And issues, deceives with whispering ambitions,
  • Guides us by vanities. Think now
  • She gives when our attention is distracted
  • And what she gives, gives with such supple confusions
  • That the giving famishes the craving. Gives too late
  • What’s not believed in, or if still believed,
  • In memory only, reconsidered passion. Gives too soon
  • Into weak hands, what’s thought can be dispensed with
  • Till the refusal propagates a fear. Think
  • Neither fear nor courage saves us. Unnatural vices
  • Are fathered by our heroism. Virtues
  • Are forced upon us by our impudent crimes.
  • These tears are shaken from the wrath-bearing tree.
  • The tiger springs in the new year. Us he devours. Think at last
  • We have not reached conclusion, when I
  • Stiffen in a rented house. Think at last
  • I have not made this show purposelessly
  • And it is not by any concitation
  • Of the backward devils.
  • I would meet you upon this honestly.
  • I that was near your heart was removed therefrom
  • To lose beauty in terror, terror in inquisition.
  • I have lost my passion: why should I need to keep it
  • Since what is kept must be adulterated?
  • I have lost my sight, smell, hearing, taste and touch:
  • How should I use it for your closer contact?
  • These with a thousand small deliberations
  • Protract the profit of their chilled delirium,
  • Excite the membrane, when the sense has cooled,
  • With pungent sauces, multiply variety
  • In a wilderness of mirrors. What will the spider do,
  • Suspend its operations, will the weevil
  • Delay? De Bailhache, Fresca, Mrs. Cammel, whirled
  • Beyond the circuit of the shuddering Bear
  • In fractured atoms. Gull against the wind, in the windy straits
  • Of Belle Isle, or running on the Horn,
  • White feathers in the snow, the Gulf claims,
  • And an old man driven by the Trades
  • To a sleepy corner.
  • Tenants of the house,
  • Thoughts of a dry brain in a dry season.