Si vous avez déjà écrit une page web, vous savez déjà presque tout écrire un EPUB. Le texte d'un livre numérique n'est pas du HTML libre : c'est du XHTML 1.1 (EPUB 2) ou du HTML5 sérialisé en XML (EPUB 3), c'est-à-dire du HTML rigoureux, qui respecte la grammaire XML — balises fermées, attributs entre guillemets, encodage déclaré.
Les content documents XHTML
Chaque chapitre est un fichier XHTML autonome. Tout ce qui est interdit en XML est interdit ici : balises non fermées, attributs sans valeur, entités HTML non XML. Les outils de création (Sigil, Calibre) nettoient automatiquement ; à la main, il faut savoir exactement ce qu'on écrit.
OEBPS/text/chapitre-01.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="fr"
lang="fr">
<head>
<meta charset="UTF-8"/>
<title>Chapitre premier</title>
<link rel="stylesheet" href="../styles/main.css"/>
</head>
<body>
<section epub:type="chapter" role="doc-chapter">
<h1>Chapitre premier</h1>
<p>Longtemps, je me suis couché de bonne heure…</p>
</section>
</body>
</html>
L'attribut epub:type
EPUB définit son propre vocabulaire sémantique, proche du Digital Publishing ARIA. Il donne au lecteur une compréhension fine de la nature de chaque section.
| Valeur | Signification |
|---|---|
cover | Page de couverture |
titlepage | Page de titre |
frontmatter | Avant-propos, dédicace, préface |
bodymatter | Corps principal du livre |
backmatter | Annexes, index, bibliographie |
chapter | Chapitre |
part | Partie (regroupement de chapitres) |
footnote | Note de bas de page |
endnote | Note en fin d'ouvrage |
toc | Table des matières |
landmarks | Points de repère accessibles |
pagebreak | Saut de page imprimée |
glossary | Glossaire |
bibliography | Bibliographie |
CSS : la typographie du livre
EPUB 2 s'appuie sur un sous-ensemble de CSS 2.1. EPUB 3 ouvre la porte à CSS3 (flexbox, grid limité, media queries, variables CSS, pseudo-éléments). Les lecteurs restent conservateurs : on évite les animations, les transformations 3D, les position: fixed en reflowable.
Le CSS d'un livre ne se rédige pas comme celui d'un site. Trois différences fondamentales :
- La taille de police est choisie par le lecteur : ne JAMAIS fixer en
px. - Les couleurs doivent survivre au mode nuit et au papier électronique noir et blanc.
- Les display: flex et grid sont peu supportés par les anciennes liseuses.
OEBPS/styles/main.css@namespace epub "http://www.idpf.org/2007/ops";
@font-face {
font-family: "Crimson Pro";
src: url("../fonts/CrimsonPro-Regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
body {
font-family: "Crimson Pro", Georgia, serif;
font-size: 1em; /* toujours relatif */
line-height: 1.55;
text-align: justify;
hyphens: auto;
margin: 0.5em 1em;
}
h1 {
font-size: 1.8em;
text-align: center;
margin-top: 3em;
margin-bottom: 1.5em;
page-break-before: always; /* saut de page */
break-before: page; /* nouvelle syntaxe */
}
p {
text-indent: 1.2em;
margin: 0;
orphans: 2;
widows: 2;
}
p:first-of-type {
text-indent: 0;
}
p:first-of-type:first-letter {
font-size: 3.5em;
float: left;
line-height: 1;
margin-right: 0.08em;
}
[epub|type~="footnote"] {
font-size: 0.85em;
color: #555;
}
Unités relatives, toujours
Utilisez em, rem ou % pour toutes les tailles. Les pixels (px) fixent à un agrandissement donné et cassent le redimensionnement choisi par l'utilisateur.
Polices embarquées
Vous pouvez embarquer des polices dans l'EPUB pour contrôler l'identité typographique du livre. Les formats autorisés sont WOFF, WOFF2, OpenType (.otf) et TrueType (.ttf).
Droits d'usage
Les licences de polices commerciales interdisent souvent l'intégration libre dans un EPUB. Vérifiez la clause « web embedding » ou « ebook embedding ». Les polices Google Fonts, SIL Open Font License et les polices du domaine public (EB Garamond, Libre Baskerville, Crimson Pro) sont sûres.
Obfuscation de police (algorithme IDPF)
Pour rassurer les fondeurs, l'IDPF a défini une méthode d'obfuscation légère — un XOR entre les premiers 1040 octets du fichier de police et le hash SHA-1 de l'identifiant unique du livre. Ce n'est pas un chiffrement de sécurité, juste une barrière symbolique. L'EPUB déclare alors l'obfuscation dans META-INF/encryption.xml.
Images et figures
Formats autorisés : JPEG, PNG, GIF, SVG, WebP (depuis EPUB 3.3). Les liseuses e-ink rendent en niveaux de gris, souvent sur 16 nuances, parfois 256 sur le haut de gamme — adaptez vos images en conséquence.
<figure>
<img src="../images/carte.png"
alt="Carte de la Combray de Swann"
role="img"/>
<figcaption>Fig. 1 — Carte imaginaire de Combray.</figcaption>
</figure>
L'attribut alt est obligatoire pour les lecteurs d'écran et les obligations d'accessibilité. Utilisez alt="" pour les images purement décoratives.
SVG : le vecteur universel
SVG est embarquable soit comme fichier externe (<img src="schema.svg">), soit directement dans le XHTML (<svg>…</svg>). Dans le second cas, l'item du manifest doit porter la propriété svg.
SVG est idéal pour les cartes, schémas, équations géométriques, couvertures vectorielles — il reste net à toute résolution et pèse souvent moins qu'un PNG équivalent.
Audio, vidéo (EPUB 3 uniquement)
EPUB 3 autorise <audio> et <video> aux formats MP3, MP4 (AAC/H.264), OGG, WebM. L'usage est limité aux publications enrichies : manuels scolaires, livres jeunesse interactifs, documentaires. Sur liseuse e-ink, seul l'audio est rendu.
Couleurs et mode nuit
Piège classique
Si vous fixez une couleur de fond (background-color: white), le mode nuit du lecteur n'aura pas d'effet — votre livre restera blanc sur sombre. Laissez la couleur de fond à la liseuse ; ne stylisez que ce qui doit rester coloré (titres accentués, encadrés, liens).
Sauts de page et pagination
Le texte EPUB est reflowable : il n'y a pas de pages fixes, elles se recalculent en fonction de l'écran. Mais vous pouvez forcer un saut :
h1 {
page-break-before: always; /* ancien */
break-before: page; /* moderne */
}
Pour préserver un découpage type livre imprimé (page-list navigation), on insère des repères <span epub:type="pagebreak" id="p42">42</span> et une liste dans la nav.
Le texte est posé, la mise en forme réglée. Reste à donner au lecteur un moyen de s'y retrouver : la navigation.