MobileRead Forums - View Single Post - Créer un EPUB avec LibreOffice et writer2xhtml (W2X)

roger64 · 02-12-2016, 10:23 AM

Bonjour

À propos des notes

writer2xhtml n'invente rien; il convertit exactement, sans interpréter. Lorsque l'on utilise l'odt comme un format de travail, on le fait normalement à partir d'un modèle où tous les styles habituels, de paragraphe ou de caractère sont définis au goût de l'utilisateur.

La conversion des notes se traduit en général dans l'EPUB par deux spans (un span est la conversion d'un style de caractère), l'un pour les appels de note (anchors), l'autre pour la numérotation des notes (symbol). Il est normal que ces styles aient un affichage différent: l'appel de note peut être en exposant (j'utilise la valeur "text-top"), entre accolades, en taille 75%, avec une marge gauche équivalente à une insécable, en gras, en couleur, non souligné, etc.. Le second peut être un simple numéro souligné ou pas, en taille 133%, etc.

En pratique, les styles de caractères ...noteanchor (Endnoteanchor ou Footnoteanchor) sont de très loin les plus utilisés. writer2xhtml les utilise avec des spans. Le CSS permet de beaucoup améliorer l'apparence des appels de note, au-delà de la taille et de l'élévation. C'est pourquoi il peut être intéressant de rajouter une feuille de style annexe avec un nouveau style de type ...noteanchor qui pourra remplacer celui-ci (voir plus bas).

anchors

La taille des appels de note est celle qui est définie dans l'odt, dans le style de caractère : ancre de note de fin (ou de bas de page). Si leur valeur (onglet "position") n'est pas définie par l'utilisateur, LibO fixe une valeur par défaut qui peut ne pas convenir.

Voici deux copies d'écran à titre d'illustration:
Sur la première, prise sur LibreOffice 5.0.4., on voit que j'ai appelé (F11) le style de caractère "ancre de note de bas de page" (cela fonctionne aussi pour le style ancre de note de fin). On trouve ce style en sélectionnant "Tous les styles" sur l'onglet du bas et "Styles de caractère" sur l'onglet du haut. Une fois le style sélectionné, j'ai fait un clic droit sur "modifier" et la petite fenêtre que vous voyez sur l'écran s'est affichée. J'ai décoché la case "automatique" et j'ai inscrit deux valeurs 80% (taille) et 20% (élévation). J'ai exporté vers l'EPUB avec writer2xhtml.

Sur la deuxième copie d'écran prise sur l'EPUB on voit que pour le style footnoteanchor les deux valeurs: font-size: 80% et vertical-align: 20% ont été fidèlement retranscrites. L'ancre est donc traduite par un span dans le code CSS et html.

Symbol

Le deuxième span (FootnoteSymbol ou EndnoteSymbol) que l'on voit sur la copie d'écran, permet le formatage du chiffre qui précède la note elle-même (celui sur lequel on clique pour revenir au corps de texte). La valeur de ce span est déterminée sur LibreOffice par le style de caractère "Caractères de la note de fin" ou "Caractères de la note de bas de page". writer2xhtml transcrit les valeurs de ce style comme pour celui de l'appel de note. Les caractères seront traduits par un span dans le code CSS mais par une classe de l'élément a dans le html. C'est une anomalie qu'il faut corriger (dans le CSS, au lieu de span.EndnoteSymbol, écrire simplement: .EndnoteSymbol). Une fois que c'est fait les valeurs de la classe EndnoteSymbol seront prises en compte.

Liens Internet (en fait hypertexte)

Il s'agit de deux styles de caractère. Ils sont traduits par l'élément a. Par défaut, il est de couleur bleue et souligné.

Option custom et choix partiel

L'option "original formatting" convertit tout ce qu'elle trouve (à la Calibre) et procure une satisfaction immédiate. Mais les EPUB convertis de cette façon seront difficiles à modifier parce que bourrés d'irrégularités. On gagne du temps au départ mais on le perd à l'arrivée. Mieux vaut faire l'effort de n'utiliser que des styles et poser des questions si l'on observe un résultat déconcertant. On apprendra vite.

Le fait de choisir l'option "custom" n'implique pas de sélectionner l'ensemble des options indiquées plus haut. On peut se contenter de ne charger automatiquement qu'une feuille de style annexe tout en demandant dans l'option "formatting" de tout convertir ("convert all formatting").

Ajouter une feuille de style annexe

