Thorium : non prise en charge des tailles de caractères

Publié le par

L’application Thorium ne veut pas prendre mes hauteurs de caractères (font-size), parfois même mes dimensions de marge (margin) de mes EPUB. Pourtant ma feuille CSS est correcte et je ne suis pas le seul à pester (voir le billet sur github).

Après avoir essayé de contourner le problème… je suis tombé sur cet autre billet de github qui en bref nous explique qu’il s’agit de normaliser les tailles de caractères et que c’est (serait) donc tout à fait normal !

Voici un extrait…

/* Readium CSS
Font size normalize
A stylesheet to normalize font-size
Repo: https://github.com/readium/readium-css
*/
/*
STYLES / / :root is used so that you can quickly add a class or attribute if you prefer e.g. :root[data-rs-normalize] */
/* We create a default so that you don’t need to explicitly set one in the DOM. Once the “Publisher’s styles” checkbox is unchecked, the normalize is applied automatically / :root:--advanced-settings { --USER__typeScale: 1.2; / This is the default type scale you’ll find in most publications */
}
:root:--advanced-settings p,
:root:--advanced-settings li,
:root:--advanced-settings div,
:root:--advanced-settings pre,
:root:--advanced-settings dd {
font-size: 1rem !important;
}
:root:--advanced-settings h1 {
/* Fallback if browser doesn’t support vars */
font-size: 1.75rem !important;
font-size: calc(((1rem * var(--USER__typeScale)) * var(--USER__typeScale)) * var(--USER__typeScale)) !important;
}
etc….

Il s’agit donc bel et bien d’imposer un choix, cependant deux choses me choquent : l’utilisation de :root, instance supérieure supplantant <html> donc c’est un peu comme utiliser un bulldozer, et l’emploi de !important histoire que les survivants ne soient pas épargnés.

Pour éviter de s’arracher les cheveux plus longtemps, il ne vous a pas échappé que nulle part figurait la balise <span>, elle va être notre porte de sortie.

Au lieu d’écrire :
<h2 class="titre1>Mon titre</h2>
Il suffit d’écrire :
<h2><span class="titre1>Mon titre</span></h2>

Autre solution, appliquer les style en utilisant les ID, exemple :
<h2 id="titre1">Mon titre</h2>
Cependant la limite de cette méthode est la nature de l’ID, celui-ci doit être unique donc cela nécessiterait l’utilisation d’une multitude de styles… mais cela peut dépanner.

D’accord cela va complexifier le code mais avouez que le jeu en vaut la chandelle, le titrage vous dira merci ! Croisons les doigts qu’il ne leur vienne pas à l’esprit d’affecter leurs contraintes à toutes les balises dans une prochaine version… ou de nous forcer la main avec d’autres propriétés.