Sausage & Laws; or, Making P+E books with CSS & HTML

72
Sausage & Laws

description

A talk at Books in Browsers 2013, about making print books (& ebooks) with HTML & CSS using PressBooks.

Transcript of Sausage & Laws; or, Making P+E books with CSS & HTML

Page 1: Sausage & Laws; or, Making P+E books with CSS & HTML

Sausage&

Laws

Page 2: Sausage & Laws; or, Making P+E books with CSS & HTML

or...

Page 3: Sausage & Laws; or, Making P+E books with CSS & HTML

In the trenches building print books

& ebooks using

HTML + CSS

Page 4: Sausage & Laws; or, Making P+E books with CSS & HTML

@hughmguire@pressbooks

pressbooks.com

Page 5: Sausage & Laws; or, Making P+E books with CSS & HTML

PressBooks is a:

content management system &

export system

for books.

Page 6: Sausage & Laws; or, Making P+E books with CSS & HTML

Input your book once, we output:

* PDF (typeset) * EPUB (for iBooks, Nook etc)* MOBI (for Kindle)* Web* other XML

Page 7: Sausage & Laws; or, Making P+E books with CSS & HTML
Page 8: Sausage & Laws; or, Making P+E books with CSS & HTML

For every book, customizable template ebook & PDF output:

ibooks kindle print (pdf)

Page 9: Sausage & Laws; or, Making P+E books with CSS & HTML

Some things that I think are really interesting about PressBooks:

Page 10: Sausage & Laws; or, Making P+E books with CSS & HTML

1. All PressBooksbooks have a native web

version, out of the box.

Page 11: Sausage & Laws; or, Making P+E books with CSS & HTML
Page 12: Sausage & Laws; or, Making P+E books with CSS & HTML

(publishers, authors

and readers don’t care)

Page 13: Sausage & Laws; or, Making P+E books with CSS & HTML

2. PressBooks is open source.

Page 14: Sausage & Laws; or, Making P+E books with CSS & HTML
Page 15: Sausage & Laws; or, Making P+E books with CSS & HTML

(publishers, authors

and readers don’t care)

Page 16: Sausage & Laws; or, Making P+E books with CSS & HTML

3. With an online

system like PressBooks it’s easy

to make an API

for books.

Page 17: Sausage & Laws; or, Making P+E books with CSS & HTML
Page 18: Sausage & Laws; or, Making P+E books with CSS & HTML

(publishers, authors

and readers don’t care)

Page 19: Sausage & Laws; or, Making P+E books with CSS & HTML

except...

Page 20: Sausage & Laws; or, Making P+E books with CSS & HTML
Page 21: Sausage & Laws; or, Making P+E books with CSS & HTML

4. PressBooks is a single-source

book production system that producesPDF, EPUB & MOBI...

Page 22: Sausage & Laws; or, Making P+E books with CSS & HTML

!!interesting!!

Page 23: Sausage & Laws; or, Making P+E books with CSS & HTML

publishers, authors want to

hear more!!(readers don’t

care)

Page 24: Sausage & Laws; or, Making P+E books with CSS & HTML

... using HTML + CSS!!

Page 25: Sausage & Laws; or, Making P+E books with CSS & HTML

(publishers, authors

and readers don’t care)

Page 26: Sausage & Laws; or, Making P+E books with CSS & HTML

Conclusion:

Page 27: Sausage & Laws; or, Making P+E books with CSS & HTML

Publishers and authors are interested in ways to:

a) save moneyb) make money

Page 28: Sausage & Laws; or, Making P+E books with CSS & HTML

"If you like laws and sausages, you should never watch either one

being made."

-- (mis)attributed to Otto van Bismarck

Page 29: Sausage & Laws; or, Making P+E books with CSS & HTML

A couple of PDFs built with

CSS + HTML

