Pour conserver un remplissage aux deux extrémités de chaque ligne d’un surlignage avec retour à la ligne, appliquez box-decoration-break: clone à un élément en ligne, avec son arrière-plan et son remplissage. Ajoutez la déclaration préfixée pour WebKit pour Safari. MDN explique la décoration des fragments.

Ce guide s’adresse à une personne qui modifie une page Web sur un Mac et souhaite qu’une expression surlignée passe naturellement à la ligne dans un titre ou un paragraphe. Il s’agit d’attribuer à chaque ligne obtenue son propre arrière-plan avec remplissage, tout en laissant le navigateur gérer les retours à la ligne.

Pourquoi le remplissage disparaît-il là où le surlignage passe à la ligne ?

La valeur initiale de box-decoration-break est slice. Lorsqu’une boîte en ligne est coupée sur plusieurs lignes, cette valeur traite sa décoration comme une boîte continue découpée en fragments. Aucun remplissage n’est ajouté aux bords de la coupure. Avec clone, chaque fragment reçoit son propre remplissage, sa bordure et sa décoration d’arrière-plan. Le W3C définit les deux comportements de fragmentation.

Cette distinction explique un résultat courant : ajouter du remplissage horizontal rend le début et la fin de l’expression entière plus spacieux, mais les bords des lignes intermédiaires restent serrés. Le paramètre manquant contrôle ce qui se passe à ces coupures ; augmenter le remplissage seul ne change rien à cela.

Conservez le surlignage dans une boîte en ligne. Un arrière-plan de bloc décore le rectangle englobant, tandis qu’un surlignage en ligne suit le flux du texte. MDN décrit les différences de dimensionnement et d’espacement entre les boîtes block, inline et inline-block. Consultez le guide du modèle de boîte de MDN.

Créer un exemple complet sur votre Mac

Dans un éditeur de code, créez un fichier texte brut nommé wrapped-highlight.html, collez-y l’exemple complet ci-dessous, puis enregistrez-le. Ouvrez le fichier dans votre navigateur de bureau. Aucune installation de paquet, feuille de style externe ni aucun JavaScript ne sont nécessaires.

Le titre fictif représente une présentation simple de la page. Un seul élément span entoure toute l’expression décorée. WHATWG définit l’élément span comme un conteneur générique de texte sans signification propre, ce qui le rend adapté à ce regroupement purement visuel. Consultez la définition de span dans la norme HTML.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Wrapped highlight example</title>
  <style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      padding: 2rem;
      background: #ffffff;
      color: #202020;
      font-family: system-ui, sans-serif;
    }

    .sample {
      max-width: 26rem;
      margin: 0 auto;
    }

    .sample-title {
      margin: 0;
      font-size: 2rem;
      font-weight: 600;
      line-height: 1.65;
    }

    .highlight {
      display: inline;
      background-color: #ffe6a6;
      padding: 0.08em 0.3em;
      border-radius: 0.15em;
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;
    }
  </style>
</head>
<body>
  <main class="sample">
    <h1 class="sample-title"><span class="highlight">Amber tiles and silver circles arranged across a sample page</span></h1>
  </main>
</body>
</html>

Réduisez la largeur de la fenêtre du navigateur jusqu’à ce que le titre passe à la ligne, puis élargissez-la de nouveau. Examinez le début et la fin de chaque ligne surlignée. Le résultat attendu est un fragment d’arrière-plan avec remplissage distinct autour de chaque ligne, avec le même traitement lorsque le retour à la ligne change. Les exemples de MDN utilisent la même paire de déclarations, l’une préfixée et l’autre standard. Consultez la syntaxe et les exemples documentés.

Les dimensions présentées ici sont des choix de conception à titre d’exemple. Commencez par modifier le remplissage horizontal, 0.3em, si les extrémités semblent trop serrées ou trop espacées. Modifiez séparément le remplissage vertical, 0.08em. Gardez le test de retour à la ligne actif pendant que vous ajustez l’une ou l’autre valeur.

