Kindle in Motion: you should pay attention to the boring parts

Jiminy Panoz
Aug 14, 2016 · 5 min read

So Amazon has released yet another format: Kindle in Motion. It’s not been announced with great fanfare nor officially launched yet but I guess they might be waiting for a larger catalogue.

While a lot of people will obviously focus on animations, the beauty of this format is IMHO to be found in “the boring parts”. Those parts are (not so) small details but it does honestly feel like an engineering feat when it comes to eBooks.

Full-bleed at last

When working with publishers, one of the most popular demand you might deal with is the ability to do full-bleed in reflow. Now, you can’t do that for various reasons, mainly because pagination is achieved using CSS 3 columns — in a iframe.

Well, Kindle in Motion can do that. No more forced margins. And this applies to background images too.

Text wraps

Sure, iBooks Author has been doing this since its launch… but only in fixed-layout.

OK, you can now do this with CSS. Bear in mind it’s still an experimental technology which is not supported everywhere though.

So basically, this is possible in some EPUB3 Reading Systems right now using shape-outside BUT there’s a little Kindle twist…

CSS figures

Let’s go back to the image wizardry article I’ve shared in June. It was just a write-up of my experiments with images, especially the “float and flood hack”.

This “float and food hack” allows the “image to float to the next column if it doesn’t fit. But since it is outside the flow (because float), it won’t prevent text from flooding the whitespace it doesn’t fit. Else, it will behave as your typical image.”

Now, it looks — and certainly feels — like Kindle in Motion is allowing elements to “float: top/bottom”. Well… reminds me of the CSS Figures spec. And yes, it obviously reflows with the text it’s anchored to, it’s not positioned absolutely on a predefined page.

Which brings me to…

CSS Regions?

I’ve always been curious to know if the “cssRegions” you can find in the Kindle JS Renderer hinted at vanilla CSS Regions or, more likely, a polyfill of their own.

I still don’t know at this point but their system has all the virtues of the vanilla spec. In other words, it works the same from an outsider’s point of view.

What struck me was some “pages” which were styled differently (inverted text/background). It’s something you can do with CSS regions, as mentionned in the “Image wizardry” article, and I would be interested to know how they achieved that while keeping good performance.

Also, we’re talking about reflowable text there; it’s as if Kindle in Motion was a lightweight InDesign (i.e. threaded frames with smart text reflow). And that’s no small achievement if you think about it for a second.

A word on UX

Those achievements come at a price though…

Not everything is perfect at the moment.

First and foremost, files are huge e.g. 400–600 mb. That was a problem when the first “enhanced magazines for iPad” were launched — and WiFi was a little bit slow — and it’s still a problem today considering Amazon is selling 8Gb tablets. Are those animations videos? And why not canvas or animated SVG? Performance issues?

Secondly, while it’s reflowable text and you keep the vast majority of user settings (typeface, font size, margins, etc.), you can’t pick a reading mode e.g. sepia or night mode. But that’s still a lot better that the RMT format from Apple — i.e. ePub3 output from iBooks Author — , in which you can’t even change font size. And this kinda put iBooks Author to shame actually.

Thirdly, should you disable enhancements, there is no image fallback for animations. There’s some room for improvement there cos’ some would probably want to enjoy illustrations in an old-school-static way. Right now, it’s all or nothing.

Finally, it only works in portrait… and if you’re using your tablet in landscape, you’ll experience the letterbox effect.

On the other hand, the file can be read on any Kindle device, it will just fallback to the “nothing version” on devices which don’t support this new format.

Moreover, it feels like Amazon designers were not willing to fall into the traps of enhanced eBooks:

  1. you can disable enhancements;

Things that probably should be defaults for enhanced books — with a few well-defined exceptions.

Conclusion

You may see animations, I can feel some sort of breakthrough for reflowable eBooks.

I get it. Today, Kindle in Motion is an experiment and all readers won’t necessarily dig it. But it must have taken so many engineering resources to achieve the “boring parts” that I believe full-bleed, text wrap and float:top/bottom will—or at least should—make it in KFX for all eBooks.

It could be super useful for non-fiction for instance. It could solve the “don’t pagebreak between the figure and the caption” issue. And you could probably build on top of it to solve a lot more issues.

Too bad this is not an open-source cos’ it has the potential to change the Reading System and #eprdctn landscape… but we all know it will probably end up as a super secret spec for which you’ll have to install yet another 1Gb uber limited Kindle Creator app relying on a deprecated version of Java—maybe it’s time to launch a Kindle Creative Suite, Amazon?

That being said, it’s quite amazing to witness Kindle going from zero (mobi7) to hero (KFX) so quickly. It was not just about drop caps after all, it was about pushing the reflow boundaries we’ve been dealing with for the last five years. And I do hope this will reignite the competition on the market.

EPUB Reading Systems, your turn.

Jiminy Panoz

Written by

10x Jack of all webs designing ebooks @ chapalpanoz, working on Readium CSS and the ⚡️ ebook framework (http://friendsofepub.github.io/Blitz)