Bruce Lawson by Bruce Lawson in Blog

Post tags: css csswg odin specifications

This post is licensed under a Creative Commons Attribution 3.0 Unported license.

A Lovely <br>eak With the CSS Working Group

Yesterday, Microsoft gave me a free lunch. They did it because I went to Cambridge to observe the CSS working group's face-to-face meeting. I was geekily excited to hear them discuss the topic "what is a br element", and to meet fantasai, with whom I'd worked to gather web designers' wishes for CSS 3 (and who promises faithfully that the feedback on those wishes is imminent).

The "what is a break" debate didn't disappoint. Is it, as Håkon suggested, {content:'\A'; white-space:pre;}? But what about the fact that a single break has no height, but two (or multiple) breaks do? So should we add the rule br+br {content:'\A'; white-space:pre; height:1 em;}?

Someone else pointed out that the break element was more than just a presentational effect, and it has semantics - for example, when used to mark up poetry or code. So is it best described by defining a new value display:break;?

This idea was parked; whereas in CSS 3, a new value for the display property is theoretically possible (but hugely complex), but it can't be done for CSS 2.1. As you might know, the CSS 2.1 spec is

a "snapshot" of CSS usage: it consists of all CSS features that are implemented interoperably at the date of publication of the Recommendation.

Amongst other things, the CSS 2.1 specification doesn't allow an author or implementer to learn how an HTML br should be styled. For example, Microsoft and Mozilla both allow page-break-* to be set on the break element, and all the big four allow br style="clear:left;" to be specified. The problem is that the CSS 2 spec only allows these properties to be set on block level elements, and br is an inline element. (Or is it? There was some debate about whether it was its own kind of element).

It would be wrong to blame the browsers for all allowing clear to be set; the br element has been in the language since dinosaurs roamed the earth, and CSS 1 allowed clear on all elements, not just the block-levels:

Note. This property applied to all elements in CSS1. Implementations may therefore have supported this property on all elements. In CSS2 and CSS 2.1 the 'clear' property only applies to block-level elements. Therefore authors should only use this property on block-level elements. If an implementation does support clear on inline elements, rather than setting a clearance as explained above, the implementation should force a break and effectively insert one or more empty line boxes (or shifting the new line box downward as described in section 9.5) to move the top of the cleared inline's line box to below the respective floating box(es).

CSS 2.1 definition of clear

There was no question whether the exceptional behaviour of br should be specified, only that of how. Anne wanted to make it a special case, by saying html:br may have page-break-* applied, but others objected because CSS is not just for styling HTML:

CSS is the Web's primary style sheet language for specifying the rendering of text documents, in particular those expressed in HTML and XML-based formats. It can also be used to specify portions of the rendering of certain non-text formats, such as SMIL (multimedia) and SVG (vector graphics).

CSS Working Group charter

Eventually, consensus was reached, expressing it in a way that nobody liked but everyone can live with: page-break applies to block-level elements and may also be applied to "other elements". Whether this means that I could develop my brand new Bruce-browser by reading the amended CSS 2.1 spec and interoperably implement br is doubtful (so I'll abandon that plan and carry on with Opera, after all!).

The whole conversation is minuted on the IRC logs. One thing that that impressed me, and which doesn't come over in the minutes, is how much the participants care about users, web authors and designers. On issues where there are several solutions and none is technically superior, the group asked Molly and Jason Cranford Teague (the designers in attendance that day) to make the call.

My thanks to all of them for agreeing to my request to observe. Fantasai is even groovier in real life than online. There are even photos to prove they're all real people!