Color, Alpha, variables CSS & Design System-4

Commentaires

Commenter

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 &shy;) 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;
}
				
			
				
					<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Exemple de césure CSS</title>
  <style>
    p {
      hyphens: auto;
      width: 300px;
    }
  </style>
</head>
<body>
  <p lang="fr">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.</p>
</body>
</html>

				
			

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.

				
					<p lang="en">A paragraph of long text that could be hyphenated in English.</p>
<p lang="fr">Un paragraphe de texte long qui pourrait être césuré en français.</p>

				
			

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 &shy; (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é &shy; 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 :

				
					<p>Ce texte contient un mot très&shy;long qui pourrait être césuré si nécessaire.</p>

				
			

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.

Contact

Logo DVW Design DVW Design

Paris, France

Tel. +33(0)6 68 49 06 04

Vous pouvez également flasher ce QR Code avec mes coordonnées