Karakas Online

Chapter 4. CSS for DocBook SGML

Figure 4-1. Valid CSS.

Valid CSS.

Valid CSS.



You have written your document using DocBook SGML. You have used all the available tools to transform ("render") your document to various formats, including, of course, HTML. But now you realize that your document looks somewhat "boring". It's HTML is well-written - no question. But you just can't avoid the feeling that there is still a lot that can be done to produce a more visually appealing vesrion. In fact, you need a Cascading Style Sheet, a CSS.

"So what's the problem?" - you might say. "I'll grab the first CSS I can find and I will use it". Well, the problem is, that you will not be able to. The documents created by Jade &Co. use some classes that you will not find in every CSS file - so you will have to find the right formatting yourself.

Searching the Internet did not bring many results, see for example the List of DocBook CSS at the DocBook Wiki.

Those of you who would like to experiment with a CSS that works with DocBook right away may copy the following one which I use for my own documents, including the one you are reading:

BODY
{
        font-family: verdana;
}

DIV.ABSTRACT
{
        border: solid 2px;
        padding-left: 10pt;
        padding-right: 10pt;
}
PRE.SCREEN
{
        font-family:monospace;
        white-space: pre;
        width: 100%;
        background-color: #ffffcc;
        border:solid;
        color: #000000;
        border-color: #009999;
        border-left: solid #009999 2px;
        border-right: solid #009999 2px;
        border-top: solid #009999 2px;
        border-bottom: solid #009999 2px;

        padding-left: 15pt;
}

PRE.PROGRAMLISTING
{
        font-family:monospace;
        white-space: pre;
        width: 100%;
        background-color: #ffffcc;
        border:solid;
        color: #000000;
        border-color: #009999;
        border-left: solid #009999 2px;
        border-right: solid #009999 2px;
        border-top: solid #009999 2px;
        border-bottom: solid #009999 2px;

        padding-left: 15pt;
}

H1
{
        color: #ffffff;
        border: solid 3px #a0a0d0;
        background-color: #606090;
        font-variant: small-caps;
        width: 100%;
}

H1.TITLE
{
        color: #ffffff;
        border: solid 3px #a0a0d0;
        background-color: #606090;
        font-variant: small-caps;
        width: 100%;
}

.TITLE a {
        color: #ffffff; 
        text-decoration: none;
}

.TITLE a:active {
        color: #ffffff; 
        text-decoration: none;
}

.TITLE a:visited {
        color: #ffffff; 
        text-decoration: none;
}

H2
{       
        COLOR: #ffffff ;
        font-style: italic;
        BACKGROUND-color: #a0a0d0;
        BORDER: solid 3px #606090;
        PADDING: 1px
}

TABLE.IMPORTANT
{
        font-style:italic;
        border: solid 2px #ff0000;
        width: 70%;
        margin-left: 15%;       
}
TABLE.CAUTION
{
        font-style:italic;
        border: ridge 2px #ffff00;
        width: 70%;
        margin-left: 15%;       
}

TABLE.NOTE
{
        font-style:italic;
        border: solid 1px #000000;
        width: 70%;
        margin-left: 15%;       
}
TABLE.TIP
{
        font-style:italic;
        border: solid 1px #000000;
        width: 70%;
        margin-left: 15%;       
}

TABLE.WARNING
{
        font-style:italic;
        font-weight: bold;
        border: ridge 4px #ff0000;
        
        width: 70%;
        margin-left: 15%;       
}

DIV.VARIABLELIST {
        font-family: sans-serif;
        font-style: normal;
        font-weight: normal;
        padding-left: 20px;
}

.VARLISTENTRY {
        font-weight: bold;
        margin-top: 10px;
        COLOR: #ffffff ;
        BACKGROUND-color: #a0a0d0;
        BORDER: solid 1px #606090;
        PADDING: 1px
}

/*
 * See http://diveintoaccessibility.org/day_26_using_relative_font_sizes.html
 * for an explanation of the following few commands.
 * They are really too complicated to explain here in all depth. ;-)
*/

P {
        font-size: 12px;
}

/*/*/A{}
BODY P {
        font-size: x-small;
        voice-family: "\"}\"";
        voice-family: inherit;
        font-size: small;
}

HTML>BODY P {
        font-size: small;
}
/* */

