RETEX : code dans un epub kobo + xhtml

Ici, une liste synthétique des choses à faire et ne pas faire en HTML + JS dans une kobo1.
Les epub doivent avoir la double extension kepub.epub pour autoriser le js dans un epub.

Kobo’s eInk and Desktop platforms have limited support for JavaScript, and do not support interactive JavaScript elements.

Le viewer de page de la kobo est un peu limité et les pratiques d'es6 sont en partie bannies. Il faut donc se souvenir de comment on écrivait du code avant 2016-7 (es6 - ecmascript 2015). On prend vite des automatismes.

Si vous ne respectez pas les différentes reco, ça ne fonctionne pas, tout simplement.
Comme on a pas accès à une console, le débuguage se fait avec 

document.querySelector("#debug").innerHTML += "commentaire"; /*pour un epub3*/ 
document.getElementById("#debug").innerHTML = "commentaire"; /*pour un epub2*/

TODO

<script type="text/javascript">
    //<![CDATA[
    ...
    //]]>
</script>
<!-- (For styles, it is different) -->
<style type="text/css">
    /*<![CDATA[*/
        ...
    /*]]>*/
</style>
try{ /*code à tester*/ }
catch(error) { /* gestion de l'erreur `error` */ }
var uneFois = setInterval(function() {
    //code
    clearInterval(uneFois);
}, 1000);
<link rel="stylesheet" type="text/css" href="../Styles/feuilledestyle.css"/>

NE FONCTIONNE PAS c'est un élément interactif, et ça ne fonctionne pas sur Kobo eInk.

Des pressions sur le contenu du livre (sur des éléments autres que des liens) sont transmises aux applications de lecture Kobo afin de déclencher des menus et d'autres interactions du système de lecture. Pour éviter que vos éléments interactifs déclenchent des fonctionnalités de système de lecture non liées, les fichiers JavaScript doivent contenir des écouteurs d'événements pour les événements click et touchend (ou touchstart), et les deux fonctions d'écoute doivent appeler preventDefault() à la fois sur les événements click et touchend (ou touchstart, si vous préférez). Toute logique interactive devra être implémentée dans le gestionnaire tactile (touchEvent), plutôt que dans le gestionnaire de clic (clickEvent), comme dans l'exemple ci-dessous: 

exampleElement.addEventListener('click', handleClick, false);
exampleElement.addEventListener('touchend', handleTouch, false);

function handleClick(event) {
    event.preventDefault();
}

function handleTouch(event) {
    exampleElement.style.background="red";
    event.preventDefault();
}

Font size can be set in the CSS using the unit type em, px, pt or % rem (ok), mm(ok) However, % has been known to trigger bugs on Desktop and eInk that can restrict users' ability to change the font size or to reset the font size at the start of each chapter. Kobo advises that content creators set a base font size in px or pt (or not set a base size at all, to allow each platform to use its default font size) then increase or decrease the font size for specific classes using em units.

TTF, OTF, and WOFF (v. 1.0) fonts are supported by all Kobo platforms.

Pas de Woff2

Kobo reading platforms support the core image types outlined in the W3C spec. This includes JPG, PNG and Scalable Vector Graphics (SVG). PNG files are preferred over JPG. All images should use the RGB color model, and not CMYK. Encapsulated PostScript (EPS) images are not supported on Kobo. The advised maximum size for all image types is 5 MB. EPUBs with larger images are still accepted and those images will not cause Kobo apps and devices to crash. However, EPUBs with images all under this limit perform optimally across platforms. Image dimensions should be set in percentages instead of pixels in the CSS for reflowable content. Images with dimensions set by pixels may stretch depending on the orientation, device and user settings. Kobo reading platforms insert max-width and max-height CSS for images and videos to ensures that they are not split over multiple screens. Images should not have transparent backgrounds. This will result in the reading system inserting a default background color or pattern. Fixed Layout titles with where image backgrounds are transparent will fail QA in cases where the content is unreadable. For a full screen image view on the Android and iOS platforms, users can long press images in reflowable ePubs. Once in full-screen view, users will be able to pinch and zoom. This can also be achieved on eInk devices (running version 3.14 or later) by double tapping images.

Je rappelle juste qu'une liseuse dispose d'un écran 16 niveaux de gris, donc on peut sans problème réduire le nombre de couleurs des images en n&b et tramer les images.

If the reading experience of a book requires that the embedded font be used, consider adding a note to the front matter. Instruct the user to select the “Publisher Default” font option

<span id="fn0005fn" epub:type="footnote">Text linking to footnote or endnote.</span>
var toto = () => {
  document.querySelector("main").style.height = "50%";
}
toto();

Avec ou sans argument , mais il faut garder les parenthèses.

A page break will occur whenever the reading system encounters a new html file. Creating a new file is the best way to establish page breaks across all Kobo apps. Support for other page-break methods is not consistent.

Page-breaking CSS is only partially supported across Kobo's reading platforms. Support for page-breaking CSS is limited at this time becasue pagination isn't implemented in a way that supports its use across all of Kobo's reading platforms. Work is underway to add support for all platforms in future releases. Current support across all platforms is as follows: Pas de support sur eInk

Les Outils

Sigil : https://sigil-ebook.com/sigil/ (free)

Epub Checker : https://pagina.gmbh/startseite/leistungen/publishing-softwareloesungen/epub-checker/ (free)

  1. les spéc. epub kobo  ↩