JayPanoz

<!-- To put in your .opf file in <metadata>. -->
<!-- Don't forget to add prefix="schema: http://schema.org/" in <package> -->

<!-- Accessibility Metadata -->

 <!-- Please get rid of features you don't use in your book -->
    <meta property="schema:accessibilityFeature">alternativeText</meta>
    <meta property="schema:accessibilityFeature">audioDescription</meta>
    <meta property="schema:accessibilityFeature">braille</meta>
    <meta property="schema:accessibilityFeature">captions</meta>

JayPanoz

/*  CSS filters may be used for some modes 
    e.g. sepia in iBooks for instance. 
    Note the eyedropper has been used here,
    which could explain unusual text color 
    for some modes.
    In this case, find the filter value
    for background and you’ll find the
    real value for text + links.
                                            */

JayPanoz

Dimensions for iBooks on iPad

Dimensions (width + height + body’s left and right margins) have been recovered using JavaScript. One is consistent with those listed at Atavist Help, all others are not (wtf? Could someone confirm?).

As a reminder, iBooks sets columns for html, which is the reason why body’s margin-left and -right apply to each column.

• Width is window’s width
• Height is window’s height
• Inner width is body’s width minus margins.

JayPanoz

/* Current nugget */

/* This in your fallback CSS (for ePub 2) */
.portrait-caption {
  height: 99%;                /* must check if necessary */
  margin: 1.5em 0; 
  page-break-before: auto;
}
.portrait-caption > img {
  width: auto;

JayPanoz

Broken in eBooks

I hate being ”that guy” but someone must do the dirty work and list all the basic stuff which eBooks’ Reading Systems break in reflow.

So, here’s the stuff you can’t rely upon… Brace yourself, nightmares are coming!

Important advice: make sure your demos/test-case files span several “pages” and don’t rely neither on the results you get on “document ready” nor on the results which are displayed in the first column, usually at the top of your xhtml file. I’ve checked a certain amount of demos for which those issues didn’t show up because of that. Problem is if you publish a tutorial/article and people don’t double-check by themselves, it may lead to catastrophes.

For your information…

JayPanoz

/*  Testing initial and unset in iBooks
    All those styles are applied.
    Comments in .unset if different value */

/* all : initial */

.initial {
  -webkit-animation-delay: 0s;
  -webkit-animation-direction: normal;
  -webkit-animation-duration: 0s;

JayPanoz

.float-image {
	width: 100%;
	float: left;
	padding: 0;
	display: block;
	text-align: center;
	margin: 0.75em 0;
	margin-top: 1vh;    /* will collapse if float + margin-top because your entire CSS will be ignored by legacy RMSDK if you’re using margin: 1vh 0; */
	margin-bottom: 1vh;
}

JayPanoz

Let’s talk about eBook performance

If you’re not an eBook producer, this article probably won’t interest you. As a matter of fact, even if you are, chances are you’ve already experienced painful performance but it’s not something we’re used to speak about so there’s little interest anyway.

Now, if we take a look at the web, performance is everywhere: good performance is a must since it’s part of the user experience, a 3-second delay may cause a dramatic drop in sales, developers try to hit 60 frames per second and so on and so forth.

How many of us, eBook producers, actually have a precise idea of mobile apps’ or eInk Readers’ performance? Can you list CSS or JS bottlenecks? Do you define rules or best practices based on performance? Do you know how Reading Systems work? Really?

I surely can’t answer those questions in an extensive manner. And you probably can’t either because we lack debug tools. So it’s all about testing on a shitload of devices and feeling what doesn’t work well, taking decisions

JayPanoz

/* As of v.5.1 (iOS)
   FYI, relies on jQuery 1.5.1
   Note to big company involved: 1) there’s no copyright and 2) it’s available with a right click
*/

var KindleRendererAnnotationRenderer = function() {
        function g() {
            var b = {};
            return function(f, a) {
                if (b[f] !== void 0) return b[f];

JayPanoz

/* 	Quick and dirty exploration of Speech Synthesis API
	https://developer.mozilla.org/en/docs/Web/API/SpeechSynthesis
		
	This is some R&D for eBookDys.js
	https://github.com/JayPanoz/eBookDys/tree/js
		
	⚠️ DON'T USE IN PRODUCTION ⚠️
*/

// Start script when document is definitely ready (not interactive)