css and-html-for-pub
DESCRIPTION
TRANSCRIPT
#toccon @NellieMcKesson
CSS (and HTML) for Publishers
Nellie McKessoneBook Operations Manager, O’Reilly Media
TOC, Feb 12, 2013
#toccon @NellieMcKesson
75%of all O’Reilly titles
#toccon @NellieMcKesson
Why HTML and CSS?
#toccon @NellieMcKesson
Single-SourcePublishing
#toccon @NellieMcKesson
Print EPUB .mobi Web
#toccon @NellieMcKesson
files(4) =/= $(4)
#toccon @NellieMcKesson
XMLThe old O’Reilly way:
#toccon @NellieMcKesson
XMLEXtensible Markup Language
#toccon @NellieMcKesson
FurnitureXML<table>Coffee</table>
<chair>Eames</chair>
<desk>Writing</desk>
#toccon @NellieMcKesson
DocBook XML<book>
<chapter>
<sidebar>
#toccon @NellieMcKesson
Print EPUB .mobi
XML
XSL
XSL
#toccon @NellieMcKesson
XSLEXtensible Stylesheet Language
#toccon @NellieMcKesson
XSLTEXtensible Stylesheet Language Transformations
#toccon @NellieMcKesson
XSL-FOFormatting Objects
#toccon @NellieMcKesson
XML + XSLT + XSL-FO + PDF Processor
#toccon @NellieMcKesson
XML + XSLT + XSL-FO + PDF Processor
(Antenna House)
#toccon @NellieMcKesson
XML XSL
Magic Box(er, PDF Processor)
PDF!
#toccon @NellieMcKesson
#toccon @NellieMcKesson
XHTMLEXtensible HyperText Markup Language
#toccon @NellieMcKesson
Books Data
#toccon @NellieMcKesson
PrintEPUB .mobiWeb
HTML
#toccon @NellieMcKesson
Paged Media
#toccon @NellieMcKesson
Some BasicsHTML and CSS
#toccon @NellieMcKesson
<html>
<body>
<h1>This is the Page Title</h1>
<p>Here is a plain text paragraph</p>
</body>
</html>
#toccon @NellieMcKesson
<h1></h1>
#toccon @NellieMcKesson
<h1 title="Chapter 1: Hello World"></h1>
#toccon @NellieMcKesson
#toccon @NellieMcKesson
CSSCascading Style Sheets
#toccon @NellieMcKesson
<html>
<body>
<h1>This is the Page Title</h1>
<p style="color:blue;margin-left:20px;">Here is a plain text paragraph</p>
<p style="color:blue;margin-left:20px;" >Another paragraph</p>
<p style="color:blue;margin-left:20px;" >And another paragraph</p>
</body>
</html>
#toccon @NellieMcKesson
p {
color: blue;
margin-left: 20px;
}
#toccon @NellieMcKesson
Class
#toccon @NellieMcKesson
<p class="blue">
p.blue {
color: blue;
}
#toccon @NellieMcKesson
Less Class
#toccon @NellieMcKesson
The DOMDocument Object Model
#toccon @NellieMcKesson
bodychapter
headingparagraphparagraphsidebar
paragraphimage
paragraphchapter
headingimagep
#toccon @NellieMcKesson
<body><section>
<h1><p><p><aside>
<p><img>
<p><section>
<h1><img><p>
#toccon @NellieMcKesson
aside p {
font-style: italic;
}
#toccon @NellieMcKesson
aside + p {
font-style: italic;
}
aside > p {
font-style: italic;
}
#toccon @NellieMcKesson
Selectorsw3schools.com
#toccon @NellieMcKesson
Cascades
#toccon @NellieMcKesson
<body><section>
<h1><p><p><aside>
<p><img>
<p><section>
<h1><img><p>
#toccon @NellieMcKesson
aside p {
font-style: italic;
}
p {
font-style: normal;
}
#toccon @NellieMcKesson
<body><div>
<h2><p><p><div>
<p><img>
<p><div>
<h2><img><p>
<body><section>
<h1><p><p><aside>
<p><img>
<p><section>
<h1><img><p>
<body><div class="chapter">
<h2><p><p><div>
<p class="sidebartext"><img>
<p><div class="chapter">
<h2><img><p>
#toccon @NellieMcKesson
Creativity :)Scalability :(
#toccon @NellieMcKesson
We Cheated
#toccon @NellieMcKesson
== AsciiDoc
This is a text paragraph.
.Here’s a bullet list* Item One* Item Two* Item Three
.Here’s a sidebar++++Sidebar paragraph goes here.++++
#toccon @NellieMcKesson
PDF EPUB .mobi
asc
Web
XML
HTML
#toccon @NellieMcKesson
Dynamic ElementsTable of Contents, Index, Cross Refs
#toccon @NellieMcKesson
Why Even Bother?
#toccon @NellieMcKesson
#toccon @NellieMcKesson
HTML <3
#toccon @NellieMcKesson
Well, there’s EPUB
#toccon @NellieMcKesson
HTMLBookA Spec for HTML-based Books
#toccon @NellieMcKesson
HTMLBook = HTML + CSS
Not a New Language, No Extra Stuff
#toccon @NellieMcKesson
<section class="chapter">
<h1 class="title">
<ol class="toc">
#toccon @NellieMcKesson
Invisible Markup
#toccon @NellieMcKesson
CSS 3 Paged Mediaphew
!
#toccon @NellieMcKesson
The Box Model
#toccon @NellieMcKesson
marginborderpaddingcontent
#toccon @NellieMcKesson
margin
border
padding
content
#toccon @NellieMcKesson
margin
#toccon @NellieMcKesson
Master Pages
#toccon @NellieMcKesson
@page {
size: 6in 9in;
margin: 0.5in 1in .75in 1in;
padding: 0.25in;
}
#toccon @NellieMcKesson
@page {
size: 6in 9in;
margin: 0.5in 1in .75in 1in;
padding: 0.25in;
}
#toccon @NellieMcKesson
:left :right:first
#toccon @NellieMcKesson
@page {
size: 6in 9in;
margin-top: 0.75in;
margin-bottom: 0.75in;
}
@page:right {
margin-right: .5in;
margin-left: 1in;
}
@page:left {
margin-right: 1in;
margin-left: .5in;
}
#toccon @NellieMcKesson
@page {
size: 6in 9in;
margin-top: 0.75in;
margin-bottom: 0.75in;
}
@page:right {
margin-right: .5in;
margin-left: 1in;
}
@page:left {
margin-right: 1in;
margin-left: .5in;
}
@page:right {
size: 6in 9in;
margin-top: 0.75in;
margin-bottom: 0.75in;
margin-right: .5in;
margin-left: 1in;
}
@page:left {
size: 6in 9in;
margin-top: 0.75in;
margin-bottom: 0.75in;
margin-right: 1in;
margin-left: .5in;
}
=
#toccon @NellieMcKesson
@page {
size: 6in 9in;
margin-top: 0.75in;
margin-bottom: 0.75in;
}
@page:right {
margin-right: .5in;
margin-left: 1in;
}
@page:left {
margin-right: 1in;
margin-left: .5in;
}
#toccon @NellieMcKesson
Named Pages
#toccon @NellieMcKesson
@page chaptermaster {
border-bottom: 1pt solid black;
}
section.chapter {
page: chaptermaster;
}
#toccon @NellieMcKesson
@page chaptermaster {
border-bottom: 1pt solid black;
}
@page chaptermaster:first {
border-bottom-width: 0pt;
}
#toccon @NellieMcKesson
Headers & Footers
#toccon @NellieMcKesson
@page chaptermaster {
margin-top: 1in;
margin-right: .5in;
margin-bottom: 1.2in;
margin-left: 1in;
}
#toccon @NellieMcKesson
#toccon @NellieMcKesson
marginborderpaddingcontent
#toccon @NellieMcKesson
margin-top: .5in;
margin-left: 1in;
#toccon @NellieMcKesson
margin-left: 1in;
#toccon @NellieMcKesson
width = 1in
height = ????
#toccon @NellieMcKesson
#toccon @NellieMcKesson
#toccon @NellieMcKesson
content: PUT STUFF HERE;
#toccon @NellieMcKesson
#toccon @NellieMcKesson
@page index:right { @bottom-right { content: "Index"; text-align: right; }}
@page index:left { @bottom-left { content: "Index"; text-align: left; }}
#toccon @NellieMcKesson
#toccon @NellieMcKesson
Strings
#toccon @NellieMcKesson
#toccon @NellieMcKesson
h1 { string-set: Chaptertitle self;}
#toccon @NellieMcKesson
:before :after
#toccon @NellieMcKesson
h1:before { content: "Hello "; }
h1:after { content: ". Goodbye."; }
<h1>World</h1>
“Hello World. Goodbye.”
#toccon @NellieMcKesson
h1 { string-set: Chaptertitle self before;}
#toccon @NellieMcKesson
section.chapter h1.title { string-set: Chaptertitle self before;}
#toccon @NellieMcKesson
@page chaptermaster:left { @bottom-left { content: string(Chaptertitle); }}
#toccon @NellieMcKesson
#toccon @NellieMcKesson
Counters!
#toccon @NellieMcKesson
section.chapter { counter-increment: chapter;}
#toccon @NellieMcKesson
section.chapter { counter-increment: chapter 10;}
#toccon @NellieMcKesson
body { counter-reset: chapter;}
#toccon @NellieMcKesson
body { counter-reset: chapter; counter-reset: appendix;}
#toccon @NellieMcKesson
body { counter-reset: chapter appendix;}
#toccon @NellieMcKesson
body { counter-reset: chapter 9;}
#toccon @NellieMcKesson
content: PUT STUFF HERE;count
ers
#toccon @NellieMcKesson
:before :after
#toccon @NellieMcKesson
Chapter 1: Hello World
#toccon @NellieMcKesson
section.chapter h1.title:before { content: counter(chapter);}
#toccon @NellieMcKesson
1Hello World
ugh
#toccon @NellieMcKesson
section.chapter h1.title:before { content: "Chapter " counter(chapter) ": ";}
#toccon @NellieMcKesson
section.chapter h1.title:before { content: "Chapter " counter(chapter) ": ";}
#toccon @NellieMcKesson
section.chapter h1.title:before { content: "Chapter " counter(chapter) ": ";}
Don’t forget spaces
#toccon @NellieMcKesson
section.chapter h1.title:before { content: "Chapter " counter(chapter) ": ";}
#toccon @NellieMcKesson
section.chapter h1.title:before { content: "Chapter " counter(chapter) ": ";}
#toccon @NellieMcKesson
Chapter 1: Hello World
yay!
#toccon @NellieMcKesson
#toccon @NellieMcKesson
#toccon @NellieMcKesson
section.chapter h1.title:before { content: "Chapter " counter(chapter) ": ";}
section.chapter h1.title { string-set: Chaptertitle self before;}
+
#toccon @NellieMcKesson
#toccon @NellieMcKesson
pagepages
#toccon @NellieMcKesson
section.chapter:first-of-type { counter-reset: page 1;}
#toccon @NellieMcKesson
@page chaptermaster:left { @bottom-left { content: counter(page) string(Chaptertitle); }}
#toccon @NellieMcKesson
@page chaptermaster:left { @bottom-left { content: counter(page)" | "string(Chaptertitle); }}
#toccon @NellieMcKesson
#toccon @NellieMcKesson
content: counter(page, lower-roman);
#toccon @NellieMcKesson
#toccon @NellieMcKesson
Cascades <3
#toccon @NellieMcKesson
PDF x 2
#toccon @NellieMcKesson
@charset "UTF-8";@import "core.css";/* Special stuff for Print PDFs goes here */
@charset "UTF-8";@import "core.css";/* Special stuff for Web PDFs goes here */
#toccon @NellieMcKesson
#toccon @NellieMcKesson
Resolution
#toccon @NellieMcKesson
img {image-resolution: from-image;}
#toccon @NellieMcKesson
CMYK
#toccon @NellieMcKesson
hr {color: device-cmyk(0,0,0,0.3);}
#toccon @NellieMcKesson
hr {color: #B3B3B3;color: device-cmyk(0,0,0,0.3);}
#toccon @NellieMcKesson
Marks & Bleeds
#toccon @NellieMcKesson
#toccon @NellieMcKesson
@page {bleed: 6pt;marks: crop;}
#toccon @NellieMcKesson
@page:index { @right-top { border-right: .5in; margin-right: -.25in;}