Pour comparer les comportements, remplacez temporairement les deux déclarations de décoration de clone par slice, enregistrez, puis rechargez la page. Rétablissez ensuite clone pour les deux. Modifier les deux évite que la comparaison dépende de la déclaration reconnue par votre navigateur.

Quels détails de compatibilité des navigateurs comptent sur un Mac ?

Conservez les deux déclarations de l’exemple. Les données de compatibilité actuelles de MDN indiquent que la propriété standard est prise en charge à partir de Chrome 130 et Firefox 32. Elles indiquent une prise en charge de Safari avec le préfixe -webkit- et limitent cette implémentation aux éléments en ligne. Consultez les données de compatibilité des navigateurs de MDN.

Cette restriction aux éléments en ligne convient à cette tâche : une expression qui passe à la ligne dans du texte relève de la fragmentation en ligne. Elle n’établit pas une prise en charge équivalente pour un bloc fragmenté en colonnes ou sur des pages imprimées. Évaluez séparément ces cas de mise en page.

Testez le fichier dans les navigateurs Mac qui comptent pour votre page. Utilisez une fenêtre étroite puis une fenêtre large, puis agrandissez le texte de la page et recommencez. Le nombre de lignes peut varier ; votre critère d’acceptation est un remplissage uniforme sur les fragments réellement produits par chaque navigateur.

Si un environnement ne reconnaît aucune des deux déclarations, l’amélioration qui consiste à cloner chaque ligne ne sera pas disponible. Gardez le texte et l’arrière-plan sous-jacents lisibles, ou choisissez un traitement en bloc avec remplissage si un arrière-plan rectangulaire unique répond à la contrainte de conception. Cela modifie l’apparence : ce choix doit donc être explicite.

Comment éviter le chevauchement des arrière-plans et les retours à la ligne maladroits ?

Le remplissage et l’interligne règlent des problèmes différents. Dans une boîte en ligne normale, le remplissage supérieur et inférieur peut étendre la zone peinte sans éloigner le contenu environnant. Par conséquent, augmenter le remplissage vertical peut faire se chevaucher les lignes surlignées adjacentes. MDN décrit explicitement ce comportement des boîtes en ligne. Consultez les explications sur le remplissage en ligne et le contenu environnant.

Ajustez l’line-height du titre en même temps que le remplissage vertical du surlignage. L’exemple part d’une valeur volontairement généreuse de 1.65. Réduisez-la progressivement si les espaces semblent trop grands, en vérifiant chaque fois la mise en page la plus étroite. Il n’existe pas de valeur d’espacement unique adaptée à toutes les polices et décorations.

Suivez cette séquence de diagnostic pour déterminer la cause avant de modifier davantage de CSS :

Ce que vous voyez Vérifiez d’abord Action suivante
Le remplissage apparaît uniquement aux extrémités de l’expression Comportement de la décoration Appliquez les deux déclarations clone à l’élément en ligne surligné.
Un grand rectangle d’arrière-plan Quel élément porte l’arrière-plan Placez l’arrière-plan et le remplissage sur l’élément span en ligne interne.
Les lignes surlignées se touchent verticalement Remplissage vertical et hauteur de ligne du parent Réduisez le remplissage vertical ou augmentez l’interligne.
Une longue étiquette dépasse du conteneur Possibilités de retour à la ligne Envisagez la règle facultative pour les longues chaînes ci-dessous.
Seul Safari n’affiche pas le remplissage prévu aux extrémités Déclaration préfixée Vérifiez que -webkit-box-decoration-break: clone figure toujours dans la feuille de style.

Pour une étiquette fictive par ailleurs insécable, telle que AmberTileSequenceAmberTileSequence, vous pouvez ajouter overflow-wrap: anywhere à .sample-title. Il s’agit d’un fragment CSS facultatif à ajouter à la règle existante ; le reste de l’exemple ne change pas.

/* Optional addition inside the existing .sample-title rule */
overflow-wrap: anywhere;

