Il y a code et code [1]

Raaa ! Les joies du code HTML que je nomme amoureusement : le code Chteumeuleu.

Ce code sert, principalement, à créer des pages Internet, mais il sert aussi, accessoirement, à créer des ePubs.

Je vous ai déjà expliqué, brièvement, qu'un ePub n'était ni plus ni moins qu'un fichier archive contenant des feuilles de code HTML et des feuilles de styles CSS (et des différents fichiers multimédias contenus dans le livre comme les images, les fichiers sons, les polices de caractères...).

Les feuilles de code HTML contiennent le texte et les feuilles CSS contiennent les gabarits de mise en page du texte.

Pour vous convaincre qu'un ePub n'est qu'un fichier archive, vous pouvez l'ouvrir avec Winrar ou Winzip et vous en rendre compte. Effectivement, vous pourrez alors extraire différents fichiers et répertoires tels :

— fichier mimetype

— répertoire OEBPS

— répertoire META-INF

Le répertoire META-INF pouvant contenir un fichier conteneur et le répertoire OEBPS contenant des répertoires Images, Text, Styles et des fichiers content.opf et toc.ncx.

Le répertoire Images contient les images de votre livre, dont la couverture. Le répertoire Text contient vos textes, un fichier par chapitre. Le répertoire Styles contient les feuilles de styles CSS.

Je vous ai déjà expliqué que toute création d'ePub via un logiciel provoque du code parasite qu'il vaut mieux éradiquer par la suite.

Mais, pour faire un bon ePub, il faut tout d'abord respecter la structure du livre. Car, si la mise en page d'un livre papier et d'un livre numérique est différente, la structure, elle, est la même puisque votre histoire est forcément découpée en chapitres, sous-chapitres, paragraphes...

La première chose à vérifier est donc la structure de votre livre.

Cette structure est identifiée, dans le code HTML, par des balises « h » (pour Heading/Titre). Ainsi, il existe six niveaux de Titres, dénommés « h1 »... »h6 ».

Parce que le code HTML est interprété, même dans les messages, pour vous montrer du code, je vais remplacer "<" par "[“et ">" par "]". Si vous voulez utiliser ce code, n'oubliez pas de faire la manipulation inverse.

[h1] Titre 1 [/h1] va définir le chapitre, [h2] Sous-titre 1 [/h2] va définir le sous-chapitre... etc.

Si vous avez d'autres titres et d'autres sous-titres, reprenez les mêmes balises.

[h1] Titre 2 [/h2] ... [h2] Sous-titre 2 [/h2].

Ces balises vont donc formater la structure de votre livre. Si, en plus, vous retouchez votre code avec un logiciel comme Sigil, il vous suffira, ensuite, de cliquer sur le bouton « Generate Table Contents » pour générer automatiquement la table des matières de votre livre.

Au passage, il est important de préciser qu'il est non seulement obsolète, mais surtout déconseillé, de créer une table des matières physique avec une page HTML contenant des liens vers les chapitres. Effectivement, en codant vos titres avec les balises appropriées, la table des matières sera intégrée à l'ePub et accessible via le menu du livre sur votre liseuse.

Au passage, vous pouvez appliquer un style à vos titres (couleur, alignement...). Ainsi, vous pouvez décider de centrer vos titres, de les souligner, de les écrire en gris...)

Pour cela, dans votre feuille de style, il vous suffit de spécifier les particularités que vous voulez donner aux titres ou aux sous-titres avec une ligne ressemblant à :

h1{color : #463F32 ; font-weight : bold; font-style : italic;} (titre en gras et en italique)

h2{color : #303030; text-decoration : underline; text-align : center} (sous-titre centré et souligné).

Tant que vous êtes dans votre feuille de style, profitez-en pour mettre en place vos gabarits.

Un livre numérique est créé, à la base, pour être lu sur une tablette ou sur une liseuse. Il vaut alors mieux laisser toute la latitude de réglages possible aux lecteurs. Évitez de leur imposer des choix qu'ils pourraient paramétrer dans leur liseuse. Aussi, est-il déconseillé d'imposer une police de caractère, une taille, un interlignage, une justification (quoi que, au niveau de la justification, je suis plutôt pour la forcer afin que les textes soient lisibles même à partir de Calibre ou d'anciennes liseuses qui ne permettent pas de paramétrer la justification du texte et qui vous obligerait, alors, à lire un texte aligné à gauche par défaut, ce qui est, selon moi, très pénible. Cependant, il faut reconnaitre que la justification impose de gros blancs dans les lignes lorsque l'on grossit fortement la police des caractères.).

Un roman étant, dans sa grande partie, composé d'un unique gabarit, commencez par définir celui-ci.

Mais avant, vous pouvez, par exemple, prévoir une toute petite marge tout autour du texte pour éviter qu'il soit trop collé sur les bords :

body{margin-left:2%;margin-right:2%;margin-top:2%;margin-bottom:2%;}

Les marges, à gauche/droite/haut/bas, auront alors une taille égale à 2 % de la taille de l'écran.

Maintenant, définissez le gabarit principal :

p{text-indent:1.8em;line-height:150%;text-align:justify;margin-top:.63em;margin-bottom:.63em;font-size:145%}

Cette ligne de code définit donc le gabarit [p] que vous utiliserez pour formater la majeure partie de votre texte de la façon suivante :

[p] votre si beau texte [/p]

Grâce au gabarit déclaré dans votre feuille de style, votre texte sera formaté de la façon suivante :

tex-ident:1.8em (Un alinéa ou un retrait en début de paragraphe égal à 1.8 fois la hauteur d'une lettre. Ainsi, votre retrait sera proportionnel à la taille du caractère que le lecteur choisira)

margin-top:.63em/ margin-bottom:.63em (fixe une marge en haut puis en bas du paragraphe d'une valeur de 0.63 fois la hauteur d'une lettre. L'espacement entre les paragraphes est donc proportionnel à la taille de police de caractères sélectionner par le lecteur).

line-height:150% (hauteur de ligne de 150 %. Toujours préférer une proportionnalité plutôt qu'un chiffre fixé comme 15px, 15 pixels)

font-size:145% (force la taille de la police de caractère à 145 % de la valeur normale. À savoir que cette information n'est pas forcément utile puisque la taille de la police est sélectionnée par le lecteur. Il faut alors à tout prix éviter de placer une information du style : font-size:15px ce qui forcerait la taille de la police à 15 pixels et empêcherait le lecteur de la réduire ou l'agrandir par l'intermédiaire des réglages de sa liseuse.)

text-align:justify (pour forcer le texte à la justification. Comme je l'ai déjà dit, on peut laisser le lecteur choisir de lui-même, cela dépendra des avis).

Vous pouvez ensuite déclarer d'autres gabarits de la façon suivante :

.p1{text-indent:0;text-align:center;font-weight:bold}

« .p1 » sera le nom du gabarit que l'on appellera dans sa feuille de texte :

[p class="p1"] votre magnifique texte [/p]

Vous pouvez déclarer autant de gabarits que vous voulez, le mieux étant d'en créer juste ce qu'il faut.

Ainsi, pour celui-ci, le gabarit formatera son texte de la façon suivante : pas de retrait ; texte centré ; texte mis en gras.

Voilà, ce sera tout pour aujourd'hui, mais, rassurez-vous ou inquiétez-vous, je vous proposerais encore du code.

Au passage, je préfère prévenir que je ne suis pas du tout un spécialiste du HTML, je me contente juste de vous livrer ce que j'ai pu trouver et expérimenter en la matière et je suis toujours tout ouïe si jamais certains d'entre vous ont des objections ou des compléments d'information en la matière.