Slide 1

Slide 1 text

CSS & Ebooks: Rachel Andrew, CSS Summit 2014

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Why write books in HTML & CSS?

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

A familiar toolset

Slide 8

Slide 8 text

Write once, output everywhere

Slide 9

Slide 9 text

Automating Builds

Slide 10

Slide 10 text

Using your web knowledge to create books

Slide 11

Slide 11 text

Text formatting

Slide 12

Slide 12 text

Working with paged media

Slide 13

Slide 13 text

The Basics of CSS for Books

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

The @page rule

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

The Page Model

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Spread pseudo-classes

Slide 24

Slide 24 text

The :left and :right pseudo-class selectors

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Media Queries

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Numbering things

Slide 32

Slide 32 text

Page Numbering

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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); } }

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

Setting Strings

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

Page breaks

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

Cross-references

Slide 49

Slide 49 text

An internal link in my document. It has a class of xref and a link to the id applied to my chapter 1 heading. Chapter 1

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

Using our knowledge in the real world

Slide 52

Slide 52 text

Getting Started

Slide 53

Slide 53 text

Creating an EPUB

Slide 54

Slide 54 text

http://johnmacfarlane.net/pandoc/

Slide 55

Slide 55 text

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

The title page is generated from meta tags in the source file. Productivity Essays

Slide 64

Slide 64 text

Page breaks

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

Creating a MOBI

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

CSS and the Kindle

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

Creating a PDF

Slide 78

Slide 78 text

Generating a PDF is more complicated than you might think.

Slide 79

Slide 79 text

princexml.com

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

No content

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

No content

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

No content

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

My table of contents is a separate HTML document.

Productivity Essays

Your email inbox is not your to-do list
GTD and OmniFocus 2 - my productivity workflow a>
How to become good at estimating time

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

No content

Slide 96

Slide 96 text

Resources and further reading

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

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