Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

0 views

Published on

"The beauty behind ebooks: CSS" by Iris Febres (Aptara) for ebookcraft 2015, presented by BookNet Canada and eBOUND Canada - March 10, 2015.

Published in: Education
  • Be the first to comment

The beauty behind ebooks: CSS - ebookcraft 2015 - Iris Febres

  1. 1. Iris Amelia Febres ebookcraft March 10, 2015 #ebookcraft THE BEAUTY BEHIND EBOOKS: CSS
  2. 2. #ebookcraft WHO AM I?
  3. 3. #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
  4. 4. #ebookcraft http://thewithouse.com/wp-content/uploads/2013/11/corgi-3.jpg
  5. 5. #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
  6. 6. #ebookcraft WORKSHOP MATERIALS Download 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)
  7. 7. #ebookcraft TIERS OF CSS WE’LL REVIEW • Simple reflowable (Fiction, novels) • Complex reflowable (Nonfiction, cookbooks) • Fixed Layout (CSS3 Animation)
  8. 8. #ebookcraft CSS IN 5 SECONDS p { color: purple; } selector property value
  9. 9. #ebookcraft THINKING OF “EBOOK BEAUTY” • What makes an ebook beautiful ? • 2 approaches: • Beautiful rendering • Beautiful markup ! • How do we put them together?
  10. 10. #ebookcraft KEYTHEMES • Consistency • Clarity • Simplicity Applies to what’s presented to the reader and what’s under the hood.
  11. 11. #ebookcraft PART ONE: LET’STALK ABOUT RENDERING
  12. 12. #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
  13. 13. #ebookcraft PART ONE: RENDERING • Open question: Do we associate this notion of “ebook beauty” to particular genres? Cookbooks / Nonfiction / Fiction / Poetry
  14. 14. #ebookcraft RENDERING IS ABOUT HOW THETEXT PRESENTS ITSELF. * Word and Image — everything we read and absorb
  15. 15. #ebookcraft COMMON DESIGN ELEMENTS FONTS Text size Hierarchy Line height S p a c i n g Dingbats & flourishes Borders & rules Weight & Color Alignment [Images]
  16. 16. #ebookcraft “A GREAT UI IS INVISIBLE.” —PATRICK COX http://tympanus.net/codrops/2013/03/21/a-great-ui-is-invisible/
  17. 17. #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)
  18. 18. #ebookcraft DOWNTOTHE DETAILS Successful ebooks are all about the details, specifically, the elements the reader doesn’t necessary explicitly acknowledge • Subtle • Warranted for the content
  19. 19. #ebookcraft
  20. 20. #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)
  21. 21. #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
  22. 22. #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
  23. 23. #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
 }
  24. 24. #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)
  25. 25. #ebookcraft
  26. 26. #ebookcraft
  27. 27. #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:;,
  28. 28. #ebookcraft
  29. 29. #ebookcraft RUNNINGTEXT 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 density
 
 CSS: line-height:; / letter-spacing:;
 Value has no unit so that it is proportional to the font size
  30. 30. #ebookcraft RUNNINGTEXT MARGIN & PADDING Why it’s important:
 • Gives your text breathing room
 • Gives you more control of the page
 
 CSS:
 • margin:; — outside
 • padding:; — inside http://www.kuahla.com/learnhtml/images/boxmodel.gif
  31. 31. #ebookcraft https://farm7.staticflickr.com/6022/5910326877_4e1ec3edb9.jpg
  32. 32. #ebookcraft RECAP: RENDERING • What does this CSS demonstrate? • Care for the content • Care for the reader
  33. 33. #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
  34. 34. #ebookcraft WHAT CATCHES YOUR ATTENTION?
  35. 35. #ebookcraft PARTTWO: LET’STALK ABOUT MARKUP
  36. 36. #ebookcraft SWITCHING GEARS GOING UNDER THE HOOD
  37. 37. #ebookcraft BENEATHTHE SURFACE • Successful implementation of CSS depends on the foundation laid in the source HTML. • You can’t style clutter! • You need beautiful markup.
  38. 38. #ebookcraft WHAT DOES BEAUTIFUL MARKUP NEED? • Semantic • Efficient • The Cascade
  39. 39. #ebookcraft BEAUTIFUL MARKUP IS SEMANTIC • Why semantics are important: • Standards • Ethics • Sanity
  40. 40. #ebookcraft THE BEAUTY OF AN EBOOK LIES IN HOW A READER EXPERIENCES IT.
  41. 41. #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?
  42. 42. #ebookcraft BEAUTIFUL MARKUP IS EFFICIENT • Efficient markup does the work for you • Remember The First Virtue of a Great Programmer • Templates • Maintainability
  43. 43. #ebookcraft BEAUTIFUL MARKUP CASCADES.
  44. 44. #ebookcraft
  45. 45. #ebookcraft THE MUST-HAVES OF A CSS DOCUMENT • Organization (emphasis onThe Cascade) • The minimum required (conciseness — exception for templates) • Comments for your reference (information on when it was last edited)
  46. 46. #ebookcraft BUT ATTHE END OFTHE DAY, YOU NEED GOOD MARKUP.
  47. 47. #ebookcraft RECAP: MARKUP foundation finesse
  48. 48. #ebookcraft PART THREE: WHAT DO WE DO NOW?
  49. 49. #ebookcraft QA, QA, QA TEST, TEST, TEST DRINK, DRINK, DRINK
  50. 50. #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
  51. 51. #ebookcraft DEGRISTLINGTHE SAUSAGE 2.0 COURTESY OF INDIA AMOS,AMPLIFY
  52. 52. #ebookcraft
  53. 53. #ebookcraft REMEMBER AMAZON (SORRY) • Media queries for legacy devices etc.
  54. 54. #ebookcraft @media amzn-mobi {
 " background-color:none;
 " page-break-inside:avoid;
 " margin:2em;
 " padding:1em;
 }" hr { " " visibility: visible; " }
  55. 55. #ebookcraft RECAP:WHAT WE DO NOW • Experiment! • Document! • Read your content and engage it. • Communicate your findings. • Drink!
  56. 56. #ebookcraft
  57. 57. #ebookcraft BREAKTIME! (WE’LL RETURNTO CSS IN ~15 MINUTES.)
  58. 58. #ebookcraft WELCOME BACK!
  59. 59. #ebookcraft http://cdn.cutestpaw.com/wp-content/uploads/2012/06/l-Professor-Corgi.jpg
  60. 60. #ebookcraft EXERCISE: CSS CLEANUP Your mission, should you choose to accept it… 1. Take Exercise_CSS-Cleanup.css and reduce its line count. 2. Organize the elements with comments.
  61. 61. #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)
  62. 62. #ebookcraft
  63. 63. #ebookcraft EXERCISE: RUNNINGTEXTT.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.
  64. 64. #ebookcraft SAMPLE “ANSWER”
  65. 65. #ebookcraft EXERCISE: BLOCK PARTY Your 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
  66. 66. #ebookcraft SAMPLE “ANSWER”
  67. 67. #ebookcraft
  68. 68. #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.)
  69. 69. #ebookcraft
  70. 70. #ebookcraft
  71. 71. #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
  72. 72. #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)
  73. 73. #ebookcraft CONTACT ME I 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
  74. 74. #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/
  75. 75. #ebookcraft

×