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

1. Iris Amelia Febres
ebookcraft
March 10, 2015
#ebookcraft
THE BEAUTY
BEHIND EBOOKS:
CSS

2. #ebookcraft
WHO AM I?

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. #ebookcraft
http://thewithouse.com/wp-content/uploads/2013/11/corgi-3.jpg

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. #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. #ebookcraft
TIERS OF CSS WE’LL REVIEW
• Simple reflowable (Fiction, novels)
• Complex reflowable (Nonfiction, cookbooks)
• Fixed Layout (CSS3 Animation)

8. #ebookcraft
CSS IN 5 SECONDS
p { color: purple; }
selector
property
value

9. #ebookcraft
THINKING OF “EBOOK BEAUTY”
• What makes an ebook beautiful ?
• 2 approaches:
• Beautiful rendering
• Beautiful markup
!
• How do we put them together?

10. #ebookcraft
KEYTHEMES
• Consistency
• Clarity
• Simplicity
Applies to what’s presented to the reader
and what’s under the hood.

11. #ebookcraft
PART ONE:
LET’STALK ABOUT RENDERING

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. #ebookcraft
PART ONE: RENDERING
• Open question: Do we associate this notion of
“ebook beauty” to particular genres?
Cookbooks / Nonfiction / Fiction / Poetry

14. #ebookcraft
RENDERING IS ABOUT HOW
THETEXT PRESENTS ITSELF.
* Word and Image —
everything we read and absorb

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. #ebookcraft
“A GREAT UI IS INVISIBLE.”
—PATRICK COX
http://tympanus.net/codrops/2013/03/21/a-great-ui-is-invisible/

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. #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. #ebookcraft

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. #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. #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. #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. #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. #ebookcraft

26. #ebookcraft

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. #ebookcraft

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. #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. #ebookcraft
https://farm7.staticflickr.com/6022/5910326877_4e1ec3edb9.jpg

32. #ebookcraft
RECAP: RENDERING
• What does this CSS demonstrate?
• Care for the content
• Care for the reader

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. #ebookcraft
WHAT CATCHES YOUR ATTENTION?

35. #ebookcraft
PARTTWO:
LET’STALK ABOUT MARKUP

36. #ebookcraft
SWITCHING GEARS
GOING UNDER THE HOOD

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. #ebookcraft
WHAT DOES BEAUTIFUL MARKUP NEED?
• Semantic
• Efficient
• The Cascade

39. #ebookcraft
BEAUTIFUL MARKUP IS SEMANTIC
• Why semantics are important:
• Standards
• Ethics
• Sanity

40. #ebookcraft
THE BEAUTY OF AN EBOOK
LIES IN HOW A READER
EXPERIENCES IT.

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. #ebookcraft
BEAUTIFUL MARKUP IS EFFICIENT
• Efficient markup does the work for you
• Remember The First Virtue of a Great
Programmer
• Templates
• Maintainability

43. #ebookcraft
BEAUTIFUL MARKUP CASCADES.

44. #ebookcraft

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. #ebookcraft
BUT ATTHE END OFTHE DAY,
YOU NEED GOOD MARKUP.

47. #ebookcraft
RECAP: MARKUP
foundation
finesse

48. #ebookcraft
PART THREE:
WHAT DO WE DO NOW?

49. #ebookcraft
QA, QA, QA
TEST, TEST, TEST
DRINK, DRINK, DRINK

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. #ebookcraft
DEGRISTLINGTHE SAUSAGE 2.0
COURTESY OF INDIA AMOS,AMPLIFY

52. #ebookcraft

53. #ebookcraft
REMEMBER AMAZON (SORRY)
• Media queries for legacy devices etc.

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

55. #ebookcraft
RECAP:WHAT WE DO NOW
• Experiment!
• Document!
• Read your content and engage it.
• Communicate your findings.
• Drink!

56. #ebookcraft

57. #ebookcraft
BREAKTIME!
(WE’LL RETURNTO CSS IN ~15 MINUTES.)

58. #ebookcraft
WELCOME BACK!

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

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. #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. #ebookcraft

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. #ebookcraft
SAMPLE “ANSWER”

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. #ebookcraft
SAMPLE “ANSWER”

67. #ebookcraft

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. #ebookcraft

70. #ebookcraft

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. #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. #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. #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. #ebookcraft