"EPUB vs. WEB: A Cautionary Tale" by Tzviya Siegman & Dave Cramer for ebookcraft 2016, presented by BookNet Canada and eBOUND Canada - March 31, 2016

1. EPUB vs WEB:EPUB vs WEB:
A Cautionary TaleA Cautionary Tale
Tzviya Siegman & Dave CramerTzviya Siegman & Dave Cramer

2. Since the dawn of time…Since the dawn of time…

3. ……people have complainedpeople have complained
about EPUBabout EPUB

5. #eprdctn#eprdctn

6. Duplication (manifest+spine+nav+ncx)Duplication (manifest+spine+nav+ncx)
Crazy XML (container.xml, package.opf)Crazy XML (container.xml, package.opf)
Non-web stuff (triggers, bindings, switch)Non-web stuff (triggers, bindings, switch)
WTF???? (multiple renditions, renditionWTF???? (multiple renditions, rendition
mapping, collections, CFI, the indexing spec)mapping, collections, CFI, the indexing spec)

7. And so people have lookedAnd so people have looked
to a savior:to a savior:

9. Books in BrowsersBooks in Browsers

11. HistoryHistory
• EPUB 3.0 Rec: October, 2011EPUB 3.0 Rec: October, 2011
• W3C eBooks workshop: February 2013W3C eBooks workshop: February 2013
• First EPUB Zero blog post: February 2013First EPUB Zero blog post: February 2013
• First PWP draft: October 2014First PWP draft: October 2014
• EPUB 3.1 kickoff F2F: October 2015EPUB 3.1 kickoff F2F: October 2015
• BFF: 2016BFF: 2016

12. Acme PublishingAcme Publishing
You just know this demo will failYou just know this demo will fail

18. Technology StackTechnology Stack
• HTML for content and accessibilityHTML for content and accessibility
(with some help from ARIA)(with some help from ARIA)
• Service workers for offline readingService workers for offline reading
• JSON-LD to describe publicationsJSON-LD to describe publications
and metadataand metadata
• Javascript and CSS for reading experienceJavascript and CSS for reading experience
• Web application manifest for installabilityWeb application manifest for installability

20. My book onlineMy book online
serverserver
service workerservice worker
next chapter, please!next chapter, please!
c002.htmlc002.html
cachecache
c002.htmlc002.html
oops! offline!oops! offline!

21. Standards StillStandards Still
MatterMatter
The goal is interop, and y’all knowThe goal is interop, and y’all know
how well that’s gone in epub-landhow well that’s gone in epub-land

22. Why Books in Browsers?Why Books in Browsers?
• The full powerThe full power
of the webof the web
• discoverability,discoverability,
rich snippets…rich snippets…
• accessibility withaccessibility with
familiar toolsfamiliar tools
(aka browser)(aka browser)

23. Current ProjectsCurrent Projects
• EPUB 3.1EPUB 3.1
• BFFBFF
• PWPPWP

24. EPUB 3.1EPUB 3.1
• Simpler, closer to webSimpler, closer to web
• HTML without the “X”HTML without the “X”
• Death to the NCX!Death to the NCX!
• MOAR CSSMOAR CSS
• Read the spec and comment!Read the spec and comment!

26. EPUB 3.1 April Draft SpecEPUB 3.1 April Draft Spec
• Changes to spec structure and organization.Changes to spec structure and organization.
77% more readable!77% more readable!
• MetadataMetadata
• Superseded or deprecated itemsSuperseded or deprecated items
• AccessibilityAccessibility
• CSSCSS
• Scripting and External Resources (including RSScripting and External Resources (including RS
object)object)

28. Spec Structure andSpec Structure and
OrganizationOrganization
• You complained, we listened!You complained, we listened!
• Umbrella spec as landing page, point toUmbrella spec as landing page, point to
family of specs with one URL:family of specs with one URL:
idpf.org/epub/31/epub-spec.htmlidpf.org/epub/31/epub-spec.html
• Now includes indexNow includes index
• Nav definition moved from content docs toNav definition moved from content docs to
packagespackages

29. MetadataMetadata
• Allows and encourages external metadataAllows and encourages external metadata
such as ONIXsuch as ONIX
• Deprecate @refines, instead brings backDeprecate @refines, instead brings back
epub2 features like @file-asepub2 features like @file-as
• Moving towards limiting metadata inside theMoving towards limiting metadata inside the
package by recommending that people pointpackage by recommending that people point
to outside resourcesto outside resources
• Method for prioritizing metadata (internal vsMethod for prioritizing metadata (internal vs
external) via HTTP negotiationexternal) via HTTP negotiation

31. GoodbyeGoodbye
• CFI in contentCFI in content
• epub:triggerepub:trigger
• epub:switchepub:switch
• epub:bindingsepub:bindings
• guideguide
• NCX moved from superseded to deprecatedNCX moved from superseded to deprecated

