Karakas Online

7.1.8. CSS

See Section 4.14 and Chapter 8 for the details of using a CSS for the HTML output. The proposed ck-style.css is a CSS tailored to the HTML produced by DocBook. It also takes into account some modern approaches to accessibility (see Chapter 9, for more on accessibility of DocBook generated HTML pages).

For example, 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 7-1, 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 7-1. CSS page area model.

CSS page area model.

CSS page area model.

If you output admonitions as tables, rather than graphics (see Section 4.7), 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 wink), 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.

Last updated Mon Sep 24 01:19:25 CEST 2007 Permalink: http://www.karakas-online.de/mySGML/explain-css.html All contents © 2002-2007 Chris Karakas