When setting a style for the display of verse, consider next how the line should wrap when displayed in a very small window: the usual solution is to make any turned sections indent, tucking them off to the right, away from the left boundary of the verse block. This requires a trick, because the style-sheet system does not provide an explicit hanging-indent method.
Imagine us dragging the poem to the left or right in the window at will. What we have to do is to first push the entire poem a little to the right, then "out-dent" the trunk part of the verse-line. Every verse-line then begins some way to the left of the territory we have reserved for the poem. It is as if we have given with one hand and taken away with the other. If none of the lines break, readers will not even be aware of the outdenting. Here is an example with the background highlighted to show what is going on. The original position is marked by the dotted line, and the position after the shift is shown in blue.
The olives find the poplars rather haughty
The poplars find the olives rather naughty
At first this precaution may seem abstruse, especially when you intend most readers to see every line intact. However if a reader sharply reduces the size of a window, or is forced to use a tiny display, any turned sections of the line will then appear indented and will remain easily readable. What is actually happening is that the turned sections are hugging a boundary that will be invisible for all other readers, while the starts of the lines are cantilevered out to the left. This piece of lateral thinking will fool everyone. Put a comment on it in your code, because it may fool you too, and you may begin to puzzle later at the seemingly illogical way things line up on your page.
The olives find the poplars rather haughty
The poplars find the olives rather naughty
In CSS, out-denting is done by giving a negative indent value. We will employ the "em" unit of measurement, because indenting relates more to the font size than to the width of the viewport. It is desirable that the displacements of the words from one another look much the same whatever size of text the user picks. Here is an example: P {padding-left: 2em; text-indent: -2em;}
. The first attribute set, the padding, shifts the invisible left text boundary 2 ems to the right. Then a negative text-indent pulls the beginning of the line back to the left. Setting a negative value is equivalent to out-denting the first line of the <p>
.
Pulling all this together, using a shorthand declarations scheme for the padding and adding a comment, we have:
P {padding-left: 2em; text-indent: -2em;}
Take a look at another example, a poem by Desmond Piggin (1923-2001). Resize the viewing window till the lines are forced to wrap.
/* on small screens, this hanging indent has the effect of tucking overflow neatly under the trunk line */
Examples: • Simple • Wrapping • Rhyme • Sonnet • Cadence • Cascade • Stanzas • Caesura
Piggin.Net Macro-Typography
by Jean-Baptiste
Piggin is licensed under a Creative
Commons Attribution-ShareAlike 4.0 International License.