Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
CSS & Ebooks: Rachel Andrew, ConFoo 2015
CSS and EBooks
Rachel Andrew

http://rachelandrew.co.uk



@rachelandrew
24ways.org/newsletter
Why write books in HTML & CSS?
EBooks Formats
• EPUB - used by iBooks and other readers
• MOBI / KF8 - used by Kindles
• PDF - readable everywhere and ca...
Under the hood ...
• EPUB - HTML & CSS
• MOBI / KF8 - HTML and CSS
• PDF
Two of our formats are actually
HTML and CSS under the hood.
A familiar toolset
Write once, output everywhere
Automating Builds
The Basics of CSS for Books
CSS Paged Media Module
http://www.w3.org/TR/css3-page/
The @page rule
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;
}
The Page Model
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-s...
Spread pseudo-classes
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
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:...
Numbering things
Page Numbering
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: " co...
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-rig...
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(pag...
In my case an h1
with a class of
chapter indicates
a new chapter.
body {
counter-reset: chapternum;
}
h1.chapter:before {
...
Counting
chapters and
figures. body {
counter-reset: chapternum figurenum;
}
h1 {
counter-reset: figurenum;
}
h1.title:bef...
Setting Strings
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 breaks
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;
}
Cross-references
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="xr...
We use the
target-counter
value to indicate
the page number
that the target
location is on and
output this with
generated
...
Using our knowledge in the real
world
https://github.com/rachelandrew/css-books
Creating an EPUB
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=...
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
• --to...
--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: monospa...
The title page is
generated from
meta tags in the
source file.
<title>Productivity Essays</title>
<meta name="author" cont...
Page breaks
Managing page
breaks in an
EPUB.
h1,h2,h3,h4,h5 {
font-weight: bold;
page-break-after: avoid;
page-break-inside:avoid;
tex...
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/
Creating a MOBI
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
CSS and the Kindle
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 a...
Amazon Publishing Guidelines
kindlegen.s3.amazonaws.com/AmazonKindlePublishingGuidelines.pdf
Creating a PDF
Generating a PDF is more
complicated than you might think.
princexml.com
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 {
margin: 10pt 0 30pt 0;
border-top: .25pt solid #000;
content: counter(pa...
Using generated
content to add the
book title to each
page.
@bottom-left {
margin: 10pt 0 30pt 0;
border-top: .25pt solid ...
Using string-set
to put the chapter
title into the top
of the page.
h1 {
string-set: doctitle content();
}
@top-right {
co...
Using the page-
break-before
property to break
h1 headings to a
new page.
h1 {
page-break-before: always;
}
h1,h2,h3,h4,h5...
Adding the
chapter number
before each
chapter.
body {
counter-reset: chapternum;
}
h1.chapter:before {
counter-increment: ...
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...
We are using
target-counter as
before and also
setting a leader.
ul.toc a::after {
content: leader('.') target-
counter(at...
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....
Resources and further reading
Samples and Demos
Starting point HTML and CSS plus outputs generated from
those starting points can be found on Github. 

...
More on CSS for Print & PDF
My Smashing Magazine article, going into more detail on CSS
for print and PDF output. 



http...
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
CSS for Ebooks
CSS for Ebooks
CSS for Ebooks
CSS for Ebooks
CSS for Ebooks
CSS for Ebooks
CSS for Ebooks
Upcoming SlideShare
Loading in …5
×

CSS for Ebooks

3,564 views

Published on

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

Published in: Technology

CSS for Ebooks

  1. 1. CSS & Ebooks: Rachel Andrew, ConFoo 2015
  2. 2. CSS and EBooks Rachel Andrew
 http://rachelandrew.co.uk
 
 @rachelandrew
  3. 3. 24ways.org/newsletter
  4. 4. Why write books in HTML & CSS?
  5. 5. EBooks Formats • EPUB - used by iBooks and other readers • MOBI / KF8 - used by Kindles • PDF - readable everywhere and can also be printed
  6. 6. Under the hood ... • EPUB - HTML & CSS • MOBI / KF8 - HTML and CSS • PDF
  7. 7. Two of our formats are actually HTML and CSS under the hood.
  8. 8. A familiar toolset
  9. 9. Write once, output everywhere
  10. 10. Automating Builds
  11. 11. The Basics of CSS for Books
  12. 12. CSS Paged Media Module http://www.w3.org/TR/css3-page/
  13. 13. The @page rule
  14. 14. Setting the page size within the @page rule. @page { size: 5.5in 8.5in; }
  15. 15. You can use size keywords in addition to specifying page dimensions. @page { size: A4; }
  16. 16. Keywords for page orientation - portrait or landscape. @page { size: A4 landscape; }
  17. 17. The Page Model
  18. 18. Your content goes into the Page Area. The margin is divided into 16 margin boxes and can accept generated content.
  19. 19. http://www.w3.org/TR/css3-page/#margin-boxes
  20. 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. 21. Spread pseudo-classes
  22. 22. The :left and :right pseudo-class selectors
  23. 23. :left and :right pseudo-class selectors @page :left { margin-left: 3cm; } @page :right { margin-left: 4cm; }
  24. 24. The :first pseudo- class selector targets the first page in a printed document. @page :first { }
  25. 25. The :blank pseudo-class selector @page :blank { @top-center { content: "This page is intentionally left blank" } }
  26. 26. Media Queries
  27. 27. Media Queries and paged media. @media print and (width: 21cm) and (height: 29.7cm) { @page { margin: 3cm; } }
  28. 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. 29. Numbering things
  30. 30. Page Numbering
  31. 31. CSS Counters http://www.w3.org/TR/CSS21/generate.html#counters
  32. 32. Using a CSS Counter. article { counter-reset: para; } article p:after { counter-increment: para; content: "Paragraph: " counter(para); }
  33. 33. The predefined page counter always stores the value of the current page. counter(page);
  34. 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. 35. The page counter can be reset and incremented. @page { counter-increment: page 2; }
  36. 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. 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. 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. 39. Setting Strings
  40. 40. CSS Generated Content for Paged Media Module http://www.w3.org/TR/css-gcpm-3/
  41. 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. 42. Page breaks
  43. 43. Making h1.title always start a new page. h1.title { page-break-before: always; }
  44. 44. Do not break directly after a heading. h1,h2,h3,h4,h5 { page-break-after: avoid; }
  45. 45. Avoid breaking inside figures and tables. table, figure { page-break-inside: avoid; }
  46. 46. Cross-references
  47. 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. 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. 49. Using our knowledge in the real world
  50. 50. https://github.com/rachelandrew/css-books
  51. 51. Creating an EPUB
  52. 52. http://johnmacfarlane.net/pandoc/
  53. 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. 54. Run pandoc at the commandline. > pandoc -o builds/book.epub book.html -- epub-metadata=metadata.xml --toc --toc- depth=2
  55. 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
  56. 56. --epub-cover-image=cover.png To add a cover image, set it as a parameter when building your book.
  57. 57. Including a CSS file. --epub-stylesheet=my-stylesheet.css
  58. 58. 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; }
  59. 59. 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"/>
  60. 60. Page breaks
  61. 61. 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; }
  62. 62. Use CSS to format the text of your EPUB - with care!
  63. 63. Custom fonts can be included in your pandoc build and used just like a font on the web. --epub-embed-font=FILE
  64. 64. http://sigil-ebook.com/
  65. 65. Validating EPUB files http://validator.idpf.org/
  66. 66. Creating a MOBI
  67. 67. The Kindlegen Tool http://www.amazon.com/gp/feature.html?docId=1000765211
  68. 68. Use an EPUB file as input for the kindlegen tool. > /Applications/KindleGen/kindlegen book.epub
  69. 69. CSS and the Kindle
  70. 70. Use a Media Query to target Kindles that support KF8, and more CSS. @media amzn-kf8 }
  71. 71. 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.”
  72. 72. Amazon Publishing Guidelines kindlegen.s3.amazonaws.com/AmazonKindlePublishingGuidelines.pdf
  73. 73. Creating a PDF
  74. 74. Generating a PDF is more complicated than you might think.
  75. 75. princexml.com
  76. 76. Creating a PDF with Prince > prince book.html -o book.pdf
  77. 77. In a new CSS file set a page size. @page { size: 5.5in 8.5in; margin: 50pt 60pt 70pt; }
  78. 78. 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
  79. 79. 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; } }
  80. 80. 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; }
  81. 81. 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; }
  82. 82. 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; }
  83. 83. Adding the chapter number before each chapter. body { counter-reset: chapternum; } h1.chapter:before { counter-increment: chapternum; content: counter(chapternum) ". "; }
  84. 84. Creating cross references. a.xref:after { content: " (page " target- counter(attr(href, url), page) ")"; }
  85. 85. 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>
  86. 86. We are using target-counter as before and also setting a leader. ul.toc a::after { content: leader('.') target- counter(attr(href), page); }
  87. 87. 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
  88. 88. Resources and further reading
  89. 89. 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
  90. 90. 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
  91. 91. Ebook Resources http://rachelandrew.co.uk/presentations/css-books
  92. 92. Thank you Rachel Andrew @rachelandrew me@rachelandrew.co.uk http://rachelandrew.co.uk/presentations/css-books

×