[an error occurred while processing this directive]

The Web-Book style sheet explained

All of our web books are formatted using HTML and a style sheet. While the HTML takes care of the structure — the division of a book into chapter, section, paragraph etc. — the style sheet takes care of the presentation — how each structural component should look on your screen or printer.

The most important part of our web books — apart from the content itself — is the style sheet. The same style sheet is used by all our web books, although most will use only a few of the classes provided.

This explanation assumes that you have at least a passing familiarity with Cascading Style Sheets (CSS) and the CSS2 specification.

Basic formatting

There are three things which contribute most to readability: some white-space in the form of margins to separate the content from the edge of the page; black text on a white background, to achieve maximum contrast; and the right width of lines, to reduce side-to-side eye movement. Look at just about any printed book, and these are what you see, for the simple reason that this is what works best. This basic formatting is achieved through the body tag.

First, unused parts of the window (outside the body) are greyed out, to reduce glare:

@media screen {
	html { background-color:#999; }
}

Text is black on white ...

body {
	color:#000; background-color:#fff;

... font is the very readable Georgia available on Windows ...

	font-family:Georgia, serif;

... the text is constrained to a maximum width of 33em (studies having shown that this improves readability),

	width:33em;

... and for older browsers which don't understand margin:auto, we provide some reasonable margins:

	margin-left:3em; margin-right:2em;
}

[note that 33em is a little wide for NS4, but ... users should upgrade.]

This mimics the basic print "standard", and works for all GUI browsers, but we have a few more "tricks" which set our collection apart:

For modern browsers, override the margins above and center the text in the window, with nice margins:

@media screen {
	body {
		max-width:33em;
		margin:1em auto;
		padding:3em 3em 1em 3em;
	}
}

Another feature regularly seen in books is justified text — somehow, having a neat right margin to the text adds visual appeal. [Opinion varies on whether this helps or hinders readability.] This is done thus:

p { text-align:justify; line-height:140%; }

The line-height attribute provides for a little extra spacing between lines, again improving readability through white-space. Unfortunately, this isn't applied uniformly by all browsers, although newer browsers seem to add about an extra 20% by default. 140% is chosen somewhat arbitraily — because it looks about right to me.

Some things which are really just "house" style — the editor's choice:

... Headings are all centered, and sized appropriately; h1 is used for the book title, h2 for author (on the titlepage), h3 for chapter headings, h4 for section of sub-headings, h5 for sub-heads, and h6 for paragraph or minor heads, and for contents page precis.

h1,h2,h3,h4,h5,h6 { text-align:center; }
h1 { font-size:2em; font-weight:bold; }
h2 { font-size:1.6em; font-weight:bold; }
h3 { font-size:1.2em; font-weight:bold; }
h4 { font-size:1em; font-weight:bold; }
h5 { font-size:1em; font-weight:bold; }
h6 { font-size:1em; font-weight:normal; }
h6 { font-style:italic; }

An exception is the table of contents, where h4 and h5 are used for major and minor sections, and presented "list-like":

div.contents h4 { text-align:left; }
div.contents h5 { text-align:left; margin-left:2em; }

The divisions of a book

In our style sheet, we define a number of classes to be used with the DIV tag to delineate the different parts of the text, pretty much following the Chicago Manual of Style.

The major parts have extra space above to separate them from the previous part, and a dotted line at the end to separate then from the next. (This applies only to screen presentation; when printed, they are separated by a page break.)

@media screen {
	div.titlepage {
		margin-top:1em;
		margin-bottom:1em;
	}
	div.halftitle,
	div.titleverso,
	div.frontmatter,
		div.dedication,
		div.contents,
		div.foreword,
		div.preface,
		div.introduction,
		div.acknowledgments,
	div.chapter,
	div.act,
	div.essay,
	div.canto,
	div.backmatter,
		div.afterword,
		div.appendix,
		div.notes,
		div.glossary,
		div.bibliography,
		div.index,
	div.colophon {
		margin-top:2em;
		border-top:1px dotted gray;
		padding-top:1em;
		margin-bottom:1em;
	}
}

Minor sections are separated with extra spacing -- equivalent to three blank lines.

div.section { margin-bottom:3em; }

Obviously, not all of these classes are used in every text.

Note that divisions such as "book" and "volume" are never used, on the principle that these are artefacts of printing and have no relevance to web books. Words such as "book", "volume" and "part" may however appear as part of chapter headings, usually only where this has importance to the text.

Notice that one may be specific in assigning classes, or use the more generic "frontmatter" and "backmatter". The result is the same.

Some of these divisions have additional attributes:

Title Page

Title Page is normally used only in the index.html file and composite (complete) file.

Everything on the titlepage is centered and bold.

div.titlepage {
	text-align:center;
	font-weight:bold;
}
div.titlepage p {
	text-align:center; line-height:140%;
}

The headings have precise uses: h1 = title; h2 = author; h3 = sub-title; h4 = other.

div.titlepage h1 { margin-top:2em; margin-bottom:0em; }
div.titlepage h2 { margin-top:2em; margin-bottom:0em; }
div.titlepage h3 { margin-top:2em; margin-bottom:0em; }
div.titlepage h4 { margin-top:2em; margin-bottom:0em; }
div.titlepage p  { margin-top:2em; margin-bottom:0em; }
div.titlepage hr { display:none; }

Our imprint is italic ...

div.titlepage p.imprint {
	text-align:center; font-style:italic;
}

Title Verso

The title-verso (back of the title page) section is where we put all the publication details. This is all gray and centered:

div.titleverso {
        font-family:sans-serif;
        font-size:.9em;
        color:#666; background-color:#fff;
        text-align:center;
}
div.titleverso p { text-align:center; }

div.titleverso p a {
        font-family:sans-serif;
        color:#666; background-color:#fff;
        text-decoration:none;
}
div.titleverso p a:visited {
        font-family:sans-serif;
        color:#666; background-color:#fff;
        text-decoration:none;
}
div.titleverso p a:hover {
        font-family:sans-serif;
        color:#f00; background-color:#fff;
        text-decoration:underline;
}

Colophon

Colophon should be the last division in the book, marking the end.

div.colophon p { 
	font-family:sans-serif; font-size:.9em;
	color:#666; background:#fff;
	text-align:center;
}

Block classes

Also defined are various classes for specific block elements of a text. First of all are notes.

Notes

Notes can be presented in a variety of ways: in a separate "Notes" division in the "back-matter" -- in this case there is no special styling; in a "Footnotes" section at the end of a division; "embedded" by positioning the note as near following the reference as possible; oe "in-line", where the note is run-in with the text at the point of reference.

Footnotes are smaller, indented, with a horizontal line separating them from the body.

div.footnotes {
        margin-left:1em; margin-right:1em;
        border-top:1pt solid gray; padding:2pt;
	font-size:0.9em; text-indent:0;
        font-family:sans-serif;
}

Embedded notes are smaller, with a box around them somewhat indented from the margin:

div.note p,
p.note {
        margin-left:1em; margin-right:1em;
        border:1pt solid gray; padding:2pt;
	font-size:.9em; text-indent:0;
        font-family:sans-serif;
}

Note that the note class can be used either for a single paragraph or for multiple paragraphs using a div.

Occasionally, "inline" notes are used [where the note is included within the text] — usually because turning them into footnotes is too difficult:

span.inline-note {
	font-size:.9em;
        font-family:sans-serif;
	color:gray;
}

Similar is the "marginal note" -- intended to display in the margin, but not really possible with the overall structure.

span.marginal-note { font-size:.9em; font-style:italic; }

There's also a popup note, which exploits the "tool-tips" display used by browsers. Unfortunately, this is not as useful as I'd like, due to limits on the length of the note displayed:

span.popup-note, abbr, acronym {
        border:1px dotted gray; cursor:help; }

And finally there's a special note for screen display only, used for instructions which only make sense in browser displays:

@media screen {
	.screen-note { 
		font-size:.9em; text-indent:0;
		margin-left:1em; margin-right:1em;
		border:1pt solid gray; padding:2pt;
	}
}
@media print {
	.screen-note { display:none; }
}

Quotations

There's a general class defined for quotations — quoted text within the body — basically a blockquote:

div.quote p,
p.quote,
blockquote {
        margin-left:1em; margin-right:1em;
        font-style:normal;
}

Notice that this also forces blockquote to conform to the same style.

Some specific types of quotation have their own classes:

div.inscription p,
p.inscription {
	text-align:center; font-variant:small-caps;
}

Note that inscription and quote can be combined, to give an inscription that's indented.

Use notice for advertisements, handbills, etc. It indents like quote, but puts a box around bold text.

div.notice {
        margin-left:1em; margin-right:1em;
	border:1px solid; padding:1em;
}
div.notice p { text-align:center; font-weight:bold; }

Other

Other standard parts of a work (as defined by the Chicago Manual of Style, for example) are also given classes. As with chapters etc, this is partly done so as to identify the different parts in the file, but also permits application of stylistic differences. The parts currently defined include: dedication, abstract, precis, rubric and colophon.

div.dedication p,
p.dedication { text-align:center; }

div.rubric p,
p.rubric { text-align:center; font-style:italic; }

div.abstract p,
p.abstract {
        margin-left:1em; margin-right:1em;
        font-style:italic; font-size:.9em;
}

div.precis p,
p.precis {
        margin-left:1em; margin-right:1em;
        font-variant:small-caps; font-size:.9em;
}

div.epigraph p,
p.epigraph {
	text-align:center; font-style:italic;
}

Letters

In addition, styles are defined for letters quoted in the text, both written and typed. Typed letters are monospaced (just like a typewriter!):

.letter-typed {
        font-family:monospace; font-style:normal;
        margin-left:1em; margin-right:1em;
}

. . . while written letters use a cursive font to indicate handwriting:

.letter-written {
        font-family:cursive;
        margin-left:1em; margin-right:1em;
}
div.letter-written p { text-align:left; }

Actually, a better approach is probably to define typed and written classes, and combine with quote as needed:

.typed { font-family:monospace; }
.written { font-family:cursive; }
.telegram {
	font-family:Courier, monospace;
	font-variant:small-caps;
}

Plays

Three special classes are used for Plays, to delineate the name of the character, her speech, and stage directions:

.speaker { font-weight:bold; font-variant:small-caps; }

.speech { margin-left:1em; }

.stage { font-style:italic; }

We also use div.play and div.act but these have no styles applied and are therefore not mentioned in the stylesheet.

The following provides an alternative format, where speech is not encoded specifically, but uses a bare <p>, with the speaker's name identified at the start of the paragraph.

div.act p { margin-left:1em; }
p span.speaker { margin-left:-1em; }

Poetry

Finally, we define classes for poetry, which basically indent the text a little:

div.poem { font-style:normal; }
div.poem p { text-align:left; line-height:140%; }
div.poem pre {
	font-family:serif;
	text-align:left; line-height:140%; }

div.canto p { line-height:140%; }

.verse { text-align:left; margin-left:2em; }
.stanza { text-align:left; margin-left:2em; }

.chorus { margin-left:4em; font-style:italic; }

This assumes that verse line breaks are managed with the BR tag.

Alternatively, one could define a verse class using:

.verse { white-space:pre; }

This would treat verse lines as if enclosed in PRE tags, with the benefit of preserving any line indentation or other formatting. However, the white-space attribute is not yet uniformly supported, and thus has not been used.

If you need to include line numbers, we can use this to float them to thr right:

span.vln {
	position:relative; top:auto; right:-4em;
	font-size:.8em; color:gray;
}

Note that the alternative: span.vln { float:right; font-size:.8em; } while intuitively obvious, doesn't quite work, since the number will float to the end of the next line, rather than the current line.

Multi-file styles

Where books are split into multiple files (e.g. by chapter), each file ends with navigation and document info. sections. The effect of these can be seen in any ebook and need not be explained here.

The Document header section. This should be used at the head of individual parts when a book is divided into multiple files, but NOT on the title page. Normally, only h2 is used here.

div.dochead { text-align:center; }
div.dochead h2 {
        font-family:sans-serif;
        font-weight:normal;
        font-size:1em;
        font-style:normal;
        color:gray;
}
div.dochead hr { display:none; } /* fix for older pages */

Navigation is used at the end of each part:

div.navigation {
        font-family:sans-serif;
        font-size:.9em;
        text-align:center;
        text-indent:0;
        margin-top:2em;
	border-top:1px dotted gray;
        padding-top:2em;
}
div.navigation p {
        font-size:.9em;
        text-align:center;
        text-indent:0;
}
div.navigation a,
div.navigation a:visited {
        border-right:2px solid gray;
        border-bottom:2px solid gray;
        background-color:#ddd;
        color:#333;
        text-decoration:none;
        padding:3px;
        font-size:.9em;
        font-family:sans-serif;
}

Docinfo is added to the end of each part:

div.docinfo {
        font-family:sans-serif;
        font-size:.9em;
        color:#666;
        background-color:#fff;
        text-align:center;
}
div.docinfo p { text-align:center; }

div.docinfo p a {
        font-family:sans-serif;
        color:#666; background-color:#fff;
        text-decoration:underline;
}
div.docinfo p a:visited {
        font-family:sans-serif;
        color:#666; background-color:#fff;
        text-decoration:underline;
}
div.docinfo p a:hover {
        font-family:sans-serif;
        color:#f00; background-color:#fff;
        text-decoration:underline;
}

Miscellaneous styles

The style sheet also contains styles for a number of standard HTML tags. These should be self-explanatory.

Rules were used to divide major divisions, but are now deprecated: they are greyed to make them less dominant. As a general principle, anything not part of the actual book text is greyed out.

hr { color:#ddd; background-color:#fff; }

Anchors: these are standard colours, but exclude underlining.

a:link    {
	color:#00f; background-color:#fff;
	text-decoration:none; }
a:active  {
	color:#f00; background-color:#fff;
	text-decoration:none; }
a:visited {
	color:#909; background-color:#fff;
	text-decoration:none; }

A "bookmark" class is used for links provided for bookmarking purposes, making them "invisible" except when the user hovers the mouse over their text:

a.bm, a.bm:link, a.bm:visited {
	color:black; text-decoration:none;
}
a.bm:active, a.bm:hover { color:red; }

Illustrations are centered, with styled captions, thus:

p.illustration, div.illustration p {
	text-align:center;
	font-size:.9em; font-variant:small-caps;
}

Some "position" classes, e.g. for IMG placement:

.left { float:left; }
.right { float:right; }
.center { text-align:center; }
.clear { clear:both; }

Something to put a box around anything:

.border { border:1px solid; padding:1em; }

Citations are underlined, not italic:

cite { text-decoration:underline; font-style:normal; }

Lists deserve a little more space between items:

li { margin-top:.5em; }

superscript is used for note references/numbering. Size ensures that the numbers don't intrude by increasing line spacing.

sup { font-size:.7em }

A transition class is defined for separations between paragraphs, where a break in the flow is intended, without a chapter or subhead.

.transition { margin:2em 0; text-align:center; }

Transition is now deprecated, as you can get the same effect using div.section without a heading.

Pre-format class -- same as pre, but needs br to break lines:

div.pre { font-family:monospace; text-align:left }

Fix for IE5.5-Mac:

pre { font-family:monospace; text-align:left }

When we specify language explicitly, use a bigger font -- it looks better:

span[lang] { font-size:larger; }

Printing

Finally, we specify a few print controls, for anyone who wants a printed copy. This is most useful for printing from the complete (composite) file, and should produce something that looks "just like a real book"!

First add some (arbitrary) sensible constraints:

@media print {
	body {font-size:11pt; font-family:Georgia, serif; }

... provide a page break after each major part:

	div.halftitle,
	/* div.titlepage, */
	div.contents {
		/* page-break-before:right; */
		page-break-before:always;
	}
	div.titleverso,
	div.frontmatter,
		div.docinfo,
		div.dedication,
		div.preface,
		div.foreword,
		div.introduction,
		div.acknowledgments,
	div.chapter,
	div.act,
	div.essay,
	div.canto,
	div.backmatter,
		div.afterword,
		div.appendix,
		div.notes,
		div.glossary,
		div.bibliography,
		div.index,
		div.colophon {
			page-break-before:always;
	}
	h3,h4 { page-break-after:avoid; }

... force the imprint to the bottom of the title page (this doesn't always work!):

	div.titlepage p.imprint { margin-top:60%; }

... and finally, fix a few "legacy" problems ...


	div.navigation { display:none; }
	div.titlepage hr { display:none; }
	div.contents hr { display:none; }
	div.docinfo hr { display:none; }
}

We'll also define a required page size (noting that this is not yet implemented by major browsers:

@page {
	size:6in 9in;
	margin:25mm 20mm 20mm 20mm;
}

The complete style sheet

[an error occurred while processing this directive]
[an error occurred while processing this directive]