Skip to content

Instantly share code, notes, and snippets.

@brucelawson

brucelawson/css for soft linebreaks in poetry

Created November 14, 2019 12:53
Show Gist options
  • Save brucelawson/b079c1af9d4fb06f263729503e70f68f to your computer and use it in GitHub Desktop.
Save brucelawson/b079c1af9d4fb06f263729503e70f68f to your computer and use it in GitHub Desktop.
Download ZIP
Raw
css for soft linebreaks in poetry
There are many sites displaying song lyrics or poetry. In these artistic works, line breaks are important; they carry meaning.
Most sites markup the authorial line break with a <br> element to force the browser to honour the author's intention.
However, there are many occasions when a narrow screen forces a long line to wrap, and it is not possible for the reader to determine which line breaks are authorial (and thus have meaning/ semantics) and which are added by the browser (and are thus presentational).
In printed media, there are typographic conventions to indicate the difference.
@brucelawson
Copy link
Author

brucelawson commented Nov 14, 2019 •
edited
Loading

There are many sites displaying song lyrics or poetry. In these artistic works, line breaks are important; they carry meaning.
Most sites markup the authorial line break with a br element to force the browser to honour the author's intention.
However, there are many occasions when a narrow screen forces a long line to wrap, and it is not possible for the reader to determine which line breaks are authorial (and thus have meaning/ semantics) and which are added by the browser (and are thus presentational).

In printed media, there are typographic conventions to indicate the difference.

image

This is a photograph from a 1911 book I own on pre-Shakesperean Elizabethan drama. Each page has two columns, so are quite narrow. The 'non-authorial' line breaks are distinguished by indenting the continuation line to the right. (I've highlighted them yellow in the screenshot).

image
Here's a photograph of a recent paperback with selected poetry by Ogden Nash (who was well-known for having exceedingly long lines). The same convention is used.

I've also seen (but have no photos) continuation lines right-justified, and occasionally prefixed by a sort of arrow symbol to show they are a continuation of the line above, rather than a new line.

I want the ability to do any of these.

(Something like p::continuation-line {margin-left: 4ems;} / {text-align: right;} / {background-image: ..} etc? )

(Evidence that authorial linebreaks are semantic: https://en.wikipedia.org/wiki/Line_break_(poetry) )

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment