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 each will use only some of the classes provided.
This explanation assumes that you have at least a passing familiarity with Cascading Style Sheets (CSS) and the CSS2 specification.
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 light background, to achieve good 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, we’ll style our content (body) appropriately: black text on (off‑)white background, readable font2, and a sensible width (measure), centered in the window:
body {
background-color:#fcfff6;
color:#000;
font-family:Georgia, serif;
margin:auto;
max-width:33em;
padding:3em;
}
And then we reduce the glare of the unused parts of the window by giving them a gray background — or a subtle gray image:
html {
background:#fdfdfd url("widgets/endpaper.jpg") fixed;
}
This mimics the basic print “standard”, and works for all recent browsers, but we have a few more “tricks” which set our collection apart.
By default, paragraph text is justified3, meaning the horizontal spacing of text is altered to align the ends of lines to the right margin; the leading (spacing between lines) is increased; and the spacing between paragraphs is subtle but distinct4:
p {
line-height:150%; /* leading */
margin:0 auto .2em; /* para. spacing */
text-align:justify;
text-indent:0;
}
Finally, we distinguish the start of a new paragraph by indenting the first line of each:
p+p { text-indent:2em; }
The p+p of the second line ensures that only the second and subsequent lines of each section are indented. The first line is not indented.
2 I originally avoided specifying a specific font, reasoning that the user should be allowed to set their own preferred font through their browser — until I realised that many users had left their browser set on the default of Times New Roman!
3 Opinion varies on whether justification helps or hinders readability, but look at any print edition and that’s what you will see. Somehow, having a neat right margin to the text adds visual harmony to a work.
4 The usual browser default is to add a blank line (a 1em margin) between paragraphs, but this is too much, and creates a mental "break" in the flow.
Some things which are really just “house” style — the editor’s choice. As with the paragraph element, headings, links and so on all have browser defaults, which may not be what we want. So it is essential to define our own styles for all elements at the outset, in order that we don't get any unfortunate surprises in formatting.
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 headings, h5 for sub-headings, and h6 for paragraph or minor heads.
h1,h2,h3,h4,h5,h6 {
margin:1em auto;
text-align:center;
}
h1,h2,h3,h4 {
font-weight:bold;
}
h5, h6 {
font-weight:normal;
}
h3,h4,h5 {
font-variant:small-caps;
}
h6 { font-style:italic; }
h5 em { font-variant:normal; }
h1 { font-size:2em; }
h2 { font-size:1.4em; }
h3 { font-size:1.3em; }
h4 { font-size:1.2em; }
h5, h6 {font-size:1em; }
Exceptions can be made to these defaults in specific circumstances, for example in the table of contents.
The standard style for links — blue, underlined — is intrusive and distracting. To make them less distracting, I change the colour to standard black, and replace the default underline with a subtle (gray) dotted line:
a, a:link, a:visited {
color:#000;
border-bottom:1px dotted gray;
text-decoration:none;
}
a:active, a:hover {
color:red;
}
In our style sheet, we define a number of classes to be used with the div element 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 them from the next. (This applies only to screen presentation; when printed, they are separated by a page break.)
@media screen {
.titlepage {
margin-top:1em;
margin-bottom:1em;
}
.halftitle,
.titleverso,
.frontmatter,
.dedication,
.contents,
.foreword,
.preface,
.prologue,
.introduction,
.acknowledgments,
.frontispiece,
.plate,
.body,
.volume,
.book,
.part,
.chapter,
.act,
.essay,
.story,
.canto,
.page,
.backmatter,
.afterword,
.postscript,
.epilogue,
.appendix,
.notes,
.glossary,
.bibliography,
.index,
.colophon {
padding-bottom:1em;
margin:1em auto;
}
}
Minor sections are separated with extra spacing — equivalent to three blank lines.
.section { margin-bottom:3em; }
Obviously, not all of these classes are used in every text.
Note that divisions such as “book” and “volume” are artefacts of printing and therefore as a general rule have no relevance to web books. Words such as “book”, “volume” and “part” may however appear as part of structural headings, and therefore may be used 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. More descriptive classes would be valuable to anyone who wished to convert the text to some other format such as TEI for textual analysis.
Some of these divisions have additional attributes:
The first page of the book, the Title Page is "special", and therefore has some special styling.
Everything on the titlepage is centered and bold.
.titlepage {
text-align:center;
font-weight:bold;
}
.titlepage p {
text-align:center;
line-height:140%;
}
The headings have precise uses: h1 = title; h2 = author; h3 = sub-title; h4 = other.
.titlepage h1 { margin-top:2em; margin-bottom:0em; }
.titlepage h2 { margin-top:2em; margin-bottom:0em; }
.titlepage h3 { margin-top:2em; margin-bottom:0em; }
.titlepage h4 { margin-top:2em; margin-bottom:0em; }
.titlepage p { margin-top:2em; margin-bottom:0em; }
.titlepage hr { display:none; }
Our imprint is italic . . .
.titlepage p.imprint {
text-align:center;
font-style:italic;
}
The title-verso (back of the title page) section is where we put all the publication details. This is all gray and centered:
.titleverso {
color:#666;
font-family:Verdana, sans-serif;
font-size:.8em;
margin:auto;
text-align:center!important;
width:90%;
}
.titleverso p {
margin-bottom:1em;
text-align:center!important;
text-indent:0;
}
.titleverso p a {
color:#666; text-decoration:none;
}
.titleverso p a:visited {
color:#666; text-decoration:none;
}
.titleverso p a:hover {
color:#f00; text-decoration:underline;
}
In printing, the colophon was a statement about the publication and printing of the work, placed at the very end of the book, or more recently on the title verso. Having found a number of works where the end of the book was actually missing, it seemed to me valuable to include a colophon at the end, rather than a simple The End, which seems appropriate only to fiction.
So I include a standard colophon as the last division in every book, to mark the end of the book. The colophon looks like this:
This web edition published by:
eBooks@Adelaide
The University of Adelaide Library
University of Adelaide
South Australia 5005
and is styled like this:
.colophon p {
color:#666;
font-family:Verdana, sans-serif; font-size:.9em;
margin:1em auto;
text-align:center!important; text-indent:0;
}
That takes care of the basics. In the the following chapters, I’ll describe some of the special cases I’ve provided for.
https://ebooks.adelaide.edu.au/about/part2.2.html
Last updated Tuesday, January 26, 2016 at 23:27