CSS HowTo

A collection of hints and tips for formatting for ePubs using CSS. Because this page is aimed at ePubs, CSS listed here must conform to the official ePub spec for CSS and XHTML.

Overview

This page is not a tutorial on XHTML or CSS. Instead it's a collection of methods to make ePubs look good using standard CSS/XHTML or very simple SVG graphics.

Essentials

HTML wasn't designed to create paged content. But many ebook reading platforms do now display ebooks page-by-page, rather than in a scrolling format like most web pages. Luckily there are ways to generate good looking paged output, most of which depend on the following CSS.

So there's one thing that should always be included in the CSS for an ePub.

 html, body { height: 100%; margin: 0; padding:0; border-width: 0; }

This ensures that the ebook takes up the entire allowed area provided by the reading software, and also (by setting the height attribute) enables some useful formatting tricks (see below).

And then there's an optional item, that is almost always the right thing to have.

 @page { margin: 5pt; }

This ensures that in paged output there's a margin all around the page. Really this ought to be handled by the reading software as a user-settable preference, but since none seem to do this yet, it's best to set a (small) margin. The units to use is a matter for debate. Physical units are used in this example, as the reason for having a margin is to avoid text being hidden by a shadow from any bezel, and this need is independent of the density of the display, or the font size. If you want a margin around your pages, use this CSS, do not set the margin on the body to be non-zero, as a top margin on the body element only affects the first page, and a bottom margin only affects the last page.

HR centered

The following code will center a horizontal line that is 10% of the width of the page. CSS:

 hr.bar10 { width:10%; margin-left:45%; }

HTML:

 <hr class="bar10"/>

Indenting a paragraph

Standard paper books usually indent the paragraph start but they often treat the first paragraph in the chapter differently. Here is how to do that:

 h2 + p {
 text-indent:0;
 }
 p {
 text-indent:2em;
 }

The + sign causes this magic causing only the first paragraph after to header to be affected. The p could also be p.class if needed where class is the defined class in the p tag.

Sometimes you want the opposite where the entire paragraph is indented except the first line.

 .hanging {
 margin-left: 4em;
 text-indent: -4em;
 }

Embedded fonts

If you have embedded fonts that work ok in ADE but not in iBooks then you need to add an entry in the OPF file:

<item href="/META-INF/com.apple.ibooks.display-options.xml" id="caido" media- type="application/xhtml+xml"/>

Embedded Font Drop Caps

Code for iBooks. For this project, I needed a drop cap in the first paragraph after an image used as a paragraph header.

CSS:

 @font-face {
        font-family : "Embedded_font_name";
        font-style : normal;
        font-weight : normal;
        src : url("path/Embedded_font_name.ttf");
 }
/* declares the font name and the file path */

 div.below-header-spacing{
        margin: 0 5% 0;
        padding: 0 1em 0;
        text-indent: 0;
 }
/*adjusted spacing between image headers and the first line of text, set the first line indent to 0 */

 strong{font-family : "Embedded_font_name", sans-serif; font-weight: normal;
                          }
/*iBooks work around to allow embedded font, but normal weight to keep font from being doubled and obscured */

 .dropcap {
        float: left;
        font-size: 2.5em;
        line-height: 1em;
        padding-top: 5px;
        margin-top: 0em;
        margin-right: .09em;
 }

HTML:

<div class="below-header-spacing"><span class="dropcap">
<strong>I</strong></span>t was a Sunday evening in October, and in common with many other young ladies of her class, Katharine Hilbery was pouring out tea. Perhaps a fifth part of her mind was thus occupied, and the remaining parts leapt over the little barrier of day which interposed between Monday morning and this rather subdued moment, and played with the things one does voluntarily and normally in the daylight. </div>

Alternative method available in CSS Template section.

Some font licenses prohibit embedding fonts in ePUB without obfuscation.

CSS Drop Caps for both Reading Engines

This aligns in both reading engines (such as Nook & iBooks), but it may be font specific, so further testing is needed.

p { margin-top: 0; margin-bottom:0; line-height:1.40em; widows:2; orphans:2; text-align:justify; orphans: 2;   -webkit-hyphenate-before:3; hyphenate-before:3; -webkit-hyphenate-after:3; hyphenate-after:3; -webkit-hyphenate-lines:2; hyphenate-lines:2; font-family: Athelas, Dutch, Georgia, TimesNewRomanPSMT, serif; }

p.normal { text-indent:2em; }
p.first { text-indent:0; padding-top:90px; }
p.second { text-indent:0; }

samp { font-family: "Didot-Bold",  Malabar, "Century School Book", "Light Classic", serif; }

span.dropcap { display: inline-block; vertical-align:text-top; font-size: 4.5em; float: left; margin-right: .03em; padding-top: 0.1em; }
span.afterA { margin-left: -0.5em; }
span.afterdrop { margin-left: -0.2em; }

And the corresponding HTML:

<p class="first"><span class="dropcap"><samp>A</samp></span><span class="afterA">riana</span> turned on the nightlight and closed the door to her daughter&rsquo;s room. She walked down the carpeted hall towards the light stretching out from the plastic chandelier over the dining room table. Her husband&rsquo;s chair was empty and she quietly called out his name. No response. As Ariana turned the corner to the kitchen and reached for the knob on the cabinet over the counter, eight hundred pages of advertising crashed into her rib cage, sucking the wind from her lungs. As his wife doubled over, Nazim raised the thick Yellow Book with both hands and hit her on her back, driving her body to the floor.</p>

Warning: Some readers, such as KF8-based Kindle readers, require that the line-height property be set to 1.2em or higher. When working with fonts whose calculated line height is less than 1.2em, you may get wildly varying drop cap height between those readers and other readers. If you see this behavior with your choice of drop cap font, try explicitly setting line-height to 1.2em (or larger) in your drop cap style, then adjust your margins and other values accordingly.

Using <pre>

The pre tag is useful to maintain spacing in text but a line can be too wide the for screen since the author does not know how wide the resultant screen will be. To solve this problem add this to your CSS file.

 pre {white-space: pre-wrap;}

Multi-Column

This may not be supported for all readers. See Column for a different solution.

 .column {
 oeb-column-number: 2;
 }

Fractions

CSS can help with fractions that are to appear on a line. The &frasl; character can also help with the spacing.

CSS Code:

 .num {font-size: 80%; vertical-align:.5ex}
 .den {font-size: 80%;}

HTML Code:

 <span class="num">22</span>/<span class="den">7</span>

Adding a background image

 body {
 background-image: url(../Images/graph.jpg);
 background-repeat: repeat;
 margin: 0 0 0 0;
 }

For more examples

• HTML and CSS examples Thread
• CSS Trick.com - All kinds of CSS tricks, many will not work in ePub.