Jiminy Panoz is a freelancer who has been helping French publishers make the transition to digital for the last five years. In addition to ebook conversion, he has conducted QA audits, managed interactive projects, built custom tools, and designed tailored workflows for his clients. He’s also the creator and maintainer of open-source projects dedicated to ebooks, including the blitz framework. He's also going to be giving a talk at ebookcraft 2017 called Ebooks, Beta Testing, and the Apocalypse.
If you’ve taken a look at the EPUB 3.1 specification, you may have noticed that the W3C’s snapshots for HTML 5 and CSS are becoming the standard for the EPUB spec. As a matter of fact, this is a huge deal!
Indeed, while you may have been using CSS 3 in your ebooks, EPUB 3 has only officially supported a specific EPUB profile based on CSS 2.1 and some CSS 3 modules. In other words, stuff like Flexbox, OpenType Features, and CSS animations weren’t officially part of EPUB. Until now.
Sure, your CSS 3 worked but it wasn’t required to. So what you were doing was actually a progressive enhancement.
What is progressive enhancement?
Wikipedia to the rescue:
"Progressive enhancement uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page, using any browser or Internet connection, while also providing an enhanced version of the page to those with more advanced browser software or greater bandwidth."
To sum up, you design for the lowest common denominator, which is Adobe's Reader Mobile in our case, then improve structure, layout, and interactions for more capable reading systems (i.e., Readium, iBooks, and even Kindle nowadays).
Progressive enhancement allows us to use modern specifications, which solve a lot of problems.
The best road to progress is freedom’s road
Since progressive enhancement emphasizes accessibility, semantic HTML markup, and user preferences, it covers quite a few bases!
If you think about it for a second, CSS is already a kind of progressive enhancement. Consequently, what you can do is organize your styles in layers:
- Lowest common denominator (EPUB 2)
- Modern and better (EPUB 3 and Kindle)
- State of the art (EPUB 3.1)
It’s all about the features supported by the rendering engines, upon which reading systems are built. (For this purpose, Can I Use is an invaluable resource.)
What we can achieve today
Although it's not supposed to, the good news is that EPUB 3 supports a lot of edgy features. If you need proof, take a look at these CSS snippets.
But if you're still not convinced, here are some practical cases that might sound interesting to you:
Flexbox helps you lay out image grids and title pages (vertical align).
OpenType features help you achieve the best reading experience possible, the one we've been refining for centuries. Here come fractions, ligatures, true small capitals, old style or tabular numerals, and much, much more.
The "calc" function, which makes use of mathematical expressions, helps us achieve image wizardry: we can now keep a figure and its caption on the same page and resize the figure when the user changes "font-size."
The "shape-outside" property allows content to wrap around the shape instead of the float’s bounding box.
It’s not just about CSS
JavaScript is a progressive enhancement, too. It might be optional per spec but it can dramatically enhance the user experience in fairly simple ways.
Take non-fiction for instance—wouldn’t it be cool if you could highlight important sentences or ideas? It turns out this isn't that difficult: mark those pieces of content up then load a button (if JavaScript is supported) that will simply change the style of those contents when clicked.
And did you know you could enable text-to-speech from your ebook, using the "speechSynthesis" JavaScript API? It could make the life of dyslexic readers a lot easier. According to the Multicultural Dyslexia Awareness Initiative, dyslexia may now impact no fewer than 20% of people!
And what if a kid could import his or her portrait in to your children's ebook, using the FileReader API, so that he or she becomes the main character? That kid would probably dive head-first into the ebook. (Don’t worry, other photo-less kids would still get the “baseline experience.”)
JavaScript is much more than spectacular interactions and FX; it’s a tool that can be used to empower users.
Progress is made when we strive for more
I’ve had my fair share of conversations in which people retorted that “Kindle and Adobe’s Reader Mobile SDK have to be taken into account, so why bother with all those advanced features?” Please let me remind you the web folks had to fight for standards; they had to push for progress. And their efforts are the reason we can now design ebooks, make them accessible to everyone, and create experiences that were not possible before.
Progress is not Amazon’s — which is not particularly good at accessibility — nor Apple’s, nor Google’s duty; it’s ours. We must stand together and accept this duty, by requesting vendors’ UX analytics be publicly shared, doing progressive enhancement, and pushing for better ebooks, because this is how it should work.
To get more updates from Jiminy, follow him on Twitter, LinkedIn or Medium. And, be sure to register for ebookcraft 2017 to hear more from Jiminy and other fantastic speakers.