Page 30: Sausage & Laws; or, Making P+E books with CSS & HTML
Page 31: Sausage & Laws; or, Making P+E books with CSS & HTML
Page 32: Sausage & Laws; or, Making P+E books with CSS & HTML
Page 33: Sausage & Laws; or, Making P+E books with CSS & HTML
Page 34: Sausage & Laws; or, Making P+E books with CSS & HTML
Page 35: Sausage & Laws; or, Making P+E books with CSS & HTML
Page 36: Sausage & Laws; or, Making P+E books with CSS & HTML

Another one...

Page 37: Sausage & Laws; or, Making P+E books with CSS & HTML
Page 38: Sausage & Laws; or, Making P+E books with CSS & HTML
Page 39: Sausage & Laws; or, Making P+E books with CSS & HTML
Page 40: Sausage & Laws; or, Making P+E books with CSS & HTML
Page 41: Sausage & Laws; or, Making P+E books with CSS & HTML

\

Page 42: Sausage & Laws; or, Making P+E books with CSS & HTML
Page 43: Sausage & Laws; or, Making P+E books with CSS & HTML
Page 44: Sausage & Laws; or, Making P+E books with CSS & HTML
Page 45: Sausage & Laws; or, Making P+E books with CSS & HTML
Page 46: Sausage & Laws; or, Making P+E books with CSS & HTML
Page 47: Sausage & Laws; or, Making P+E books with CSS & HTML
Page 48: Sausage & Laws; or, Making P+E books with CSS & HTML
Page 49: Sausage & Laws; or, Making P+E books with CSS & HTML

The Power of Stylesheets&a

CMS

Page 50: Sausage & Laws; or, Making P+E books with CSS & HTML
Page 51: Sausage & Laws; or, Making P+E books with CSS & HTML
Page 52: Sausage & Laws; or, Making P+E books with CSS & HTML
Page 53: Sausage & Laws; or, Making P+E books with CSS & HTML
Page 54: Sausage & Laws; or, Making P+E books with CSS & HTML
Page 55: Sausage & Laws; or, Making P+E books with CSS & HTML
Page 56: Sausage & Laws; or, Making P+E books with CSS & HTML
Page 57: Sausage & Laws; or, Making P+E books with CSS & HTML
Page 58: Sausage & Laws; or, Making P+E books with CSS & HTML
Page 59: Sausage & Laws; or, Making P+E books with CSS & HTML

The Catch.

Page 60: Sausage & Laws; or, Making P+E books with CSS & HTML

CSS doesn’t handle fine-tuned

typography vey well.

Page 61: Sausage & Laws; or, Making P+E books with CSS & HTML

... widows... orphans

... bottom-balancing(!)... bad breaks

... flowing text around strange stuff.

Page 62: Sausage & Laws; or, Making P+E books with CSS & HTML

... widows & orphans can be controlled with:

p { widows: 2; orphans: 2;}

Page 63: Sausage & Laws; or, Making P+E books with CSS & HTML

... but the penalty is bad bottom-balancing:

Page 64: Sausage & Laws; or, Making P+E books with CSS & HTML
Page 65: Sausage & Laws; or, Making P+E books with CSS & HTML
Page 66: Sausage & Laws; or, Making P+E books with CSS & HTML
Page 67: Sausage & Laws; or, Making P+E books with CSS & HTML

.loose { letter-spacing: 0.25px; word-spacing: 0.075em;}

Page 68: Sausage & Laws; or, Making P+E books with CSS & HTML
Page 69: Sausage & Laws; or, Making P+E books with CSS & HTML

.tight { letter-spacing: -0.25px; word-spacing: -0.075em;}

Page 70: Sausage & Laws; or, Making P+E books with CSS & HTML

If the W3C (et al) can figure out how to solve/address bottom-balancing with CSS...

CSS will become an obvious choice for typesetting print/pages.

Page 71: Sausage & Laws; or, Making P+E books with CSS & HTML

It might happen anyway.

Page 72: Sausage & Laws; or, Making P+E books with CSS & HTML

@hughmguire@pressbooks

pressbooks.com