Pour ajouter une feuille de style annexe, en faire un copier-coller dans la petite fenêtre de la page Options/writer2xhtml/Style sheets. On peut le faire aussi en cliquant sur "Load" (charger) dans cette même page et en indiquant le chemin de la feuille de style annexe. Ne pas oublier de cocher la case du dessus et de choisir l'option "custom" à l'export. À la prochaine conversion, l'EPUB contiendra une deuxième feuille de style.

Pour obtenir l'affichage voulu, il faudra veiller à effacer après export dans la feuille de style les spans écrits en double sur l'une ou l'autre feuille.

L'utilisation d'une feuille de style annexe permet de faire face au maximum de cas possibles (ex: lettrines, espaces divers, etc.). En cas de non-utilisation, un clic dans l'éditeur de Calibre juste avant de sauvegarder l'EPUB à publier réduit la feuille de style aux seuls styles réellement utilisés.

CSS et préséance

Si l'on est surpris par quelque affichage, il convient de se souvenir d'une règle CSS importante. En bref, l'élément le plus proche l'emporte:
- la classe l'emporte sur l'élément (span ou a)
- le span l'emporte sur le paragraphe.
- le paragraphe l'emporte sur le body
Le vide n'existe pas dans le CSS. Si vous avez oublié de fixer une valeur, votre moteur de lecture ("user agent") en fournira une par défaut. Celle-ci aura la priorité la plus basse mais son entrée en jeu peut déconcerter. Par exemple les liens Internet sont par défaut soulignés et de couleur bleue.

Code proposé

Nous avons vu comment utiliser LibreOffice pour que writer2xhtml utilise un code à votre convenance. Ce n'est cependant pas suffisant pour obtenir l'affichage perfectionné que permet la souplesse du CSS. Une solution avec writer2xhtml peut être de rajouter dans une feuille de style annexe les styles suivants (à adapter à votre goût)

Code:

.Endnoteanchor {
 margin-left:0.4em;
 font-weight:bold;
 font-style: normal;
 font-size:smaller;
 vertical-align:text-top;
 color:green
}

.EndnoteSymbol {
  font-size: 133%;
  font-weight: bold;
  text-decoration: none;
  color: green;
}

a:link    {
 color:green;
 background-color:transparent;
 text-decoration:none
}

N'oubliez pas de supprimer les doublons éventuels dans la feuille de style.

