Bruce Lawson’s personal site

What I want from CSS 3, part 1

(Last Updated on )

Andy Budd recently posted that he wants min-padding, max-padding, min-margin and max-margin in CSS 3. My wishes are much more modest.

I want the ability to display poetry correctly on the Web.

I know I bang on about computer code and stuff like that, but my degree was English Literature with drama, and it occurs to me that HTML is chock-full of boring boffiny tags for computer geeks – var,kbd,samp, and other yawntabulous things. What about the artists, eh?

So I demand the ability to define “poetry”-style non-structural line breaks: if the browser has broken a line at an arbitrary point due to font size, width of a contiainer etc, the continuing line should either be right-justified or significantly indented (at the coder’s discretion), in order that structure and presentation of the poem be seperated in the reader’s mind.

Line breaks in poetry: form is function

All poetry has author-defined breaks, which are best marked up using <br /> as they are structural. They carry meaning – as is clearly illustrated in the line break explorer and perfectly exemplified in William Carlos Williams’ The Red Wheelbarrow. The line break begins a new line, justified with those above it, as normal.

But traditional printed poetry books have always used a different convention for “soft” line breaks introduced because the page width was too small to accommodate the full length of a line – particularly very old books which used small type in two columns per page.

Here’s an example from one of my most treasured books – a 1911 printing of “Pre-Shakespearean Renaissance Drama”. This shows part of Dr Faustus’ final speech from the eponymous play by Marlowe. I’ve highlighted the words that have been given a “soft” line break because of the thin columns; note that they’re indented so the reader can distinguish them from an authorial line-break.

words after a soft linebreak are indented an inch from the left margin

Now, I am the first to agree that the web’s not print, but it is vital to the understanding of a poem to know which linebreaks are structural, and which (like those above) are presentational. It’s more important on the web than in books, as any user can resize any page exactly when and how (s)he feels.

CSS suggestion

I suggest, therefore, that CSS3 includes a new ::line-break pseudo-element. It needs to be a pseudo-element, because the only the browser knows where it will put soft line-breaks. It’s similar to the ::first-line pseudo-element, which “knows” where the browser has put a soft line-break. My test page shows that, as you resize the browser width, the red font applied by the ::first-line style is shorter or longer depending on where the browser has put the linebreak.

With a ::line-break pseudo-element, I could write rules something like
p.stanza::line-break:after {margin-left: 5em;}
which would indent the continuation of the line, as in the 1911 example above.

Or a rule like
div.poem *::line-break:before {background-image:url(continued-next-line.gif);}
could put a “continued next line” image immediately before the soft line break, as in this screenshot from A List Apart:

screenshot showing small image directly before line break

Why does this matter?

The web is an ideal medium for the dissemination of poetry or song lyrics, as the economics of poetry publication makes it extremely difficult for authors to be published in print. So, come on W3C: PROVIDE PROPER POETIC PRESENTATIONAL POSSIBILITIES – NOW!!.

(To any of you who thought an English Lit degree is easy, look at Carlos William’s sixteen-word poem The Red Wheelbarrow and tremble at the thought of my mighty 5000 word undergraduate essay on its structure.)

10 Responses to “ What I want from CSS 3, part 1 ”

Comment by Weiran

That seems really useful, and it extends to displaying code as well when you want to indicate that there isn’t a line break even though it’s displayed on a new line.

Comment by Bruce

Curse you, Zhang, for finding a geeky use for my suggestion.

Mind you, you’re absolutely right; the soft line-break in code is identical to the soft break in poetry.

Comment by Joe Clark

It’ll never happen. I’ve been complaining about this for years, but in the context of HTML for newspaper and magazine publishing, where we need structures like hed, dek, lede, byline (several kinds), cq, and tk, among others. The response from Tantek was a huffy dismissal that newspaper sites already aren’t using XHTML properly, so there’s no demand for semantics of this kind.

But by *Christ* we’re getting BLOCKCODE. Gotta keep our priorities straight.

I would make another crack about Aspergerian geeks having no culture and running the show at W3C just for themselves, but then I’d be denounced for picking on people with that disability (though I am merely picking on their behaviour).

Comment by Bruce

You’re much more versed in the mysteries of the w3c, Joe. For the benefit of readers (which is of course code for “I personally don’t have a fucking clue”), how would one go about lobbying our too-nervous-to-set-Standards chums for additions to css/ xhtml?

Comment by Jim

We’ve used TEI-Lite to mark up historical correspondence. It has also been used to mark up poetry so maybe something can be done using TEI elements inside XHTML documents. After all, there’s nothing wrong with using elements from more than one namespace in an XML document, as long as your browser or reader or whatever can understand them.

Anyway, here’s the Wikipedia page for TEI

Comment by Chris Maurice

While it is a bit distasteful, you should be able to implement this by having each line in a block and then setting the indent-related CSS properties on that block to indent any text that is given a soft line-break.

Comment by Chris Bloom

@Chris: I was thinking the same thing about using a negative text-indent on the first line. However, any lines after a hard-break ([br]) would be indented along with the soft-wrapped lines. Using p tags instead of br tags would work only if the p tags were styled to not have any top or bottom margins, but if the reader was using a non-visual browser the poem wouldn’t “read” properly.

Comment by Adrian

proposals to be added to the css variables described at:

proposal 1

To exist a new kind of variable – image variable defined as follows:

@define imagvars{ imagevar1 { rect(20,30,40,50) url(} , imagevar2 { rect(60,70,80,90) url(}}

where rect(60,70,80,90) is the square that defines the image on the sprite (sprite – an image that contains a group of images)

after that we can apply the slice of the image as follows:


is instead of the proposal to add background-image-crop to css3(i mean to exist a modality to crop images for background as well, similarly to clip:rect() property )


proposal 2

inheritance for style-sets

instead of @define style-sets { noteBox { border-style: solid; padding: 1em; border-radius: 1em; } quoteBox { margin: 1em; } }

for applying inheritance will be redefine as follows

@redefine style-sets { noteBox2{ noteBox { border-style: dashed; }}}

will have the same result as defining a new style as follows
@define style-sets { noteBox2 { border-style: dashed; padding: 1em; border-radius: 1em; }}

Comment by Ant

I want @enchance @-rule. It would be something like this:

@enchance (text-shadow:0 0 1px rgba(120,120,120,.5){

text-shadow:0 0 1px rgba(120,120,120,.5)



So if browser support text-shadow AND rgba, it will add shadow to h1 and make it transparent, otherwise, it will be gray (so text would become readable on older browsers).

Leave a Reply

HTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> . To display code, manually escape it.