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 */
}
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) ". ";
}
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;
}
}
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) ")";
}
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
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"/>
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.”
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) ".
";
}
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
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