32. Welcome BackWelcome Back
• @file-as@file-as
• @id-type@id-type

33. AccessibilityAccessibility
• Creating an accessibility module/extensionCreating an accessibility module/extension
• Definitely a work in progressDefinitely a work in progress
• Focused on accessibility metadataFocused on accessibility metadata
• AccessMode, AccessModeSufficient, AccessibilitySummary, andAccessMode, AccessModeSufficient, AccessibilitySummary, and
Braille MetadataBraille Metadata
• See https://github.com/daisy/epub-revision-a11y/wiki/ePub-3.1-See https://github.com/daisy/epub-revision-a11y/wiki/ePub-3.1-
Accessibility--Proposal-To-Schema.orgAccessibility--Proposal-To-Schema.org
• Optimized for specific user communitiesOptimized for specific user communities
• WCAG+WCAG+

34. CSSCSS
• No more CSS ProfileNo more CSS Profile
• Closer alignment with broader webCloser alignment with broader web
• Based on 2015 SnapshotBased on 2015 Snapshot
https://drafts.csswg.org/css-2015/https://drafts.csswg.org/css-2015/
• Retains most prefixed properties for CJKRetains most prefixed properties for CJK

35. CSSCSS
は素晴は素晴
らしいですらしいです

36. ScriptingScripting
• navigator.epubReadingSystemnavigator.epubReadingSystem objectobject
• uiVisible (true | false)uiVisible (true | false)

37. External ResourcesExternal Resources
• Scientific Data SetsScientific Data Sets

38. What if EPUB was easier toWhat if EPUB was easier to
use on the web?use on the web?
Let’s make EPUB and the Web Best Friends Forever!Let’s make EPUB and the Web Best Friends Forever!

39. BFFBFF
• explodingexploding
• JSONifyingJSONifying
• arguingarguing

40. Instead of XML, use JSONInstead of XML, use JSON
• Allow an “unzipped” orAllow an “unzipped” or
“exploded” EPUB“exploded” EPUB
• Replace package.opf andReplace package.opf and
container.xml with a singlecontainer.xml with a single
JSON manifest fileJSON manifest file
• No need for META-INF folderNo need for META-INF folder
• Everything else stays theEverything else stays the
samesame

