Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS for Ebooks

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

Rachel Andrew

July 16, 2014
Tweet

More Decks by Rachel Andrew

Other Decks in Technology

Transcript

  1. EBooks Formats • EPUB - used by iBooks and other

    readers • MOBI / KF8 - used by Kindles • PDF - readable everywhere and can also be printed
  2. Under the hood ... • EPUB - HTML & CSS

    • MOBI / KF8 - HTML and CSS • PDF
  3. Your content goes into the Page Area. The margin is

    divided into 16 margin boxes and can accept generated content.
  4. 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; } }
  5. Media Queries and paged media. @media print and (width: 21cm)

    and (height: 29.7cm) { @page { margin: 3cm; } }
  6. 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 */ }
  7. Using a CSS Counter. article { counter-reset: para; } article

    p:after { counter-increment: para; content: "Paragraph: " counter(para); }
  8. 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); } }
  9. The pages counter holds the total number of pages in

    the document. @page:left{ @bottom-left { content: "Page " counter(page) " of " counter(pages); } }
  10. 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) ". "; }
  11. 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) ". "; }
  12. 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; } }
  13. 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>
  14. 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) ")"; }
  15. 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>
  16. Run pandoc at the commandline. > pandoc -o builds/book.epub book.html

    -- epub-metadata=metadata.xml --toc --toc- depth=2
  17. • -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
  18. 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; }
  19. 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"/>
  20. 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; }
  21. Custom fonts can be included in your pandoc build and

    used just like a font on the web. --epub-embed-font=FILE
  22. Use an EPUB file as input for the kindlegen tool.

    > /Applications/KindleGen/kindlegen book.epub
  23. 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.”
  24. In a new CSS file set a page size. @page

    { size: 5.5in 8.5in; margin: 50pt 60pt 70pt; }
  25. 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
  26. 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; } }
  27. 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; }
  28. 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; }
  29. 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; }
  30. Adding the chapter number before each chapter. body { counter-reset:

    chapternum; } h1.chapter:before { counter-increment: chapternum; content: counter(chapternum) ". "; }
  31. 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>
  32. We are using target-counter as before and also setting a

    leader. ul.toc a::after { content: leader('.') target- counter(attr(href), page); }
  33. 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
  34. 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