1. EVERY GOOD EBOOK NEEDS A GOOD EDITOR Demystifying EPUB Structure for Non-Coders © Christen Thomas christen@lpg.ca

2. What should an editor know about ebooks?  QA (Quality Assurance)  Formats  EPUB Structure  Basic coding  Workflow  DRM (Digital Rights Management)

4. Editors know markup!

5. Ebooks use markup too… (we’ll break this down later)

6. Consistency, clarity, & conciseness Editors know all about these three goals. Good code should follow the same rules.

7. CMOS for print = EPUB check for ebooks

8. Editors know content best, & are best suited to check it EPUB coding consists of the book’s content, and applying styles which control what that content looks like. Example: H1 = Heading 1. The name of the heading is the content. The font size and treatment is the style.

9. What does it mean to edit an ebook? Approach the ebook as a reader. Use multiple devices. ie: Are headers or captions appearing isolated from text? ie: Are illustrations rendering correctly or scale with the device?

10. Examples of bad QA

11. Bad UX (User Experience)

12. Common QA errors  Weird f o r m a t t i n g  Missing, duplicated, or incorrect text  Misplaced or unanchored images  Broken links (Table of Contents, endnotes, URLs)  Typohs [sic]  Image quality  Unsupp ☐ rted char ☐ cters

13. EBOOK FORMATS Definitions, description, and support

15. versus format  ePUB: Content priority over design. Reflowable and accessible over many devices.  PDF: Priority in design matching print. Complex content.

16. ePUB: In detail  Reflowable content, across devices  Best for text only with little formatting  Require reader software  User can change font and size  Screen size irrelevant  No page references  Images lower quality, often b&w

17. EPUB has a bit of a poetry problem… BADBETTER

18.  New standard  Supports HTML 5, audio, embedded videos

19. PDFs: in detail  Control design & presentation  Ideal for complex content  Maintains format of print regardless of device  Requires scrolling or a large screen  Good quality of images

20. s http://thebookstudio.files.wordpress.com/2011/04/dbw2011_indesign_to_ebook.pdf

21. Ebooks and Ereaders http://thebookstudio.files.wordpress.com/2011/04/dbw2011_indesign_to_ebook.pdf

22. Mobi  Amazon’s proprietary format  Offer free conversion from ePub for publishers  Don’t offer the Mobi file in return  Small differences in formatting from ePub  Why better to convert to their format yourself?

23. KF8  Used on Kindle Fire (Amazon)  Replaces Mobi  Supports HMTL 5, CSS3 (ePUB 3 features)

24. IBA format  iBooks Author  Proprietary Apple format  Similar to EPUB, cannot be read or edited as an EPUB document

25. Fixed-Layout EPUB (FXL)  Keeps same layout and design as print, can also be enhanced and interactive  Styles and layouts are not reflowable  Amazon, B&N, Kobo, Apple accept them  Mostly kids books

26. Fixed-layout EPUB sample

27. When to use fixed-layout  http://www.bisg.org/publications/product.php?p=28&c=437&utm_medium=email&utm_campaign=BISG+Bulletin+February+2013&utm _content=BISG+Bulletin+February+2013+CID_0678d12b99c1467a9de3f67c21f94b6e&utm_source=Email%20marketing%20softwar e&utm_term=httpwwwbisgorgpublicationsproductphpp28c437  If placement of text, tables, illustrations, is essential to maintain text or story  for titles that must match print-book layout (ex. contractual obligation to replicate printed work)  For children’s books, illustrated textbooks, cookbooks, 2-page- spreads, full-bleed art books

28. Enhanced Ebooks  Video, audio  Can embed PDFs  XHTML tables  Additional internal and external hyperlinks

29. Enhanced ebook sample: eBook Architects

30. EPUB STRUCTURE Looking at its folders and files to demystify

31. EPUB structure overview: EPUB files consist of content & style (chapter files in HTML & CSS file) Additional content in an EPUB: - cover page - copyright page - table of contents EPUB structure files: - mimetype - META-INF and container.xml file - OEBPS and the OPF and NCX

34. Exercise: Unzip/Zip EPUB file Download EPUBZip http://www.mobileread.com/forums/showt hread.php?t=55681 Select a DRM-free EPUB file and then UnZip it. Now you can look at the contents! Open an XHTML file. You can also select your EPUB folder and Zip it: this will create a Zipped EPUB on your Desktop.

35. Exercise: Validate your EPUB file Go to http://validator.idpf.org/http://validator.idpf.org/ Select your EPUB file Try introducing an error into an XHTML file (like removing some of the tags), zip the EPUB and validate. Read errors, fix and try again.

36. HTML & CSS The building blocks of EPUB

37. EPUB = machine / human readable

38. What is HTML?  Markup Language developed for the internet  How text and media are displayed by a browser  Text-only file with tags  EPUB uses HTML to markup ebook text  Like proofreading markup, HTML is notation inserted into text  Tells browser and ereader how the manuscript is interpreted  Lots of resources to find HTML tags!

39. Without HTML Text like this: Chapter 1 Once upon a time, … They lived happily ever after. Displays like this in a browser, without any markup: Chapter 1 Once upon a time, … They lived happily ever after.

