the beauty behind ebooks: css - ebookcraft 2015 - iris febres

Iris Amelia Febres ebookcraft March 10, 2015 #ebookcraft

THE BEAUTY BEHIND EBOOKS: CSS

#ebookcraft

WHO AM I?

#ebookcraft

A BIO IN 5 MINUTES• Live near Boston, Massachusetts after

foolishly transplanting from Miami

• M.A. in Writing & Publishing from Emerson College (2012 — Go Lions!)

• Worked on ebooks at O’Reilly & F+W Media

• Currently Director, Solutions Architecture at Aptara

• Teach ebook production at Emerson College’s graduate program

• Dabble in doodles & comics, love corgis

#ebookcraft

http://thewithouse.com/wp-content/uploads/2013/11/corgi-3.jpg

#ebookcraft

WORKSHOP STRUCTURE• 2.5 hours* of CSS goodness

• Half “lecture,” half lab • Three parts

• Open questions for discussion • Reviewing samples, etc.

• Simple exercises

• *15-minute break in-between

#ebookcraft

WORKSHOP MATERIALSDownload the following materials for this workshop at

irisamelia.com/ebookcraft2015 ebookcraft_exercises.zip

Tools: • EPUBcheck (e.g., EPUB-Checker/Pagina) • Zip/Unzip scripts for EPUBs • iBooks/ADE/iPad (use Dropbox)

#ebookcraft

TIERS OF CSS WE’LL REVIEW

• Simple reflowable (Fiction, novels)

• Complex reflowable (Nonfiction, cookbooks)

• Fixed Layout (CSS3 Animation)

#ebookcraft

CSS IN 5 SECONDS

p { color: purple; }

selector

property

value

#ebookcraft

THINKING OF “EBOOK BEAUTY”

• What makes an ebook beautiful ? • 2 approaches:

• Beautiful rendering • Beautiful markup

!

• How do we put them together?

#ebookcraft

KEY THEMES

• Consistency

• Clarity

• Simplicity

Applies to what’s presented to the reader and what’s under the hood.

#ebookcraft

PART ONE: LET’S TALK ABOUT RENDERING

#ebookcraft

PART ONE: RENDERING

• Open question: What immediately comes to mind when I mention “beautiful/lovely/gorgeous rendering”?

• We think of aesthetic • Design • How it looks

#ebookcraft

PART ONE: RENDERING

• Open question: Do we associate this notion of “ebook beauty” to particular genres?

Cookbooks / Nonfiction / Fiction / Poetry

#ebookcraft

RENDERING IS ABOUT HOW THE TEXT PRESENTS ITSELF.

* Word and Image — everything we read and absorb

#ebookcraft

COMMON DESIGN ELEMENTS

FONTS

Text size

Hierarchy

Line height S p a c i n g

Dingbats & flourishes

Borders & rules

Weight & Color

Alignment

[Images]

#ebookcraft

“A GREAT UI IS INVISIBLE.” —PATRICK COX

http://tympanus.net/codrops/2013/03/21/a-great-ui-is-invisible/

#ebookcraft

WHAT DOES AN EBOOK’S “UI” DO?

• Establishes a tone for your ebook (branding)

• Establishes relationships with and within the content (hierarchy)

• Establishes a connection to the user (reader)

#ebookcraft

DOWN TO THE DETAILS

Successful ebooks are all about the details, specifically, the elements the reader doesn’t necessary explicitly acknowledge

• Subtle • Warranted for the content

#ebookcraft

#ebookcraft

RESOLVE WITH REFLOWABLE

• We do not have page-by-page design available (yet) to us, so flexibility is key

• Reflowability comes with a double-edged sword

• However, we should take advantage of robust rendering engines (i.e., iBooks)

#ebookcraft

OPPORTUNITIES FOR DETAILS TYPICAL EXAMPLES

• Dropcaps and initial lines

• Chapter headers with dingbats

• Journal entries or other passages with embedded fonts

• Line spacing for running text

• Margins & padding for running text

#ebookcraft

DROPCAPS & INITIAL LINES

Why it’s important • Opportunity for print fidelity (are you happy now, editors!?)• Attention to detail

CSS: • float:;, line-height:;, font-variant:; http://www.magazinedesigning.com/wp-content/uploads/2013/07/drop-caps-initials-2.png

