Les navigateurs web supportent désormais la gestion des césures dans le texte.
Les césures sont soient activées par défaut (Safari), ou une préférence/réglages avancées. Et bien sûr, si on en parle, c’est qu’il y a une méthode CSS pour gérer les différents cas, et choisir la quelques paramètres de césure.
Introducing … CSS hyphens
La propriété hyphens en CSS est une fonctionnalité typographique essentielle pour contrôler la manière dont les mots longs sont césurés lorsqu’ils sont affichés dans un bloc de texte. Elle permet de contrôler ce comportement dans différentes langues et scénarios.
La propriété hyphens
accepte plusieurs valeurs :
- none : Empêche la césure des mots, même si cela signifie que le texte dépasse du conteneur.
- manual : Active la césure uniquement lorsqu’un point de césure manuel (
<wbr>
ou­
) est spécifié dans le code HTML. - auto : Laisse le navigateur déterminer automatiquement où la césure doit se produire. Il prend en compte la langue spécifiée dans le document (via la propriété
lang
).
Exemple de code :
p {
hyphens: auto;
/* Fonctionne avec la langue définie dans le document ou le conteneur */
lang: fr;
width: 300px;
}
Exemple de césure CSS
Voici un exemple de texte avec une très longue phrase qui pourrait bénéficier de la césure automatique dans un paragraphe plus petit.
Utilisation dans les différentes langues
La propriété hyphens
fonctionne en tandem avec la propriété lang
définie dans le HTML ou dans les balises conteneurs. Le comportement de césure dépend du dictionnaire linguistique que le navigateur utilise.
A paragraph of long text that could be hyphenated in English.
Un paragraphe de texte long qui pourrait être césuré en français.
Entités HTML pour la césure conditionnelle
En plus de la propriété CSS hyphens
, il est parfois nécessaire d’utiliser des entités HTML spécifiques pour indiquer manuellement où la césure peut se produire. L’entité HTML ­
(short for “soft hyphen”) permet d’ajouter un point de césure possible à un mot long.
Si un mot ne peut tenir dans la largeur disponible du conteneur, il sera césuré à l’endroit où l’entité ­
a été placée, et un tiret apparaîtra. Si la césure n’est pas nécessaire, l’entité est ignorée.
Exemple de code :
Ce texte contient un mot trèslong qui pourrait être césuré si nécessaire.
Entités HTML pour la césure conditionnelle
Depuis septembre 2023, cette fonctionnalité fonctionne sur les appareils les plus récents et les principales versions de navigateurs.