Use CSS to control the rendering of e-book content.
References/Prerequisites
Summary
Cascading Style Sheets (CSS) control the rendering of HTML files. This page provides advice and recommendations to manage common scenarios in e-books.
General CSS Rules
Four Numbers with Spaces
Four numbers separated by spaces signify top, right, bottom, and left, respectively. (It can be helpful to think of a compass: N, E, S, W.)
This, for example, applies a margin-top of 1em, margin-right of 2em, margin-bottom of 3em, and margin-left of 4em:
{margin: 1em 2em 3em 4em;}
Selectors
Selectors are used in some instances where special spacing is needed. The spacing is applied to the last element in any chain.
In this example, the first line defines the settings for a part title (pt). On its own, it has a margin-top of 2em. If the pt follows a part number (pn), then the margin-top is reduced to 0.25em.
.pt {font-size: 200%; font-weight: bold; margin: 2em 0 0.25em 0; text-align: center; text-indent: 0;}
.pn + .pt {margin-top: 0.25em;}
The elements that remain unchanged, such as the font-size and font-weight numbers, do not need to be repeated.
Refer to W3Schools for additional information on selectors and the various options.
Publisher Logos Followed by Publisher Lines
Use these settings for a bkpub logo image followed by bkpub text:
.bkpub + .bkpub {font-size: 80%; text-align: center; margin-bottom: 0; margin-top: 0; text-indent: 0;}
Checking CSS
Use Jigsaw CSS Validation Service.
Warnings may be expected, but if 0 errors are indicated, the CSS is acceptable.
Casing
The text-transform property can be used to change the capitalization of words. Note that text-transform: uppercase is used to achieve all-caps rendering. Using text-transform: capitalize will capitalize the first letter of words only.
This example shows the use of the “capitalize” property to achieve all-caps rendering for back matter chapter titles:
.ctbm {font-weight: normal; text-transform: uppercase; font-size: 150%; text-align: left; text-indent: 0; margin-top: .25em; margin-bottom: .25em;}
List Style Type
Before 2024, ePubs created with the Digital Hub would have lists with automatic list markers turned off using the style attribute within the e-book HTML: <ol style="list-style-type:none">. In order to accommodate certain industry practices, the Digital Hub no longer includes this in the HTML itself. List elements will appear without the style attribute: <ol>.
To obtain the same effect, Scribe’s default CSS now includes these lines:
{list-style-type: none;}:
ol {list-style-type: none;}
ul {list-style-type: none;}
If Scribe’s default CSS is not used, these lines should be added to the CSS file. Otherwise, the resulting e-book will include duplicate note numbers and bullet points before list items.
Color Contrast
A key component of accessibility is ensuring an adequate color contrast between foreground text and background color. This helps with general readability for all users, but it is especially important for those users with color blindness and other visual limitations. Ace by DAISY will report color contrast violations. Several online tools exist to help choose colors that work well together.
Adjusting Contrast
Go to the Contrast Finder website.
Enter the color being used for a particular style, and set the minimum ratio to 4.5.
The website generates a list of acceptable colors. Choose the one that is closest to the original color.
Color Contrast for Links
Scribe’s default CSS is set to use a color that passes the current requirement for color contrast on links.
a {color: #0066cc; text-decoration: none;}
Note: If a file produced with the WFDW does not pass the checks for color contrast, it is likely that an older CSS was used. Update the file with the current CSS to resolve this issue.
Do Not Embed Fonts
Current industry standards strongly caution against using an embedded font for displaying regular text.
E-reader devices, as well as users’ personal settings, routinely override embedded fonts with their own native font faces, so ultimately this would just introduce possible inconsistencies within the e-book itself. Normally, an embedded font would only be used as a fallback if the native device’s font cannot display a particular character.
Instead of embedding a font, apply serif or sans serif styles wherever appropriate in the CSS to match the print version, which allows for a device to determine the font face appropriately.
.wl {text-align: left;}
.wl {font-family: sans-serif; text-align: left;}