#ebookcraft

span.dropcap { float: left; /** Allows for the reflow **/ font-size: x-large; line-height: 1; padding-right: .10em; }

h1 + p:first-letter { float:left; font-size:2.7em; line-height:0.8em; margin-bottom:-0.1em }

#ebookcraft

CHAPTER HEADERS

Why it’s important: • A chance for pizzazz • Additional emphasis on the hierarchy• “Low-cost” supplement

CSS: • font-size:;• text-align:;• color :;• border (top and bottom)

#ebookcraft

#ebookcraft

#ebookcraft

PASSAGES/TEXT BLOCKS (E.G., JOURNAL ENTRIES)

Why it’s important • Distinguishes running text from segmented text• Opportunity for enhancing the narrative (and UX) with fonts etc.

CSS: • block (<div>/<section>) to block off the letter itself• text-indent:; for paragraphs• margin/padding:; for spacing relative to the running text• line-height:;,

#ebookcraft

#ebookcraft

RUNNING TEXT LINE HEIGHT & WORD SPACING

Why it’s important: • Controls space between lines of text, space between letters (respectively)• Gives your text breathing room • Makes your text more legible — but also allows for greater densityCSS: line-height:; / letter-spacing:; Value has no unit so that it is proportional to the font size

#ebookcraft

RUNNING TEXT MARGIN & PADDING

Why it’s important: • Gives your text breathing room• Gives you more control of the pageCSS: • margin:; — outside• padding:; — inside

http://www.kuahla.com/learnhtml/images/boxmodel.gif

#ebookcraft

https://farm7.staticflickr.com/6022/5910326877_4e1ec3edb9.jpg

#ebookcraft

RECAP: RENDERING

• What does this CSS demonstrate?

• Care for the content • Care for the reader

#ebookcraft

RECAP: RENDERING

• Attention, thought, and execution brings readers back to an ebook — or, arguably, its provider (cough you great developer you)

• It makes the book memorable, beyond the content itself

#ebookcraft

WHAT CATCHES YOUR ATTENTION?

#ebookcraft

PART TWO: LET’S TALK ABOUT MARKUP

#ebookcraft

SWITCHING GEARS GOING UNDER THE HOOD

#ebookcraft

BENEATH THE SURFACE

• Successful implementation of CSS depends on the foundation laid in the source HTML.

• You can’t style clutter!

• You need beautiful markup.

#ebookcraft

WHAT DOES BEAUTIFUL MARKUP NEED?

• Semantic

• Efficient

• The Cascade

#ebookcraft

BEAUTIFUL MARKUP IS SEMANTIC

• Why semantics are important: • Standards • Ethics • Sanity

#ebookcraft

THE BEAUTY OF AN EBOOK LIES IN HOW A READER

EXPERIENCES IT.

#ebookcraft

BEAUTIFUL MARKUP IS SEMANTIC

• Thoughtful breaking up of the content

• Thinking of function for complex books • Scenario to consider : Slow page turns

• Open question: When should semantics be put on the back-burner? Should it ever?

#ebookcraft

BEAUTIFUL MARKUP IS EFFICIENT

• Efficient markup does the work for you • Remember The First Virtue of a Great

Programmer

• Templates

• Maintainability

#ebookcraft

BEAUTIFUL MARKUP CASCADES.

#ebookcraft

#ebookcraft

THE MUST-HAVES OF A CSS DOCUMENT

• Organization (emphasis on The Cascade)

• The minimum required (conciseness — exception for templates)

• Comments for your reference (information on when it was last edited)

#ebookcraft

BUT AT THE END OF THE DAY, YOU NEED GOOD MARKUP.

#ebookcraft

RECAP: MARKUP

foundation

finesse

#ebookcraft

PART THREE: WHAT DO WE DO NOW?

#ebookcraft

QA, QA, QA TEST, TEST, TEST

DRINK, DRINK, DRINK

#ebookcraft

QA METHODS• Commenting out CSS rules for testing

(/** Comment here **/)

• Platform checks

• Deleting and re-adding EPUBs to iBooks (desktop); curséd caching

• Rely on Dreamweaver (Live/Design) sparingly

#ebookcraft