42. JSON in a { "name": "nutshell" }JSON in a { "name": "nutshell" }OBJECT: { }
KEYS and VALUES: { "key": "value" }
MORE THAN ONE KEY:
{
"key0": "value0",
"key1": "value1"
}
ARRAY [ aka ordered list ]:
{
"list": [
{ "key0": "value0" },
{ "key1": “value1" },
{ “key2”: “value2” }
]
}

43. Start with NothingStart with Nothing
{ }{ }

44. Add Metadata ObjectAdd Metadata Object
{
"metadata": { }
}

45. Add Required MetadataAdd Required Metadata
{
"metadata": {
"title": "Moby-Dick",
"language": "en",
"modified": "2016-04-
01T17:00:00Z",
"identifier": "978031600000X"
}
}

46. Add Some FilesAdd Some Files
{
"metadata": {
"title": "Moby-Dick",
"language": "en",
"modified”: "2015-09-29T17:00:00Z",
"identifier”: "978031600000X"
},
"manifest": [
{ "href": "c001.html", "type”: "text/html" },
{ "href": "c002.html", "type": “text/html" },
{ "href": "style.css", "type": "text/css" }
]
}

47. "rendition": [{"rendition": [{
"metadata": {"metadata": {
"layout": "reflowable","layout": "reflowable",
"accessMode": "textual","accessMode": "textual",
"label": "Optimized for smaller screens""label": "Optimized for smaller screens"
},},
"links": [{"links": [{
"href": "reflow/html/section001.xhtml","href": "reflow/html/section001.xhtml",
"type": "application/xhtml+xml""type": "application/xhtml+xml"
}, {}, {
"href": "reflow/html/"href": "reflow/html/section002section002.xhtml",.xhtml",
"type": "application/xhtml+xml""type": "application/xhtml+xml"
}, {}, {
"href": "reflow/html/section003.xhtml","href": "reflow/html/section003.xhtml",
"type": "application/xhtml+xml""type": "application/xhtml+xml"
}],}],
"manifest": {"manifest": {
"links": [{"links": [{
"href": "reflow/css/reflow.css","href": "reflow/css/reflow.css",
"type": "text/css""type": "text/css"
}]}]
}}

48. One small step…One small step…

49. Portable Web PublicationsPortable Web Publications
W3C Digital Publishing Interest GroupW3C Digital Publishing Interest Group

51. ––The PWP White Paper (aka PWPWP)The PWP White Paper (aka PWPWP)
““This document introduces Portable WebThis document introduces Portable Web
Publications, a vision for the future of digitalPublications, a vision for the future of digital
publishing that is based on a fully nativepublishing that is based on a fully native
representation of documents within the Openrepresentation of documents within the Open
Web Platform. Portable Web PublicationsWeb Platform. Portable Web Publications
achieve full convergence between online andachieve full convergence between online and
offline/portable document publishing:offline/portable document publishing:
publishers and users won't need to choose onepublishers and users won't need to choose one
or the other, but can switch between themor the other, but can switch between them
dynamically, at will.”dynamically, at will.”

52. VisionVision
• w3c.github.io/dpub-pwp/w3c.github.io/dpub-pwp/
• link in or out of bookslink in or out of books
• bookmarks/annotationsbookmarks/annotations
• polyfills/plugins with browser toolspolyfills/plugins with browser tools
• use the computing power of your computeruse the computing power of your computer

55. A Call to ActionA Call to Action
Read the damned spec!Read the damned spec!

56. Things you can doThings you can do
• Read the spec! Github, issues, mailing lists…Read the spec! Github, issues, mailing lists…
• Standards orgs… IDPF, W3CStandards orgs… IDPF, W3C
• Community GroupsCommunity Groups
• Bug reporting specs, browsers, readingBug reporting specs, browsers, reading
systems.systems.
• #eprdctn#eprdctn

57. Community GroupsCommunity Groups
• WICG—Web Incubator Community Group. Anyone withWICG—Web Incubator Community Group. Anyone with
a crazy idea gets to make a suggestion.a crazy idea gets to make a suggestion.
• Scholarly HTML—an HTML “vernacular” for theScholarly HTML—an HTML “vernacular” for the
scholarly web, including restrictions on HTML andscholarly web, including restrictions on HTML and
linked datalinked data
• Math on the Web/Stem—A community groupMath on the Web/Stem—A community group
dedicated to uniting all the math hackersdedicated to uniting all the math hackers
• schema.orgschema.org—formal extensions to—formal extensions to schema.orgschema.org. Just. Just
watch the GitHub repo to see SEO unfold before you!watch the GitHub repo to see SEO unfold before you!

59. ResourcesResources
• EPUB 3.1: http://www.idpf.org/epub/31/spec/epub-EPUB 3.1: http://www.idpf.org/epub/31/spec/epub-
spec.html IDPF GitHub repo: https://github.com/idpfspec.html IDPF GitHub repo: https://github.com/idpf
• EPUB 3.1 Revision 3.1 Google DriveEPUB 3.1 Revision 3.1 Google Drive
https://drive.google.com/drive/folders/0B_r69cPgzjHjODJyThttps://drive.google.com/drive/folders/0B_r69cPgzjHjODJyT
jlaeTVrSDQjlaeTVrSDQ
• Portable Web Publications: https://w3c.github.io/dpub-pwp/Portable Web Publications: https://w3c.github.io/dpub-pwp/
• W3C Community Groups: https://www.w3.org/community/W3C Community Groups: https://www.w3.org/community/
• Digital Publishing Interest Group:Digital Publishing Interest Group:
https://www.w3.org/dpub/IG/wiki/Main_Pagehttps://www.w3.org/dpub/IG/wiki/Main_Page
• W3C Public email archives/subscriptions:W3C Public email archives/subscriptions:
https://www.w3.org/community/https://www.w3.org/community/
• IDPFmemes:IDPFmemes: http://idpfmemes.tumblr.com/http://idpfmemes.tumblr.com/

60. Thanks!Thanks!
Tzviya SiegmanTzviya Siegman
WileyWiley
@TzviyaSiegman@TzviyaSiegman
Dave CramerDave Cramer
HachetteHachette
@dauwhe@dauwhe

61. Please Grant us Asylum!Please Grant us Asylum!
Make Canada Great AgainMake Canada Great Again

62. <section doc-role="appendix"><section doc-role="appendix">

64. Hire Iris and India!Hire Iris and India!
They’re the best!They’re the best!
@epubpupil @indiamos@epubpupil @indiamos

66. EPUB ZeroEPUB Zero
The idea that won’t die, and can’t liveThe idea that won’t die, and can’t live

67. What? Why? How?What? Why? How?
• What? Making ebooks with only existingWhat? Making ebooks with only existing
HTML/CSS/JSHTML/CSS/JS
• Why? To learn, to play, to try out ideas.Why? To learn, to play, to try out ideas.
• How?How?

68. Layer PWPPWP EPUBEPUB WebWeb
user interaction javascript
fragment identifiers unknown epub CFI #id
archive unknown container specification no standard
renditions / collections unknown
container.xml + new
package(s)
n/a
user interface browser + JS?
reading system
browser + JS?
offline manifest + SW manifest + SW
design CSS
additional a11y
semantics aria roles
content sequence link relations package > spine link relations
navigation nav nav nav (optional)
content HTML + SVG + MathML + images
PWP vs EPUB vs Web