| 2. Using CSS with docbook | ||
|---|---|---|
 | Chapter 5. A small extension to docbook |  |
| 2. Using CSS with docbook | ||
|---|---|---|
| | Chapter 5. A small extension to docbook | |
For HTML output, CSS can help with presentation. That's a
given. In this document I've used it in a couple of places, one
where I've extended docbook (the poem) to outdent the lines of the
poem body, and as a part of standard docbook to provide some sort of
background to make literallayout stand out from the
normal text just a little more.
The starting point is in the customization layer. The documentation shows the parameter to use.
<xsl:param name="css.decoration" select="1">
If non-zero, then html elements produced by the stylesheet may be
decorated with style attributes. For example, the li tags produced for
list items may include a fragment of CSS in the style attribute which
sets the CSS property "list-style-type".
The general rule is that the html output is marked with a class
attribute which reflects the source element. This allows the CSS to
hook onto the item and decorate it as needed. The other information
the stylesheets need is the name of your CSS stylesheet. The html.stylesheet
parameter is used to specify the filename (relative to the html file,
or absolute, if you store it in /styles) of the
stylesheet. Finally html.stylesheet.type
is used to identify what type of stylesheet is in use. So the final
customization might look like
<xsl:param name="css.decoration" select="1">
<xsl:param name="html.stylesheet.type">text/css</xsl:param>
<xsl:param name="html.stylesheet">/styles/css/docbook.css</xsl:param>
All that remains now is to create the CSS stylesheet, ensure
that it is copied to wherever it is required when the document is
built. For this example the literallayout input generates
<div class="literallayout"></div> in the html, so the
CSS might be
div.literallayout, pre.screen{
background-color: grey;
font-family: courier;
padding: 2em;
}
pre.programlisting{
border: thin black solid;
background-color: #ECF1EF;
padding: 2em;
}
I've added a different background color for the programlisting element, just to pick them out
That shows the basics. Easy enough to develop from this.
| |  | |
| 1. A docbook schema extension, to demonstrate schema customization and stylesheet customization. |  | Chapter 6. Where to find the code, schema etc |