CSS for Ebooks

CSS & Ebooks: Rachel Andrew, ConFoo 2015

CSS and EBooks
Rachel Andrew 
http://rachelandrew.co.uk 
 
@rachelandrew

Why write books in HTML & CSS?

EBooks Formats
• EPUB - used by iBooks and other readers
• MOBI / KF8 - used by Kindles
• PDF - readable everywhere and can also be
printed

Under the hood ...
• EPUB - HTML & CSS
• MOBI / KF8 - HTML and CSS
• PDF

Two of our formats are actually
HTML and CSS under the hood.

CSS Paged Media Module
http://www.w3.org/TR/css3-page/

Setting the page
size within the
@page rule.
@page {
size: 5.5in 8.5in;
}

You can use size
keywords in
addition to
specifying page
dimensions.
@page {
size: A4;
}

Keywords for
page orientation -
portrait or
landscape.
@page {
size: A4 landscape;
}

Your content goes into the Page
Area. The margin is divided into
16 margin boxes and can accept
generated content.

http://www.w3.org/TR/css3-page/#margin-boxes

Adding a footer
to a printed
document.
@page:right{
@bottom-left {
margin: 10pt 0 30pt 0;
content: "My Book Title";
font-size: 8pt;
color: #000;
}
}

The :left and :right pseudo-class
selectors

:left and :right
pseudo-class
selectors
@page :left {
margin-left: 3cm;
}
@page :right {
margin-left: 4cm;
}

The :first pseudo-
class selector
targets the first
page in a printed
document.
@page :first {
}

The :blank
pseudo-class
selector
@page :blank {
@top-center { content: "This page
is intentionally left blank" }
}

Media Queries
and paged media.
@media print and (width: 21cm) and
(height: 29.7cm) {
@page {
margin: 3cm;
}
}

Using the amzn-
kf8 keyword
along with size
media queries to
target a specific
device. @media amzn-kf8
and (device-height:1024px)
and (device-width: 758px),
amzn-kf8
and (device-height:758px)
and (device-width: 1024px) {
/* Styles for Paperwhites can go
here */
}

CSS Counters
http://www.w3.org/TR/CSS21/generate.html#counters

Using a CSS
Counter.
article {
counter-reset: para;
}
article p:after {
counter-increment: para;
content: "Paragraph: " counter(para);
}

The predefined
page counter
always stores the
value of the
current page.
counter(page);

Adding the page
count to the
bottom right of
right-hand pages
and bottom left
of left-hand
pages.
@page:right{
@bottom-right {
content: counter(page);
}
}
@page:left{
@bottom-left {
}
}

The page counter
can be reset and
incremented.
@page {
counter-increment: page 2;
}

The pages
counter holds the
total number of
pages in the
document.
@page:left{
@bottom-left {
content: "Page " counter(page) "
of " counter(pages);
}
}

In my case an h1
with a class of
chapter indicates
a new chapter.
body {
counter-reset: chapternum;
}
h1.chapter:before {
counter-increment: chapternum;
content: counter(chapternum) ". ";
}

Counting
chapters and
figures. body {
counter-reset: chapternum figurenum;
}
h1 {
counter-reset: figurenum;
}
h1.title:before {
content: counter(chapternum) ". ";
}
figcaption:before {
counter-increment: figurenum;
content: counter(chapternum) "-"
counter(figurenum) ". ";
}

CSS Generated Content for Paged
Media Module
http://www.w3.org/TR/css-gcpm-3/

Taking the
content of the h1
and using it in
generated
content in the
page header.
h1 {
string-set: doctitle content();
}
@page :right {
@top-right {
content: string(doctitle);
font-size: 8pt;
}
}

Making h1.title
always start a
new page.
h1.title {
page-break-before: always;
}

Do not break
directly after a
heading.
h1,h2,h3,h4,h5 {
page-break-after: avoid;
}

Avoid breaking
inside figures and
tables.
table, figure {
page-break-inside: avoid;
}

An internal link in
my document. It
has a class of
xref and a link to
the id applied to
my chapter 1
heading.
<a class="xref" href="#ch1"
title="Chapter 1">Chapter 1</a>

We use the
target-counter
value to indicate
the page number
that the target
location is on and
output this with
generated
content.
a.xref:after {
content: " (page " target-
counter(attr(href, url), page) ")";
}

Using our knowledge in the real
world

https://github.com/rachelandrew/css-books

http://johnmacfarlane.net/pandoc/

Book metadata.
<dc:title id="t1">Productivity Essays</
dc:title>
<dc:language>en-GB</dc:language>
<dc:creator opf:file-as="Andrew, Rachel"
opf:role="aut">Rachel Andrew</dc:creator>
<dc:publisher>Rachel Andrew</
dc:publisher>
<dc:date
opf:event="publication">2014-07-11</
dc:date>
<dc:rights>Copyright ©2014 by Rachel
Andrew</dc:rights>

Run pandoc at
the commandline.
> pandoc -o builds/book.epub book.html --
epub-metadata=metadata.xml --toc --toc-
depth=2

• -o builds/book.epub = the output file
• book.html = my chapters
• --epub-metadata=metadata.xml = my
metadata file
• --toc --toc-depth=2 = generate a table of
contents two levels deep

--epub-cover-image=cover.png
To add a cover
image, set it as a
parameter when
building your
book.

Including a CSS
file.
--epub-stylesheet=my-stylesheet.css

Basic formatting
added by pandoc.
body { margin: 5%; text-align:
justify; font-size: medium; }
code { font-family: monospace; }
h1 { text-align: left; }
h1.title { }
h2.author { }
h3.date { }
ol.toc { padding: 0; margin-left:
1em; }
ol.toc li { list-style-type: none;
margin: 0; padding: 0; }

The title page is
generated from
meta tags in the
source file.
<title>Productivity Essays</title>
<meta name="author" content="Rachel
Andrew"/>
<meta name="date" content="2014-07-15"/>

Managing page
breaks in an
EPUB.
h1,h2,h3,h4,h5 {
font-weight: bold;
page-break-inside:avoid;
text-align: left;
}
h1+p, h2+p, h3+p {
page-break-before: avoid;
}
table, figure {
}

Use CSS to format the text of your
EPUB - with care!

Custom fonts can
be included in
your pandoc build
and used just like
a font on the
web.
--epub-embed-font=FILE

http://sigil-ebook.com/

Validating EPUB files
http://validator.idpf.org/

The Kindlegen Tool
http://www.amazon.com/gp/feature.html?docId=1000765211

Use an EPUB file
as input for the
kindlegen tool.
> /Applications/KindleGen/kindlegen book.epub

Use a Media
Query to target
Kindles that
support KF8, and
more CSS.
@media amzn-kf8
}