DEGRISTLING THE SAUSAGE 2.0 COURTESY OF INDIA AMOS, AMPLIFY

#ebookcraft

#ebookcraft

REMEMBER AMAZON (SORRY)

• Media queries for legacy devices etc.

#ebookcraft

@media amzn-mobi { " background-color:none;" page-break-inside:avoid;" margin:2em;" padding:1em;}"hr { "" visibility: visible; "}

#ebookcraft

RECAP: WHAT WE DO NOW• Experiment!

• Document!

• Read your content and engage it.

• Communicate your findings.

• Drink!

#ebookcraft

#ebookcraft

BREAK TIME! (WE’LL RETURN TO CSS IN ~15 MINUTES.)

#ebookcraft

WELCOME BACK!

#ebookcrafthttp://cdn.cutestpaw.com/wp-content/uploads/2012/06/l-Professor-Corgi.jpg

#ebookcraft

EXERCISE: CSS CLEANUPYour mission, should you choose to accept it…

1. Take Exercise_CSS-Cleanup.css and reduce its line count.

2. Organize the elements with comments.

#ebookcraft

SAMPLE “ANSWER”

• There are many approaches to this (can be combined) • More content-driven (paragraphs, chapters,

sections, etc) • More semantics-driven (purely by the element)

• Generally: @font-face{}/@page{} at the top (global)

#ebookcraft

#ebookcraft

EXERCISE: RUNNING TEXT T.L.C.

Your mission, should you choose to accept it…

1. Navigate to CSS_Exercises-1.xhtml within CSS_Exercises.epub within a text editor.

2. Give the text some breathing room with new CSS. Identify elements that need to be offset in some way via alignment or other means.

#ebookcraft

SAMPLE “ANSWER”

#ebookcraft

EXERCISE: BLOCK PARTYYour mission, should you choose to accept it…

1. Navigate to CSS_Exercises-2.xhtml within CSS_Exercises.epub within a text editor.

2. There are a number of elements here that need to be styled. Make sure you utilize the following rules (be playful!):

• border (radius, color, width, etc)"• background-image"

• margin & padding

#ebookcraft

SAMPLE “ANSWER”

#ebookcraft

#ebookcraft

EXERCISE: JUXTAPOSITION

Your mission, should you choose to accept it…

1. Navigate to CSS_Exercises-3.xhtml within CSS_Exercises.epub within a text editor.

2. Who doesn’t love Edgar Allan Poe? The answer: Children!

3. Your EPUB has the complete story of The Cask of Amontillado. Use your CSS skills to create a version of this Poe favorite like a children’s book.

4. (Yes, I’m a little insane.)

#ebookcraft

#ebookcraft

#ebookcraft

RESOURCES• #eprdctn

• Standard CSS for EPUB Files: MobileReads

• Font Places: fontsquirrel.com, dafont.com (stick to OTF/WOFF)

• CSS Reference: Tympanus.net

• CSS-Tricks.com

#ebookcraft

TAKEAWAYS• Exercise_CSS-Cleanup_ANSWERS.css

• CSS_Exercises_ANSWERS.epub

• ebookcraft_CSSplay.epub

• SampleAnimation.epub & CSS3_Sample.epub (Do not distribute please!)

• CSS Cheat Sheet (PDF; forthcoming)

#ebookcraft

CONTACT MEI love making new friends & colleagues. Please reach out!

Twitter : @epubpupil

Email: iris.febres@aptaracorp.com or iris_febres@emerson.edu

LinkedIn: linkedin.com/in/irisamelia

#ebookcraft

REFERENCES• Judging a Book by Its CSS (Iris Febres)

http://www.booknetcanada.ca/blog/2015/2/12/judging-a-book-by-its-css.html#.VPe4YGTF-RI

• Degristling the Sausage, BBEdit 11 Edition (India Amos) http://ink.indiamos.com/2015/02/12/degristling-the-sausage-bbedit-11-edition/

• Fun with Line Height! (Chris Coyer) https://css-tricks.com/fun-line-height/

• A Great UI is Invisible (Patrick Cox) http://tympanus.net/codrops/2013/03/21/a-great-ui-is-invisible/

• Mozilla Developer Network https://developer.mozilla.org/

#ebookcraft