Print-ready with CSS

Printing XML: Why CSS Is Better than XSL by Håkon Wium Lie, Michael Day (O'Reilly XML.Com) responds to a line drawn in the sand in webarch.pdf by Norman Walsh, a noted XSLFO proponent. In it, he said:

“…web browsers suck at printing … they all suck. And CSS is never going to fix it. Did you hear me? CSS is never going to fix it.”

That’s pretty much all he has to say about CSS in that paper; it actually discusses a general style sheet, written in XSL, that transforms an HTML document to printable FO. If you motor on over to that link, even with Firefox’s helpful formatting, well-written XSL is still not exactly legible. The guy, however, knows what he’s talking about and claims to be able to format this Architecture of the World Wide Web, Volume One into a printable FO (which converts easily to PDF) using it.

Now comes the interesting part. As with all standards, we have to ask: “how good is good enough?” Håkon Lie, senior technology officer at Opera and longtime contributor to the CSS standard for the W3C, has “just used CSS to style a 400-page book”. Apparently, CSS is “good enough” for printing at least one book and, and here’s the authors’ point: it’s much easier to read and, at only about 200 lines*, much shorter.

*The link from Slashdot includes a 100-line version, which comes from the Prince distribution mentioned below.

Prince

The next natural question is: what the hell do I view this in? Browser support for printing is pretty sketchy, at best (though Opera’s printing in the 8.0 beta has gotten much, much better). Prince to the rescue! It generates PDF from XHTML and CSS. You can download for Linux or Windows and includes support for SVG, PNG, JPEG and TIFF graphics files.

If you download the Prince Alpha and run the sample document (which, purely by coincidence, is the same Web Architecture document referenced above) with the ‘forprint.css’ stylesheet, it generates a really nice-looking PDF in just seconds. Granted, PDF is a bit more verbose a format, using 1.5MB instead of the ~200KB for the original HTML file.

CSS Samples

There are several examples of the XSL and CSS used to generate various parts of the document. The CSS, in every case, is much clearer and easier to write. I found them more interesting as examples of what you can do with CSS. You can see most of these in action if you download Prince.

@page :left {
  @bottom-left {
    content: counter(page);
  }
}

This puts the current page number on the bottom left side of left-handed pages in when printed. Cool.

ul.toc a:after { 
  content: leader('.') target-counter(attr(href), page); }

This places the page number of a link’s target next to the link’s text in a table of contents (for example), using a ‘leader’ composed of periods.

body { column-count: 2; column-gap: 8mm; }

This one should be obvious, no? I didn’t know columns were that easy with CSS (though I’m not sure which version this requires).

Conclusions

The interesting thing to take away from all this is not that CSS is better than XSLFO or vice-versa. It’s that CSS is capable of generating very nice printed output from an HTML or any XML document. It’s also much easier to learn and maintain than XSLFO. That makes it a far more accessible formatting language. Some people on Slashdot were pointing out that “you are only going to write it once”. You never write something once and leave it alone. Maintainability and extensibility are paramount for most uses.

Also make sure to remember that CSS is not a wholesale replacement for XSL.

“XSL is a Turing-complete language which, in principle, can be used for all programming tasks and is particularly suited for document transformations. Styling documents is only one of many things XSL can do. CSS, on the other hand, has been developed with only one task in mind: styling documents.”

The thing to consider is whether your task needs the complexity of writing XSL transformations or whether you just need to style documents. If you only need to style, CSS is a comfortable and powerful alternative to XSL.