[EPUB] Comment intégrer la couverture ?

Cas général

Ajoutez une image dans la structure de données. Cette image doit idéalement être très grande. J’ai par exemple utilisé les dimensions 1600 px × 2400 px.

Ce fichier doit être référencé dans les métadonnées du content.opf en tant que cover-image, conformément aux spécifications EPUB¹.

Par exemple, voici ce qui est dans le manifest de TNBS#1 :

<metadata xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:opf="http://www.idpf.org/2007/opf">
    <meta name="cover" content="cover"/> <!-- EPUB2 -->
</metadata>
<manifest>
    <item id="cover" href="cover.jpeg" media-type="image/jpeg" properties="cover-image"/> <!-- EPUB3 -->
</manifest>

Le fichier cover.jpeg se trouve à côté du fichier content.opf. Il peut théoriquement être ailleurs, cela dit ; pensez à ajuster l’attribut href en accord avec le chemin désiré.

Kindle

Pour les EPUBs préparés pour Kindle, il n’y a rien à faire de plus. Les couvertures ne doivent pas être incluses en tant que première page, conformément à la documentation :

N’ajoutez pas de page de couverture HTML au contenu, en plus de l’image de couverture. La couverture risquerait d’apparaitre deux fois dans le livre, ou ceci pourrait causer l’échec de la conversion du livre.

https://kdp.amazon.com/fr_FR/help/topic/G6GTK3T3NUHKLEFX

La liseuse ira se servir dans les métadonnées du fichier converti par KDP / Calibre pour retrouver sa couverture.

Autres cas

Pour Kobo, et l’EPUB en général, vous pouvez ajouter une page xhtml de couverture. Elle doit être la première page du livre (c’est une 1^ère de couverture, quoi).

C’est ce qui permet de générer la miniature du livre et l’écran de veille sur les liseuses Kobo. En effet, ces liseuses ne vont pas chercher l’info dans les métadonnées, contrairement aux Kindle.

Cela donne ceci dans TNBS#1 pour Kobo :

<metadata xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:opf="http://www.idpf.org/2007/opf">
    <meta name="cover" content="cover"/>
</metadata>
<manifest>
    <item id="cover" href="cover.jpeg" media-type="image/jpeg" properties="cover-image"/>
    <item id="cover.png_0" href="pollen/epub/assets/cover.png" media-type="image/png"/>
    <item id="cover.jpeg_1" href="pollen/epub/assets/cover.jpeg" media-type="image/jpeg"/>
</manifest>
<spine>
    <itemref idref="couverture.xhtml"/>
    <itemref idref="title.xhtml"/>
    <itemref idref="nav.xhtml"/>
</spine>

Le fichier couverture.xhtml contient uniquement l’image.

Concernant le style à appliquer sur l’image, voici mes recommandations :

• Ne pas définir de dimensions (taille d’image). Ni en pixels, ni en pourcentage, ni dans le HTML, ni dans le CSS. En effet, cela causerait des étirements dans certaines conditions. Et aspect-ratio est mal/non supporté.
• Encapsuler l’image dans un block (au sens CSS), et centrer l’image.

Cela se traduit ainsi (note : j’utilise la balise <picture>², mais rien ne vous oblige à utiliser spécifiquement celle-ci) :

// HTML.
<picture class="image-page">
    <source srcset="../pollen/epub/assets/cover.jpeg" type="image/jpeg"/>
    <img src="../pollen/epub/assets/cover.png" alt=""/>
</picture>

// CSS du conteneur.
.image-page {
    display: block;
    text-align: center;
}

N’oubliez pas de décrire la couverture avec l’attribut alt si quelque chose de pertinent doit être décrit (comme toute image dans l’écosystème web³). Dans mon cas, la couverture contient le même texte (titre, numéro de tome, auteur) que la page qui suit, et est sans illustration intéressante à décrire, donc j’ai préféré laissé vide pour que les utilisateurs de lecteurs d’écran n’aient pas à écouter / lire deux fois la même chose.

Si l’image est plus grande que les dimensions de l’écran de la liseuse, le contenu sera redimensionné en préservant le ratio largeur / hauteur.

L’image sera centrée horizontalement en cas d’espace libre sur les côtés.

D’après mes notes de travail, sur Kobo, l’image de la première page a un traitement spécial qui l’agrandit jusqu’à un des bords, si l’image était plus petite que l’écran. Si jamais c’était faux, ou pour les cas non Kobo, l’image ne sera pas probablement pas agrandie si elle est plus petite que l’écran sur les deux dimensions. Mais ce cas ne devrait pas arriver souvent, car comme dit au tout début de cet article, vous devez utiliser une couverture de très grande taille.

Il s’agit, à mon avis, du meilleur compromis pour avoir une image qui prend toute la taille de l’écran, sans jamais créer d’étirement. Il s’agit également de ma technique pour avoir, dans le corps de texte, des images « plein écran » sur les liseuses (en réalité, elles ne sont pas en plein écran, mais elles prennent beaucoup de place).

Références

1. Spécifications du format EPUB, section cover-image : https://www.w3.org/TR/epub/#cover-image, explications sur daisy.org : https://kb.daisy.org/publishing/docs/epub/cover.html#desc ↩︎
2. Balise <picture> : https://developer.mozilla.org/fr/docs/Web/HTML/Element/picture ↩︎
3. Attribut alt : https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt ↩︎