Le format epub

Décharge de responsabilité : Je raconte, ici, une expérience, je ne suis pas expert dans la conception de ebooks. Je partage tout simplement ce que j’ai appris, il y a peu ,sur le format epub. S’il vous arrive un souci technique ou autre avec des epubs, je n’y suis pour rien, n’hésitez pas à vous documenter davantage sur le sujet si vous souhaitez faire des expérimentations. 😉

Alors que je furetais en quête de didacticiels concernant ma première liseuse, je suis tombé sur un article parlant du format .kepub.epub. Ce format de livre numérique permet d’afficher sur sa liseuse des informations supplémentaires telles que le nombre de pages, l’auteur, des statistiques… C’est un format non-standard utilisé sur les liseuses de la marque Kobo.

De là, par curiosité, je me suis penché sur comment étaient conçus les epubs. J’ai donc fait pour la première fois du reverse engineering.

Reverse engineering, kesako ?

Le reverse engineering, ou retro-ingénierie pour les francophones, consiste à étudier un objet, un produit afin de déterminer comment celui-ci a été construit. Il s’agit souvent de décortiquer ce dernier. L’ingénierie inversée permet non seulement de savoir reconstruire l’objet/produit mais également de comprendre son fonctionnement. Ici, j’ai décomposé plusieurs livres au format epub pour comprendre comment ils étaient conçus et comment les concevoir. Certes, c’est du reverse engineering très très basique mais cela n’en reste pas moins intéressant.

Un exemple de ebook ?

Vous pouvez prendre n’importe quel ebook. Personnellement, j’ai décomposé plusieurs ebooks afin de bien comprendre. Pour cet article, mon exemple est le livre numérique Resilient Web Design que je considère comme une très bonne base pour comprendre la structure d’un epub, celui-ci étant bien structuré.

Step 1 : Compresser et décompresser un ebook

Dans un premier temps, ne connaissant pas trop comment cela était conçu, j’ai utilisé un logiciel appelé ePub Packager. Cette application disponible sur macOS est très intéressante : elle permet de décomposer un epub en un répertoire et, inversement, à partir d’un répertoire donné de créer un epub. Si vous n’avez pas de Mac, pas de panique, à la fin de cet article nous aborderons comment faire sans ce genre de logiciels.

Step 2 : Comprendre la composition d’un ebook

J’ai glissé-déposé l’ebook intitulé « Resilient Web Design » dans ePub Packager et le logiciel m’a généré un répertoire éponyme « ResilientWebDesign ».

Voici la décomposition du répertoire :

ResilientWebDesign/
 ├── META-INF/
 │        ├── com.apple.ibooks.display-options.xml
 │        └── container.xml
 ├── mimetype
 └── OEBPS
 ├── content.opf
 ├── toc.ncx
 ├── Text/
 │        └── chapter-1.xhtml
 │        └── ...
 ├── Styles/
 │        └── style.css
 ├── Images/
 │        └── cover.png
 │        └── ...
 └── Fonts/
 └── AverageMonoBold.otf

Notons qu’il s’agit de la structure d’un ebook version 3 si je ne dis pas de bêtises (oui il existe epub v1, v2 et v3…). La différence est tout simplement que la v3 supporte le HTML5, le CSS3, le langage MathML, les vidéos, les musiques, etc. Somme toute, EPUB3 est plus moderne que EPUB2. Mais la structure n’est pas si différente que cela entre le EPUB2 et EPUB3 : en EPUB3, vous avez besoin d’ajouter une table de matières en xhtml. Nous verrons cela en temps et en heure.

Concrètement, la structure de votre ebook est arbitraire MAIS vous êtes obligé d’avoir un répertoire intitulé META-INF ainsi que le fichier mimetype. Décortiquons et essayons donc de comprendre un peu tout ça.

Le répertoire META-INF

Le fichier com.apple.ibooks.display-options.xml n’est pas obligatoire mais conseillé, il est utilisé par l’application iBooks d’Apple.Ce fichier permet d’indiquer les spécificités du ebook à prendre en compte.

<?xml version="1.0" encoding="UTF-8"?>
<display_options>
    <platform name="*">
         <option name="specified-fonts">true</option>
         <option name="interactive">true</option>
         <option name="fixed-layout">true</option>
         <option name="open-to-spread">true</option>
    </platform>
    <platform name="iphone">
        <option name="orientation-lock">landscape-only</option>
    </platform>
</display_options>

platform-name permet de spécifier la plateforme visée (l’astérisque signifie qu’on vise tous les appareils apple, sinon on spécifie « iphone » ou « ipad »). Vous trouverez facilement sur internet une documentation complète des options et leurs significations (bon ok je vous mâche un peu le travail : voici, par exemple, une petite documentation proposée par Apple).

Si ce fichier n’est pas très important, la présence du fichier container.xml dans le répertoire META-INF est, quant à elle,  obligatoire. Ce document permet d’identifier le type de support et les chemins d’accès aux fichiers racines des publications EPUB incluses dans le conteneur.

<?xml version="1.0" encoding="UTF-8"?>
<container version="1.0" xmlns="urn:oasis:names:tc:opendocument:xmlns:container">
    <rootfiles>
        <rootfile full-path="OEBPS/content.opf" media-type="application/oebps-package+xml"/>
   </rootfiles>
