JayPanoz

Line Height based on the typeface x-height and character width | Golden Ratio edition

CSS snippet

p {
  font-size: 1em;
  line-height: calc(1.618em + (1ex - 1ch));
}

JayPanoz

/*
 * Copyright (c) 2015 Amazon.com. All rights reserved.
   KP 3.21.0
 */
var fa = {
        SUCCESS: 0,
        HTML_LOAD_FAILURE: 1,
        INJECTION_FAILURE: 2,
        JAVASCRIPT_FAILURE: 3,
        INTERNAL_FAILURE: 4,

JayPanoz

/* Inspired by https://medium.freecodecamp.com/the-fab-four-technique-to-create-responsive-emails-without-media-queries-baf11fdfa848#.mg1ra3tvj */

.image-float {
  min-width: 240px;
  width: 40%;
  max-width: 100%;
  page-break-inside: avoid;	
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}

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)

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

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

.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

/*  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

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

/* 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;