CSS for Ebooks

Slides from my CSS Summit Presentation on publishing books with HTML and CSS. Resources can be found at http://rachelandrew.co.uk/presentations/css-books

Transcript

1. CSS & Ebooks: Rachel Andrew, CSS Summit 2014
2. CSS and EBooks Rachel Andrew http://rachelandrew.co.uk @rachelandrew
3. Why write books in HTML & CSS?
4. EBooks Formats • EPUB - used by iBooks and other readers • MOBI / KF8 - used by Kindles • PDF - readable everywhere and can also be printed
5. Under the hood ... • EPUB - HTML & CSS • MOBI / KF8 - HTML and CSS • PDF
6. Two of our formats are actually HTML and CSS under the hood.
7. A familiar toolset
8. Write once, output everywhere
9. Automating Builds
10. Using your web knowledge to create books
11. Text formatting
12. Working with paged media
13. The Basics of CSS for Books
14. CSS Paged Media Module http://www.w3.org/TR/css3-page/
15. The @page rule
16. Setting the page size within the @page rule. @page { size: 5.5in 8.5in; }
17. You can use size keywords in addition to specifying page dimensions. @page { size: A4; }
18. Keywords for page orientation - portrait or landscape. @page { size: A4 landscape; }
19. The Page Model
20. Your content goes into the Page Area. The margin is divided into 16 margin boxes and can accept generated content.
21. http://www.w3.org/TR/css3-page/#margin-boxes
22. 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; } }
23. Spread pseudo-classes
24. The :left and :right pseudo-class selectors
25. :left and :right pseudo-class selectors @page :left { margin-left: 3cm; } @page :right { margin-left: 4cm; }
26. The :first pseudo- class selector targets the first page in a printed document. @page :first { }
27. The :blank pseudo-class selector @page :blank { @top-center { content: "This page is intentionally left blank" } }
28. Media Queries
29. Media Queries and paged media. @media print and (width: 21cm) and (height: 29.7cm) { @page { margin: 3cm; } }
30. 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 */ }
31. Numbering things
32. Page Numbering
33. CSS Counters http://www.w3.org/TR/CSS21/generate.html#counters
34. Using a CSS Counter. article { counter-reset: para; } article p:after { counter-increment: para; content: "Paragraph: " counter(para); }
35. The predefined page counter always stores the value of the current page. counter(page);
36. 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); } }
37. The page counter can be reset and incremented. @page { counter-increment: page 2; }
38. The pages counter holds the total number of pages in the document. @page:left{ @bottom-left { content: "Page " counter(page) " of " counter(pages); } }
39. 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) ". "; }
40. 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) ". "; }
41. Setting Strings
42. CSS Generated Content for Paged Media Module http://www.w3.org/TR/css-gcpm-3/
43. 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; } }
44. Page breaks
45. Making h1.title always start a new page. h1.title { page-break-before: always; }
46. Do not break directly after a heading. h1,h2,h3,h4,h5 { page-break-after: avoid; }
47. Avoid breaking inside figures and tables. table, figure { page-break-inside: avoid; }
48. Cross-references
49. 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>
50. 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) ")"; }
51. Using our knowledge in the real world
52. Getting Started
53. Creating an EPUB
54. http://johnmacfarlane.net/pandoc/
55. 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>
56. Run pandoc at the commandline. > pandoc -o builds/book.epub book.html -- epub-metadata=metadata.xml --toc --toc- depth=2
57. • -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
59. --epub-cover-image=cover.png To add a cover image, set it as a parameter when building your book.
60. Including a CSS file. --epub-stylesheet=my-stylesheet.css
62. 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; }
63. 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"/>
64. Page breaks
65. 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; }
66. Use CSS to format the text of your EPUB - with care!
67. Custom fonts can be included in your pandoc build and used just like a font on the web. --epub-embed-font=FILE
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. Ebook Resources http://rachelandrew.co.uk/presentations/css-books
99. Thank you Rachel Andrew @rachelandrew http://rachelandrew.co.uk/presentations/css-books