My presentation for ConFoo 2015 on using CSS and HTML to create ebooks.

1. CSS & Ebooks: Rachel Andrew, ConFoo 2015

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

3. 24ways.org/newsletter

4. Why write books in HTML & CSS?

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

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

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

8. A familiar toolset

9. Write once, output everywhere

10. Automating Builds

11. The Basics of CSS for Books

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

13. The @page rule

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

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

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

17. The Page Model

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

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

20. 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;
}
}

21. Spread pseudo-classes

22. The :left and :right pseudo-class
selectors

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

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

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

26. Media Queries

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

28. 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 */
}

29. Numbering things

30. Page Numbering

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

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

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

34. 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 {
content: counter(page);
}
}

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

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

37. 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) ". ";
}

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

39. Setting Strings

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

41. 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);
margin: 30pt 0 10pt 0;
font-size: 8pt;
}
}

42. Page breaks

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

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

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

46. Cross-references

47. 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>

48. 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) ")";
}

49. Using our knowledge in the real
world

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

51. Creating an EPUB

52. http://johnmacfarlane.net/pandoc/

53. 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>

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

55. • -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

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

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

60. Basic formatting
added by pandoc.
body { margin: 5%; text-align:
justify; font-size: medium; }
code { font-family: monospace; }
h1 { text-align: left; }
h2 { text-align: left; }
h3 { text-align: left; }
h4 { text-align: left; }
h5 { text-align: left; }
h6 { 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; }

61. 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"/>

62. Page breaks

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

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

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

67. http://sigil-ebook.com/

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

69. Creating a MOBI

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

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

73. CSS and the Kindle

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

75. 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.”

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

77. Creating a PDF

78. Generating a PDF is more
complicated than you might think.

79. princexml.com

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

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

83. 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

85. Adding page
numbers.
@page:right{
@bottom-right {
margin: 10pt 0 30pt 0;
border-top: .25pt solid #000;
content: counter(page);
font-size: 9pt;
}
}
@page:left {
@bottom-left {
margin: 10pt 0 30pt 0;
border-top: .25pt solid #000;
content: counter(page);
font-size: 9pt;
}
}

87. Using generated
content to add the
book title to each
page.
@bottom-left {
margin: 10pt 0 30pt 0;
border-top: .25pt solid #666;
content: "Productivity Essays";
font-size: 9pt;
color: #333;
}

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

89. 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-after: avoid;
page-break-inside:avoid;
}
h1+p, h2+p, h3+p {
page-break-before: avoid;
}
table, figure {
page-break-inside: avoid;
}

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

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

92. 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>

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

94. 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

96. Resources and further reading

97. 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

98. 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

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

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