02-12-2016, 10:23 AM	#293
roger64 Wizard Posts: 2,608 Karma: 3000161 Join Date: Jan 2009 Device: Kindle PW3 (wifi)	Bonjour À propos des notes writer2xhtml n'invente rien; il convertit exactement, sans interpréter. Lorsque l'on utilise l'odt comme un format de travail, on le fait normalement à partir d'un modèle où tous les styles habituels, de paragraphe ou de caractère sont définis au goût de l'utilisateur. La conversion des notes se traduit en général dans l'EPUB par deux spans (un span est la conversion d'un style de caractère), l'un pour les appels de note (anchors), l'autre pour la numérotation des notes (symbol). Il est normal que ces styles aient un affichage différent: l'appel de note peut être en exposant (j'utilise la valeur "text-top"), entre accolades, en taille 75%, avec une marge gauche équivalente à une insécable, en gras, en couleur, non souligné, etc.. Le second peut être un simple numéro souligné ou pas, en taille 133%, etc. En pratique, les styles de caractères ...noteanchor (Endnoteanchor ou Footnoteanchor) sont de très loin les plus utilisés. writer2xhtml les utilise avec des spans. Le CSS permet de beaucoup améliorer l'apparence des appels de note, au-delà de la taille et de l'élévation. C'est pourquoi il peut être intéressant de rajouter une feuille de style annexe avec un nouveau style de type ...noteanchor qui pourra remplacer celui-ci (voir plus bas). anchors La taille des appels de note est celle qui est définie dans l'odt, dans le style de caractère : ancre de note de fin (ou de bas de page). Si leur valeur (onglet "position") n'est pas définie par l'utilisateur, LibO fixe une valeur par défaut qui peut ne pas convenir. Voici deux copies d'écran à titre d'illustration: Sur la première, prise sur LibreOffice 5.0.4., on voit que j'ai appelé (F11) le style de caractère "ancre de note de bas de page" (cela fonctionne aussi pour le style ancre de note de fin). On trouve ce style en sélectionnant "Tous les styles" sur l'onglet du bas et "Styles de caractère" sur l'onglet du haut. Une fois le style sélectionné, j'ai fait un clic droit sur "modifier" et la petite fenêtre que vous voyez sur l'écran s'est affichée. J'ai décoché la case "automatique" et j'ai inscrit deux valeurs 80% (taille) et 20% (élévation). J'ai exporté vers l'EPUB avec writer2xhtml. Sur la deuxième copie d'écran prise sur l'EPUB on voit que pour le style footnoteanchor les deux valeurs: font-size: 80% et vertical-align: 20% ont été fidèlement retranscrites. L'ancre est donc traduite par un span dans le code CSS et html. Symbol Le deuxième span (FootnoteSymbol ou EndnoteSymbol) que l'on voit sur la copie d'écran, permet le formatage du chiffre qui précède la note elle-même (celui sur lequel on clique pour revenir au corps de texte). La valeur de ce span est déterminée sur LibreOffice par le style de caractère "Caractères de la note de fin" ou "Caractères de la note de bas de page". writer2xhtml transcrit les valeurs de ce style comme pour celui de l'appel de note. Les caractères seront traduits par un span dans le code CSS mais par une classe de l'élément a dans le html. C'est une anomalie qu'il faut corriger (dans le CSS, au lieu de span.EndnoteSymbol, écrire simplement: .EndnoteSymbol). Une fois que c'est fait les valeurs de la classe EndnoteSymbol seront prises en compte. Liens Internet (en fait hypertexte) Il s'agit de deux styles de caractère. Ils sont traduits par l'élément a. Par défaut, il est de couleur bleue et souligné. Option custom et choix partiel L'option "original formatting" convertit tout ce qu'elle trouve (à la Calibre) et procure une satisfaction immédiate. Mais les EPUB convertis de cette façon seront difficiles à modifier parce que bourrés d'irrégularités. On gagne du temps au départ mais on le perd à l'arrivée. Mieux vaut faire l'effort de n'utiliser que des styles et poser des questions si l'on observe un résultat déconcertant. On apprendra vite. Le fait de choisir l'option "custom" n'implique pas de sélectionner l'ensemble des options indiquées plus haut. On peut se contenter de ne charger automatiquement qu'une feuille de style annexe tout en demandant dans l'option "formatting" de tout convertir ("convert all formatting"). Ajouter une feuille de style annexe Pour ajouter une feuille de style annexe, en faire un copier-coller dans la petite fenêtre de la page Options/writer2xhtml/Style sheets. On peut le faire aussi en cliquant sur "Load" (charger) dans cette même page et en indiquant le chemin de la feuille de style annexe. Ne pas oublier de cocher la case du dessus et de choisir l'option "custom" à l'export. À la prochaine conversion, l'EPUB contiendra une deuxième feuille de style. Pour obtenir l'affichage voulu, il faudra veiller à effacer après export dans la feuille de style les spans écrits en double sur l'une ou l'autre feuille. L'utilisation d'une feuille de style annexe permet de faire face au maximum de cas possibles (ex: lettrines, espaces divers, etc.). En cas de non-utilisation, un clic dans l'éditeur de Calibre juste avant de sauvegarder l'EPUB à publier réduit la feuille de style aux seuls styles réellement utilisés. CSS et préséance Si l'on est surpris par quelque affichage, il convient de se souvenir d'une règle CSS importante. En bref, l'élément le plus proche l'emporte: - la classe l'emporte sur l'élément (span ou a) - le span l'emporte sur le paragraphe. - le paragraphe l'emporte sur le body Le vide n'existe pas dans le CSS. Si vous avez oublié de fixer une valeur, votre moteur de lecture ("user agent") en fournira une par défaut. Celle-ci aura la priorité la plus basse mais son entrée en jeu peut déconcerter. Par exemple les liens Internet sont par défaut soulignés et de couleur bleue. Code proposé Nous avons vu comment utiliser LibreOffice pour que writer2xhtml utilise un code à votre convenance. Ce n'est cependant pas suffisant pour obtenir l'affichage perfectionné que permet la souplesse du CSS. Une solution avec writer2xhtml peut être de rajouter dans une feuille de style annexe les styles suivants (à adapter à votre goût) Code: .Endnoteanchor { margin-left:0.4em; font-weight:bold; font-style: normal; font-size:smaller; vertical-align:text-top; color:green } .EndnoteSymbol { font-size: 133%; font-weight: bold; text-decoration: none; color: green; } a:link { color:green; background-color:transparent; text-decoration:none } N'oubliez pas de supprimer les doublons éventuels dans la feuille de style.