Skip to content

Instantly share code, notes, and snippets.

View JayPanoz's full-sized avatar

Jiminy Panoz JayPanoz

49 followers · 0 following
View GitHub Profile
@JayPanoz
JayPanoz / eBookPerf.md
Last active August 30, 2016 15:47
Article meant to be published on Medium, feedbacks and inputs appreciated

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
JayPanoz / iBooks-iPad-dimensions.md
Last active September 23, 2016 14:42
Dimensions for iBooks on iPad

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
JayPanoz / content.css
Last active October 9, 2016 08:11
Example of iBooks Author ePub3 CSS export
/* Spoiler: undocumented -iBooks- prefixed props in there! */
/* For tab-stops and tab-interval, please refer to https://www.w3.org/People/howcome/t/970224HTMLERB-CSS/WD-tabs-970117.html */
@font-face{
font-family: "Adelle-Bold";
font-weight: bold;
font-style: normal;
font-stretch: normal;
src: url("../Fonts/2001.otf");
}
@JayPanoz
JayPanoz / tts.js
Last active October 23, 2016 12:42
Quick and dirty exploration of Speech Synthesis API (just don’t use it AS-IS, thanks!)
/* 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
JayPanoz / LineHeightFromTheTypefaceOut-GoldenRatioEdition.md
Last active June 15, 2017 18:18
Which line-height do you get when sizing based on font-size, x-height and character width

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
JayPanoz / defaultUserStylesheet.js
Last active June 21, 2017 15:20
Dauwhe’s magical mystery Reading System
/* Dauwhe’s magical mystery Reading System
A quick and dirty proto to implement https://twitter.com/dauwhe/status/877533923567390721
This is the future of ebooks’ default stylesheet
#TrollingIsMyFuel
*/
r(function() {
var style = document.createElement("style");
style.id = "ImSorryDaveImAfraidICanDoThat";
@JayPanoz
JayPanoz / equationEnvironment.xml
Created August 16, 2017 12:34
XML file for MathML you can find in iBooks Author’s EPUB 3
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>fonts</key>
<dict>
<key>STIX</key>
<dict>
<key>charMap</key>
<dict>
@JayPanoz
JayPanoz / Dynamic-leading.html
Last active September 3, 2017 14:48
A quick and dirty web app to get the optimal value for leading
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css" id="styles">
html, body {margin: 0; padding: 0;}
.main {
box-sizing: border-box;
display: flex;
@JayPanoz
JayPanoz / ReadiumCSS-UserProps.md
Last active September 6, 2017 08:48
Readium CSS User Agent Properties

There is a proposal for user agent properties. To sum things up, browsers would expose user settings so that you can use them in your CSS.

For instance:

body {
  font-size: const(user-font-size);
  font-family: const(user-font-family);
  /* And so on and so forth… */
}
@JayPanoz
JayPanoz / book.css
Created April 5, 2018 14:26
JS and CSS files Pages iOS outputs when exporting to EPUB3
/* unvisited link */
a:link {
color: initial;
}
/* visited link */
a:visited {
color: initial;
}