Cette propriété permet à une chaîne autrement insécable de passer à la ligne si nécessaire pour éviter un débordement, sans insérer de trait d’union. Elle ajoute des possibilités de retour à la ligne ; elle ne crée pas de remplissage. Les expressions ordinaires contenant des espaces n’en ont peut-être pas besoin. MDN décrit les conditions d’utilisation d’overflow-wrap.

Tenez également compte de l’arrière-plan lui-même. Avec clone, les arrière-plans sont dessinés indépendamment pour chaque fragment ; un dégradé ou une image d’arrière-plan peut donc recommencer sur chaque ligne. Utilisez une couleur unie pour obtenir un surlignage uniforme sans motif répété. Le W3C décrit les arrière-plans indépendants des fragments.

Préserver le flux naturel du texte et les limites de façonnage

Utilisez un seul élément englobant autour de l’expression complète visée, plutôt que de créer des éléments distincts pour les lignes visibles aujourd’hui. Le balisage reste ainsi indépendant de la largeur actuelle de la fenêtre et du choix de police.

Évitez de découper un mot en éléments span de caractères avec remplissage pour simuler cet effet. La spécification CSS Text exige que le façonnage puisse se produire de part et d’autre des limites entre éléments en ligne lorsque du remplissage, des bordures ou des marges non nuls sur l’axe en ligne séparent des unités de caractères typographiques adjacentes. Une limite avec remplissage à l’intérieur d’un mot peut donc affecter le façonnage des glyphes. Consultez les règles du W3C sur le façonnage aux limites.

Pour ce titre, placez l’élément englobant aux limites de l’expression et laissez son texte interne continu. Vous éviterez ainsi d’introduire d’autres limites avec remplissage au milieu de l’expression. Cela ne garantit pas des glyphes ou des fins de ligne identiques d’un navigateur ou d’une police à l’autre ; examinez le rendu réel que vous comptez utiliser.

Et si le projet utilise Tailwind CSS ?

Dans un projet Tailwind existant, ajoutez box-decoration-clone à l’élément en ligne qui porte déjà l’arrière-plan et le remplissage du surlignage. La documentation actuelle de Tailwind associe cette utilitaire à box-decoration-break: clone. Son utilitaire box-decoration-slice sélectionne l’autre comportement. Consultez les utilitaires box-decoration-break de Tailwind.

Conservez la même exigence de compatibilité des navigateurs que dans l’exemple CSS classique : vérifiez dans la feuille de style générée la présence de la déclaration préfixée requise par Safari, et ajoutez-la au CSS personnalisé du projet si elle manque. L’utilitaire sélectionne le comportement de décoration ; il ne supprime pas les limites d’implémentation des navigateurs.

Il n’est pas nécessaire d’ajouter Tailwind uniquement pour cet effet. L’exemple local complet contient déjà le CSS nécessaire.

Un surlignage personnalisé peut-il utiliser le même remplissage ?

Une plage de l’API CSS Custom Highlight mise en forme via ::highlight() offre des possibilités différentes de celles d’un élément en ligne mis en forme. MDN répertorie les propriétés autorisées, notamment la couleur du texte, la couleur d’arrière-plan et les décorations de texte. Le remplissage et box-decoration-break ne font pas partie de cette liste. Consultez les limites documentées de mise en forme des surlignages personnalisés.

Si vous contrôlez le balisage et avez besoin d’un vrai remplissage sur chaque ligne, utilisez un élément en ligne englobant comme ci-dessus. Si vous devez conserver un surlignage fondé sur une plage sans éléments englobants, utilisez les propriétés de couleur et de décoration prises en charge et acceptez que cette API ne fournisse pas de boîtes de fragments avec remplissage.

Pour un titre ou une expression qui passe à la ligne, utilisez un seul élément en ligne englobant, regroupez son arrière-plan et son remplissage, puis appliquez les deux déclarations clone. Terminez en testant différentes largeurs et en vérifiant l’espacement vertical. Ces vérifications permettent d’établir si le surlignage fonctionne avec le flux réel du texte, et pas seulement à une largeur de fenêtre qui lui convient.

Sources