Spécificités CSS

césure

La césure n'est pas pris en charge par défaut par beaucoup de couple navigateur/OS. L'attribut css hyphens: auto ne fonctionne que sur Firefox sur mac et gnu/linux (à vérifier). J'ai choisi d'utiliser une bibliothèque JS, hyphenopolis, qui a l'avantage d'avoir un callback permettant de bien attendre la fin du processus de césure pour que d'autres scripts puissent manipuler le contenus sans trop d'interférence. Le principe de fonctionnement de Hyphonopolis est assez simple : elle ajoute le symbole html ­ (qui correspond à une «soft hyphentation» ou césure paramétrique) à chaque endroit de chaque mot que permet les règles de césure d'une langue donnée. Par exemple en français, entre chaque syllabe et double consonne. Ensuite, lorsque l'attribut CSS hyphens: manual est utilisé pour un élément HTML, des césures pourront être appliquées à la fin des lignes. Au delà des règles spécifiques à la langue, des paramètres peuvent être donnés à hyphenopolis comme la taille minimale des mots, le traitement des orphelines ou expliciter des exceptions (nom propres...). Tous les autres réglages comme le nombre de césures consécutives ne peuvent pas exister à ce moment là puisque le texte n'est pas encore mis en page. Il n'est pas possible de traiter un élément du DOM ligne par ligne sans faire d'autres lourdes manipulations du texte ni de repérer (avec javascript par exemple) quelles césures sont effectives et les quelles sont restées des «potentielles».

justification

la justification n'est pas vraiment une pratique répandue en web. Seul Firefox permet d'utiliser la fonction CSS text-justify pour paramétrer la répartition des espaces dans les lignes. Par défaut (text-justify: auto) et comme sur les autres navigateur, la justification se fait seulement entre les mots (text-justify: inter-word) et donc seul Firefox permet d'utiliser text-justify: inter-letter et surtout celui qui se rapproche le plus d'une justification classique : text-justify: distribute qui réparti les espaces entre les mots et les lettres. Il suffit ensuite d'utiliser les fonctions classiques letter-spacing et word-spacing pour régler ses chasses/gris typo.

Paged-js applique à tous les paragraphes justifiés l'attribut CSS text-align-last:justify si ils sont "découpés" par la fin d'une page.

typographie

Pour tout ce qui est réglage d'approche ou de crénage, il est plus pratique d'utiliser l'interface graphique de logiciel de typographie (fontforge, trufont ou autre) que d'utiliser des bibliothèques comme kerning.js. Ré-exporter le fichier de fonte une fois les modifications effectuées et l'importer en @font-face. Pour ce qui est de l'interlettrage générale et de l'intermot (taille de l'espace), il existe des fonctions CSS pour les modifier (letter-spacing et word-spacing).

Pour l'import des fontes, il vaut mieux dans tout les cas choisir un autre nom de font-family pour éviter des conflits entre la version installée sur le système sur lequel vous développez/mettez en page le livre. ex:

@font-face {
	font-family: "Inknut Antiqua Blob0";
 	src: url("/css/fonts/InknutAntiqua-Medium.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
@font-face {
 font-family: "Inknut Antiqua Blob0";
 src: url("/css/fonts/InknutAntiqua-Light.ttf") format("truetype");
 font-weight: 200;
}

Cela permettra d'être sûr que c'est bien la version customisée qui est affichée. Puis seulement dans la version web, prévoir des alternatives au cas où la typographie ne se charge pas:

p{
    font-familly:"Inknut Antiqua Blob0", "Inknut Antiqua", "serif";
}

Il faut être très vigilant au comportement de font-weight et font-stryle : italic qui parfois ne semble pas charger la bonne fonte, voire déformer la fonte normal pour en faire une bold ou une italic.