Thursday, January 20, 2005

Printing XML: Why CSS Is Better than XSL

If you've ever had the misfortune of working with xsl-fo, you'll appreciate this article.

I commonly use the @print and @screen directives in css to create completely separate printed versions of a page. Anything that is presented on your screen that you don't want to print you change to display: none; for it's style. Notice that in the example below, the main content section of the page is switched from absolute positioning for the screen to normal html flow for print.

@media screen
{
#header
{
position: absolute;
left: 0px;
top: 0px;
width: 800px;
height: 110px;
}
#content
{
background-color: #ffffff;
position: absolute;
top: 110px;
left: 225px;
height: 390px;
width: 575px;
line-height: 125%;
overflow:auto;
}
}

@media print
{
#header
{
display: none;
}
#content
{
line-height: 125%;
overflow: visible;
top: 0px;
}
}

2 comments:

  1. misfortune? Care to elaborate (or post an example that shows using CSS to print page headers/footers, page numbers, dynamic table of contents, etc, etc).

    If you are an industry where something like a patient identifier is mandated by law to appear at the top of every printed page, these things become very important. If you are using xsl:fo to just do simple printouts of web pages, then you are using the wrong tool for the job.

    ReplyDelete
  2. All of the items you mention are now relatively easy with css3. Here's a page numbering example:

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

    This handles both left and right outside edge page numbering as well as leaving the first page blank.

    You can also do dynamic tables of contents, but I don't have an example handy at the moment.

    To do repeating headers and footers, something like this:

    @page {
    @top { ... } /* defines a header the width of the page */
    @bottom { ... } /* footer is the width of the page */
    }

    (I didn't bother to fill in the actual style elements).

    All of this is done with about 20% of the code of xsl-fo. Additionally, it's much more easy for ColdFusion developers to understand since many use css every day. Getting your brain around xsl-fo is pretty challenging

    The W3C has a recommendation candidate that explains more.

    This whole discussion could really be made moot by cfmx7's report writer for building reports.

    I still think it is an interesting way to present printed representations of web pages that don't layout nicely for the printer.

    ReplyDelete