Section 3.1.1 Amazon Publishing Guidelines
“The body text in a reflowable Kindle book (fiction and non-
fiction) must be all defaults. Amazon encourages content
creators to use creative styles for headings, special
paragraphs, footnotes, tables of contents, etc., but not for
body text. The reason for this is that any styling on body text
in the HTML will override the user’s preferred default reading
settings. Users report such behavior as a poor reading
experience.”

Amazon Publishing Guidelines
kindlegen.s3.amazonaws.com/AmazonKindlePublishingGuidelines.pdf

Generating a PDF is more
complicated than you might think.

Creating a PDF
with Prince
> prince book.html -o book.pdf

In a new CSS file
set a page size.
@page {
size: 5.5in 8.5in;
margin: 50pt 60pt 70pt;
}

The -s option is
how you pass in a
CSS file when
building your
book.
> prince -s ebook-styles.css
book.html -o book.pdf

Adding page
numbers.
@page:right{
@bottom-right {
border-top: .25pt solid #000;
font-size: 9pt;
}
}
@page:left {
@bottom-left {
font-size: 9pt;
}
}

Using generated
content to add the
book title to each
page.
@bottom-left {
content: "Productivity Essays";
font-size: 9pt;
color: #333;
}

Using string-set
to put the chapter
title into the top
of the page.
h1 {
string-set: doctitle content();
}
@top-right {
content: string(doctitle);
font-size: 9pt;
color: #333;
}

Using the page-
break-before
property to break
h1 headings to a
new page.
h1 {
page-break-before: always;
}
h1,h2,h3,h4,h5 {
font-weight: bold;
page-break-inside:avoid;
}
h1+p, h2+p, h3+p {
page-break-before: avoid;
}
table, figure {
}

Adding the
chapter number
before each
chapter.
body {
counter-reset: chapternum;
}
h1.chapter:before {
content: counter(chapternum) ".
";
}

Creating cross
references.
a.xref:after {
content: " (page " target-
counter(attr(href, url), page) ")";
}

My table of
contents is a
separate HTML
document.
<h1>Productivity Essays</h1>
<ul class="toc">
<li><a href="book.html#ch1">Your email
inbox is not your to-do list</a></li>
<li><a href="book.html#ch2">GTD and
OmniFocus 2 - my productivity workflow</
a></li>
<li><a href="book.html#ch3">How to become
good at estimating time</a></li>
</ul>

We are using
target-counter as
before and also
setting a leader.
ul.toc a::after {
content: leader('.') target-
counter(attr(href), page);
}

Pass the toc.html
file to Prince to
be added to the
front of the book.
> prince -s pdf-styles.css toc.html
book.html book.pdf

Samples and Demos
Starting point HTML and CSS plus outputs generated from
those starting points can be found on Github.  
 
https://github.com/rachelandrew/css-books

More on CSS for Print & PDF
My Smashing Magazine article, going into more detail on CSS
for print and PDF output.  
 
http://www.smashingmagazine.com/2015/01/07/designing-for-
print-with-css
https://github.com/rachelandrew/css-for-print

Ebook Resources
http://rachelandrew.co.uk/presentations/css-books

Thank you
Rachel Andrew
@rachelandrew
me@rachelandrew.co.uk
http://rachelandrew.co.uk/presentations/css-books

CSS for Ebooks

More Related Content

What's hot (18)

Similar to CSS for Ebooks (20)

More from Rachel Andrew (20)

Recently uploaded (20)

CSS for Ebooks