40. With a little HTML Add this markup: Chapter 1 Once upon a time, … They lived happily ever after. And it will display like this: Chapter 1 Once upon a time, …. They lived happily ever after.

41. What can HTML describe?  Heading levels  Paragraph breaks  Line breaks  Block quotes  Font sizes  Basic text styles (italic, bold)  Lists  Tables  Links  Images

42. Some basic HTML tags Paragraph bold or strong italics or emphasis To break a line of text use the break tag. Note that it only requires one tag, not an open and close tag.

43. Structure of an HTML file HTML is plain text. Write it in a plain text editor, such as Sublime Text, Notepad, or TextEdit. Microsoft Word imposes hidden markup which will interfere with your HTML file/needs clean up. Text editors default to a.txt file, but you can save it as an.html file or.xhtml file. Wait, WHAT IS THAT?!

44. So what is XHTML? XHTML is used in EPUB. It follows stricter rules. But everything covered so far is true of HTML and XHTML. XHTML has more detailed declarations. Tags are Case Sensitive. All tags are paired with an ending tag. XHTML is not a different language than HTML, think of it as a different accent.

45. HTML: created for browsers A browser can understand this: But that doesn’t look very good, does it? To make it human readable, what to do…?

46. Whitespace Whitespace makes code readable to humans, and easy to edit. Also, indentation helps. Isn’t this better?

47. What are those angled brackets? Define the structure of HTML Components of your book Skeleton of the EPUB’s content Usually, you need a pair of tags: An opening tag and a closing tag with an forward slash

48. your content is here!

49. Nested tags Tags can be "nested" within other tags, like this: (This is referred to "parent" node and "child" nodes)

50. Here’s how it works: is nested between opening and closing tags meaning that is the parent node and is the child node. also happens to be a child node of. is the always the "root" node and has no parent nodes. and are on the same level. They are both child nodes of. How do you show this?

51. Indentation helps Title goes here Content appears!

52. What is CSS? Cascading Style Sheets The difference between content (like text) and presentation (font, text colour and size) “Cascading” means it should reduce redundant styling HTML describes content, not how it looks. CSS gives you control over how this content is displayed.

53. CSS styling not in HTML:  Leading (line height)  Letter-spacing  Paragraph indenting  Control over serif or sans serif  Finely calibrated font size  Margins and padding on elements  Element outlining

54. CSS: Control in one central place  You can set the style once, and have it applied everywhere. You can tweak styles in one place to change the entire document.  This is an efficient workflow! And maintains consistency.

55. EPUB structure takeaways EPUB consists of chapters in xhtml, plus a CSS file One CSS file is used per book, applies styles to all content EPUB links and orders the content, includes a table of contents and book cover, and lets an ereader understand it Homework: As per previous exercises, get your hands on a DRM-free EPUB file. Unzip the EPUB Look at use of CSS and HTML with your new knowledge! Make some coding changes and look at the results.

56. Resources on EPUB  http://w3schools.com: Great tutorial and listing of HTML and CSS tags http://w3schools.com  EPUB Straight to the Point: Industry go-to book about learning EPUB  http://www.jedisaber.com/ebooks/tutorial.asp: Free tutorial on EPUB http://www.jedisaber.com/ebooks/tutorial.asp  http://www.digitalbookworld.com/resources-going- from-indesign-to-ebook/: Resources, tutorials, articles on ebook production http://www.digitalbookworld.com/resources-going- from-indesign-to-ebook/  Ladies Learning Code: HTML & CSS

57. WORKFLOW CONSIDERATIONS Scheduling, conversion, version control, cost

58. Workflow suggestions  know your ebook formats at acquisitions  go from production final files to ebook files to avoid parallel changes  use templates if possible in InDesign  consider tools like InCopy to improve marking up paper and designer input of changes  To “mark up” corrections in an ebook, reference chapter, quote, instead of page #  If a PDF format, mark up as per print

59. http://thebookstudio.files.wordpress.com/2011/04/dbw2011_indesign_to_ebook.pdf

60. Workflow/QA takeaways  Don’t let your readers be your proofreaders, this undermines your product. – Laura Brady @LauraB7  Test on multiple ereading devices, use ePubCheck  Treat the ebook as relatively raw manuscript not printed duplicate of edited book  When you OCR, expect more QA  Balance your conversion house options with time you have to fix mistakes

61. DRM What is DRM, and what does it do?

62. DRM: Digital Rights Management When you are reading ebook, do you feel that DRM: a) Protects the publisher and author from piracy b) Interferes with your reading experience c) You don’t notice it d) Forces you to read/purchase within a closed ecosystem e) You remove the DRM f) Prevents you from owning or sharing the ebook

63. Digital Publishing Resources  eBOUND Canada and BookNet Canada  #eprdctn on Twitter  Mobileread forum  Digital book conferences (Digital Book World, TechForum, eBOUND workshops, BookSummit, and BookCamp – Free!  Bloggers like http://www.baldurbjarnason.com/, Mike Shatzkin http://www.idealog.com/http://www.baldurbjarnason.com/

64. Thank you! christen@lpg.ca @MetaphorceX10