the beauty behind ebooks: css - ebookcraft 2015 - iris febres
TRANSCRIPT
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: [email protected] or [email protected]
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