Un bloc de texte en colonnes étroites reste disgracieux malgré une propriété CSS hyphens: auto; posée consciencieusement sur le conteneur. Le texte déborde de sa colonne, ou laisse des espaces disproportionnés en fin de ligne, exactement comme si la propriété n’était jamais appliquée. Pourtant, l’inspecteur du navigateur confirme bien que la règle est active et prioritaire sur le sélecteur concerné.
Ce cas surgit régulièrement sur un site multilingue dont une partie du gabarit hérite d’une langue déclarée globalement, tandis qu’une autre partie affiche un contenu dans une langue différente sans le signaler explicitement au navigateur. La propriété CSS seule ne peut rien faire dans ce cas : elle dépend entièrement d’une information qui ne vient pas du CSS.
Symptôme : la césure ne s’active dans aucun navigateur
Le CSS en cause ressemble à quelque chose d’aussi simple que :
.contenu-article {
hyphens: auto;
overflow-wrap: break-word;
}
Tous les moteurs de rendu récents supportent cette propriété. Pourtant, aucun mot long n’est jamais coupé, même dans une colonne manifestement trop étroite pour l’accueillir sans césure. Le développeur vérifie les préfixes navigateurs, ajoute -webkit-hyphens et -ms-hyphens par prudence, sans succès.
Diagnostic : le navigateur ignore délibérément la langue du texte
La spécification CSS est explicite sur ce point : la propriété hyphens nécessite que le navigateur connaisse la langue du texte pour choisir le bon dictionnaire de césure, propre à chaque langue. Sans déclaration de langue exploitable, la plupart des navigateurs refusent tout simplement d’appliquer la moindre coupure, plutôt que de risquer une césure incorrecte avec un mauvais dictionnaire.
Sur un site où le gabarit HTML principal déclare <html lang="en"> par erreur d’héritage d’un thème anglophone, alors que le contenu affiché est en français, le navigateur applique silencieusement les règles de césure anglaises, ou n’en applique aucune si le contenu francophone se trouve dans un fragment isolé sans attribut de langue local.
Correctif : déclarer la langue au bon niveau
La correction commence par vérifier l’attribut lang sur la balise <html>, généralement générée par la fonction language_attributes() dans le fichier header.php du thème :
<html >
Cette fonction s’appuie sur le réglage de langue du site, mais ne suffit pas toujours pour un contenu multilingue où plusieurs langues coexistent sur une même page, par exemple un extrait cité dans une autre langue au sein d’un article. Dans ce cas, il faut ajouter un attribut lang local directement sur l’élément concerné :
<blockquote lang="en">
<p>A quote kept in its original language.</p>
</blockquote>
Une fois cet attribut correctement posé, le navigateur dispose enfin de l’information nécessaire pour choisir le bon dictionnaire de césure, et la propriété hyphens: auto; commence à produire l’effet attendu, sans aucune modification du CSS lui-même.
Points de vérification utiles
- L’attribut
langde la balisehtmlcorrespond-il vraiment à la langue majoritaire du contenu ? - Un fragment dans une autre langue porte-t-il son propre attribut
langlocal ? - Le code de langue est-il valide, par exemple
froufr-FR, jamais un code inventé ?
Prévention : tester la césure dans plusieurs langues du site
Sur un site multilingue construit avec une extension de traduction, il est utile de vérifier que chaque version linguistique modifie correctement l’attribut lang de la balise html en fonction de la langue affichée, et pas seulement le contenu visible. Un test simple consiste à réduire artificiellement la largeur d’une colonne de texte sur chaque version linguistique, pour observer si la césure s’active bien partout où elle est nécessaire.
Un repère à garder en tête : une propriété CSS qui dépend de la langue du texte ne peut jamais compenser une déclaration HTML absente ou incorrecte. Le CSS suit ce que le HTML annonce, il ne le devine jamais.
En résumé
La césure automatique fait partie de ces fonctionnalités qui semblent purement esthétiques et pilotées par CSS, alors qu’elles dépendent en réalité d’une information sémantique posée en HTML. Sur un site multilingue, négliger l’attribut lang à l’endroit précis où la langue change revient à priver le navigateur d’un repère indispensable, quelle que soit la qualité du CSS écrit par ailleurs.