/* Add an external-link icon to absolute links */
a[href^="http:"] {
        background: url(images/remote.gif) right center no-repeat;
        padding-right: 12px;
}

a[href^="http:"]:hover {
        background: url(images/remote_a.gif) right center no-repeat;
}

/* Add a note icon to footnote links */
a[href^="#FTN"] {
        background: url(images/qbullet-note.gif) right center no-repeat;
        padding-right: 12px;
}

a[href^="#FTN"]:hover {
        background: url(images/qbullet-note_a.gif) right center no-repeat;
}

/* ...and a back icon to the backlinks in the footnotes themselves */
a[name^="FTN"] {
        background: url(images/scrollup.gif) right center no-repeat;
        padding-right: 12px;
}

a[name^="FTN"]:hover {
        background: url(images/scrollup_a.gif) right center no-repeat;
}

/* Add a download icon to .gz links */
a[href$=".gz"],a[href$=".tar"],a[href$=".zip"] {
        background: url(images/disk.gif) right center no-repeat;
        padding-right: 12px;
}


/* Add an Acrobat Reader icon to PDF links */
a[href$=".pdf"] {
        background: url(images/acrobat.gif) right center no-repeat;
        padding-right: 12px;
}

a[href$=".pdf"]:hover {
        background: url(images/acrobat_a.gif) right center no-repeat;
}

/* Add a Word icon to RTF links */
a[href$=".rtf"] {
        background: url(images/word.gif) right center no-repeat;
        padding-right: 12px;
}


/* ...but not to absolute links in this domain... */
a[href^="http://www.karakas-online.de"] {
        background: transparent;
        padding-right: 0px;
}

a[href^="http://www.karakas-online.de"]:hover {
        background: transparent;
}

/* ...or to the translation links on each page */
DIV.translatelink > a[href^="http:"] {
        background: transparent;
        padding-right: 0px;
}

DIV.translatelink > a[href^="http:"]:hover {
        background: transparent;
}

/* ...or to any images  */
DIV.imagelink  a[href^="http:"] {
        background: transparent;
        padding-right: 0px;
}

DIV.imagelink  a[href^="http:"]:hover {
        background: transparent;
}


P.C2 {
        COLOR: #ffffff ;
        BACKGROUND-color: #a0a0d0;
        BORDER: solid 1px #606090;
        PADDING: 1px
}


DIV.NAVFOOTER {
        color: #000000;
        background-color: #EFEFF8;
        padding: 5px;
        margin-top: 10px;
        width: 100%;
        border: thin solid #a0a0d0;
}

DIV.NUKEFOOTER {
        color: #000000;
        background-color: #B0E0E6;
        padding: 5px;
        margin-top: 10px;
        width: 100%;
        border: thin solid #a0a0d0;
}

DIV.NAVHEADER {
        color: #000000;
        background-color: #EFEFF8;
        padding: 5px;
        margin-bottom: 10px;
        width: 100%;
        border: thin solid #a0a0d0;
}

DIV.SECT1,DIV.SECT2,DIV.SECT3 {
        margin-left: 20px;
}

DIV.EXAMPLE,DIV.TOC {
        border: thin dotted #70AAE5;
        padding-left: 10px;
        padding-right: 10px;
        color: #000000;
        background-color: #EFF8F8;
}

DIV.TOC {
        margin-left: 20px;
        margin-right: 20px;
        width: 95%;
}

UL  {
        list-style: url("images/tux-bullet.png") disc;
    }

It incorporates important elements from the Newbiedoc CSS file for DocBook and Mark Pilgrim's influential dive into Accessibility. It is an integral part of my method of document processing with LyX and SGML, which I use for all the documents on my Homepage.

You can control the navigation header style with

DIV.NAVHEADER {
        color: #000000;
        background-color: #EFEFF8;
        padding: 5px;
        margin-bottom: 10px;
        width: 100%;
        border: thin solid #a0a0d0;
}

and the navigation footer style with

DIV.NAVFOOTER {
        color: #000000;
        background-color: #EFEFF8;
        padding: 5px;
        margin-top: 10px;
        width: 100%;
        border: thin solid #a0a0d0;
}

The concepts of margin, border and padding follow a page model that is described in W3C's working draft CSS3 Paged Media Module, version of Dec. 18th 2003. Figure 4-2, taken from this document (Copyright © 2003 W3C (MIT, ERCIM, Keio), All Rights Reserved) illustrates the various geometric notions of this page model. Note that the XSL area model is deliberately very similar to the CSS one.