</container>

La balise rootfile indique l’emplacement d’un fichier au format OPF que nous aborderons plus loin. Dans notre cas, le fichier se trouver dans le répertoire OEBPS. Notons également que le type MIME du fichier OPF est obligatoirement spécifié : platform-namemedia-type="application/oebps-package+xml".

mimetype : Ce fichier ne comporte pas d’extension (bien que ce soit du plain text…) et ne comporte qu’une seule ligne : application/epub+zip. Cela indique le type MIME du fichier compressé. En effet, le fichier epub est tout simplement un fichier zip ! Au lieu d’avoir comme extension .zip, il comporte l’extension .epub.

Le répertoire OEBPS

Remarque : Ce répertoire peut s’appeler OPS. La version3 utilise OPS. Mais OEBPS marche aussi. En réalité, les lecteurs epubs ne prennent pas en compte le nom du répertoire, ce qui les intéressent ce sont les fichiers opf, xhtml et ncx que nous allons maintenant détailler.

OPF

Le fichier OPF est le manifeste. Il va indiquer tout ce dont à besoin le lecteur d’epub. Ce serait très long de détailler ce fichier, je vous invite à lire la documentation officielle.

NCX (Navigation Control file for XML)

Ce fichier est moins important depuis la version 3, il s’agit de la table de matières du livre. Avec la version 3, on utilise un fichier au format XHTML (HTML) avec une balise , mais on garde tout de même le fichier ncx.

Exemple, nav.xhtml :

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xml:lang="en">
<head>
  <meta charset="utf-8"/>
  <meta name="generator" content="pandoc"/>
  <title>Resilient Web Design</title>
  <link rel="stylesheet" type="text/css" href="../Styles/styles.css"/>
</head>
<body epub:type="frontmatter" xml:lang="en">
  <nav epub:type="toc" id="toc">
    <h1>Table of Contents</h1>
    <ol>
      <li>
        <a href="../Text/Introduction.xhtml#introduction"><i>Introduction</i></a>
      </li>
      <li>
        <a href="../Text/chapter1.xhtml#chapter-1-foundations">Chapter 1: <span>Foundations</span></a>
      </li>
      <li>
        <a href="../Text/chapter2.xhtml#chapter-2-materials">Chapter 2: <span>Materials</span></a>
      </li>
      <li>
        <a href="../Text/chapter3.xhtml#chapter-3-visions">Chapter 3: <span>Visions</span></a>
      </li>
      <li>
        <a href="../Text/chapter4.xhtml#chapter-4-languages">Chapter 4: <span>Languages</span></a>
      </li>
      <li>
        <a href="../Text/chapter5.xhtml#chapter-5-layers">Chapter 5: <span>Layers</span></a>
      </li>
      <li>
        <a href="../Text/chapter6.xhtml#chapter-6-steps">Chapter 6: <span>Steps</span></a>
      </li>
      <li>
        <a href="../Text/chapter7.xhtml#chapter-7-challenges">Chapter 7: <span>Challenges</span></a>
      </li>
      <li>
        <a href="../Text/About.xhtml#about-the-author">About the author</a>
      </li>
      <li>
        <a href="../Text/Index.xhtml#index"><i>Index</i></a>
      </li>
    </ol>
  </nav>
  <nav class="hidden" epub:type="landmarks" id="landmarks" hidden="">
    <h1>Landmarks</h1>
    <ol>
      <li>
        <a epub:type="cover" href="../Text/cover.xhtml">Cover</a>
      </li>
      <li>
        <a epub:type="titlepage" href="../Text/title_page.xhtml">Title Page</a>
      </li>
      <li>
        <a epub:type="introduction" href="../Text/Introduction.xhtml">Introduction</a>
      </li>
      <li>
        <a epub:type="bodymatter" href="../Text/Introduction.xhtml">Introduction</a>
      </li>
      <li>
        <a epub:type="backmatter" href="../Text/About.xhtml">About the author</a>
      </li>
      <li>
        <a epub:type="index" href="../Text/Index.xhtml">Index</a>
      </li>
    </ol>
  </nav>
</body>
</html>

XHTML, ETC

Le contenu du epub est en fait des pages XHTML ! (ou HTML5 depuis la version 3). Vous pouvez définir le style des pages grâce au feuille de style (CSS) et ajouter des images comme on le fait ordinairement pour un site web. Vous pouvez également ajouter du son mais attention tout lecteur d’ebook ne prend pas forcément en charge la lecture du son.

Step 3 : Créer son propre ebook

Pour créer votre ebook, il vous faut donc des bonnes connaissances dans les langages suivants : HTML, CSS et XML. Il existe également des éditeurs qui vous mâchent le boulot et qui vous permet de ne vous préoccuper que de la partie rédaction du livre. Créer à la main son ebook est un moyen le moins coûteux et simple mais reste fastidieux à réaliser.

Bonus : Compresser et décompresser un ebook avec le terminal de macOS

Compression

zip -rDX9  * -x "*.DS_Store" -x mimetype

Décompression

unzip .epub

Libre à vous d’ajouter en commentaire vos remarques, notifier une erreur, etc.

Publicités

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s