Figure 4-2. CSS page area model.

CSS page area model.

CSS page area model.



If you output admonitions as tables, rather than graphics (see Admonitions), then you can control their style with a code like the following (shown here for the "Important" admonition):

TABLE.IMPORTANT
{
        font-style:italic;
        border: solid 2px #ff0000;
        width: 70%;
        margin-left: 15%;
}

Screen output (code) is controlled by

PRE.SCREEN
{
        font-family:monospace;
        white-space: pre;
        width: 100%;
        background-color: #ffffcc;
        border:solid;
        color: #000000;
        border-color: #009999;
        border-left: solid #009999 2px;
        border-right: solid #009999 2px;
        border-top: solid #009999 2px;
        border-bottom: solid #009999 2px;
        padding-left: 15pt;
}

while examples and the Table of Contents by

DIV.EXAMPLE,DIV.TOC {
        border: thin dotted #70AAE5;
        padding-left: 10px;
        padding-right: 10px;
        color: #000000;
        background-color: #EFF8F8;
}
DIV.TOC {
        margin-left: 20px;
        margin-right: 20px;
        width: 95%;
}

An "external link" icon to absolute links (i.e. links starting with "http:") is added through

/* Add an external-link icon to absolute links */
a[href^="http:"] {
        background: url(images/remote.gif) right center no-repeat;
        padding-right: 12px;
}
a[href^="http:"]:hover {
        background: url(images/remote_a.gif) right center no-repeat;
}

However, this alone would put the icon on every link with an absolute URL, including links pointing to the local domain. This is corrected by

/* ...but not to absolute links in this domain... */
a[href^="http://www.karakas-online.de"] {
        background: transparent;
        padding-right: 0px;
}
a[href^="http://www.karakas-online.de"]:hover {
        background: transparent;
}

"External link" icons tell you what a link will do before you click on it. There are icons specifically designed for this purpose, like QBullets. QBullets are a collection of elegant, animated icons that attach to hypertext links to indicate their function. You can download Qbullets for free from matterform media.

To use this idea for footnotes, the name attribute is used as a selector:

/* Add a note icon to footnote links */
a[href^="#FTN"] {
        background: url(images/qbullet-note.gif) right center no-repeat;
        padding-right: 12px;
}
a[href^="#FTN"]:hover {
        background: url(images/qbullet-note_a.gif) right center no-repeat;
}

This will select all links whose href attribute starts with "#FTN" and append a note icon to them, which will even show an animated page curl upon passing with the mouse over it (hover). The links whose href attribute starts with "#FTN" look like

<a name="AEN1175" href="#FTN.AEN1175">[1]</a>

and point to a footnote. The footnote itself also contains a link - which points back to the referring text. That link will not be affected by the above selection, since its href attribute does not start with "#FTN" :

<a name="FTN.AEN1175" href="explain-runsed-sed-sedscr.html#AEN1175">[1]</a>

To display a back icon besides those links, a selector on the name attribute is used:

/* ...and a back icon to the backlinks in the footnotes themselves */
a[name^="FTN"] {
        background: url(images/scrollup.gif) right center no-repeat;
        padding-right: 12px;
}
a[name^="FTN"]:hover {
        background: url(images/scrollup_a.gif) right center no-repeat;
}
Note String matching on attributes is a CSS3 feature!
 

To be able to use string matching on attributes, as we have done in the QBullets examples above, the user must view our document with a browser that supports this CSS3 feature. If you are wondering whether your browser belongs to this cutting edge category (Mozilla 1.5 does, tip, tip Inline graphic), you can do this W3C browser test on CSS selectors and test for "Substring matching attribute selector".

To get an icon in place of the usual bullet in itemized lists, the list-style property is used for the UL tag:

UL {
        margin-bottom: 10px;
        list-style: url(images/tux-bullet.png) square;
    }

Last but not least, a cross-browser relative font setting can be achieved with

P {
        font-size: 12px;
}
/*/*/A{}
BODY P {
        font-size: x-small;
        voice-family: "\"}\"";
        voice-family: inherit;
        font-size: small;
}
HTML>BODY P {
        font-size: small;
}
/* */

which is indeed too complicated to explain here in all its depth. See Dive into Accessibility, day 26 for this.