Pas box-decoration-break: clone toe op een inline-element, samen met de achtergrond en padding, om de padding aan beide uiteinden van elke afgebroken regel met markering te behouden. Neem de declaratie met het WebKit-voorvoegsel op voor Safari. MDN legt decoratie van fragmenten uit.

Deze gids is bedoeld voor iemand die op een Mac een webpagina bewerkt en wil dat een gemarkeerde frase op natuurlijke wijze wordt afgebroken binnen een kop of alinea. De taak is elke resulterende regel een eigen achtergrond met padding te geven, terwijl de browser de tekstafbreking bepaalt.

Waarom verdwijnt de padding waar de markering wordt afgebroken?

De beginwaarde van box-decoration-break is slice. Wanneer een inline-vak over meerdere regels wordt afgebroken, behandelt die waarde de decoratie als één doorlopend vak dat in fragmenten wordt gesneden. Aan de afgebroken randen wordt geen padding toegevoegd. Met clone krijgt elk fragment een eigen padding, rand en achtergronddecoratie. De W3C definieert beide fragmentatiegedragingen.

Dat onderscheid verklaart een veelvoorkomend resultaat: meer horizontale padding maakt het begin en einde van de hele frase ruimer, maar de randen van tussenliggende regels blijven krap. De ontbrekende instelling bepaalt wat er bij die afbreekpunten gebeurt; alleen de padding verhogen verandert dat niet.

Houd de markering als inline-vak. Een blokachtergrond versiert de omvattende rechthoek, terwijl een inline-markering de tekststroom volgt. MDN documenteert het verschillende formaat- en afstandsgedrag van block-, inline- en inline-block-vakken. Bekijk de uitleg over het boxmodel van MDN.

Maak een compleet voorbeeld op je Mac

Maak in een code-editor een plattetekstbestand met de naam wrapped-highlight.html, plak het volledige voorbeeld hieronder erin en sla het op. Open het bestand in je desktopbrowser. Je hoeft geen pakket te installeren en hebt geen externe stylesheet of JavaScript nodig.

De voorbeeldkop staat voor een eenvoudige pagina-introductie. Eén span omvat de volledige frase met decoratie. WHATWG definieert het spanelement als een generieke tekstcontainer zonder eigen betekenis, waardoor het geschikt is voor deze puur visuele groepering. Lees de definitie van span in de HTML-standaard.

<!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>

Maak het browservenster smaller totdat de kop wordt afgebroken en maak het daarna weer breder. Bekijk het begin en einde van elke gemarkeerde regel. Het beoogde resultaat is een afzonderlijk achtergrondfragment met padding rond elke regel, waarbij dezelfde opmaak behouden blijft als de afbreking verandert. De voorbeelden van MDN gebruiken hetzelfde paar declaraties met en zonder voorvoegsel. Bekijk de gedocumenteerde syntaxis en voorbeelden.

De afmetingen hier zijn illustratieve ontwerpkeuzes. Pas eerst de horizontale padding, 0.3em, aan als de uiteinden te krap of te ruim lijken. Pas de verticale padding, 0.08em, afzonderlijk aan. Houd de test met afgebroken tekst actief terwijl je een van beide waarden aanpast.

Om het gedrag te vergelijken, wijzig je beide decoratiedeclaraties tijdelijk van clone naar slice, sla je het bestand op en laad je de pagina opnieuw. Zet ze daarna allebei terug op clone. Door beide te wijzigen, hangt de vergelijking niet af van welke declaratie je browser herkent.

Welke details over browserondersteuning zijn van belang op een Mac?

Behoud beide declaraties in het voorbeeld. De actuele compatibiliteitsgegevens van MDN vermelden ondersteuning voor de standaardproperty vanaf Chrome 130 en Firefox 32. Voor Safari vermelden ze ondersteuning met het voorvoegsel -webkit- en beperken ze die implementatie tot inline-elementen. Bekijk de compatibiliteitsgegevens van MDN voor browsers.

Die beperking tot inline-elementen past bij deze taak: een frase die over tekstregels wordt afgebroken, is inline-fragmentatie. Dit betekent niet dat er gelijkwaardige ondersteuning is voor een blok dat wordt gefragmenteerd over kolommen of afgedrukte pagina's. Houd die lay-outgevallen gescheiden wanneer je het resultaat beoordeelt.

Test het bestand in de Mac-browsers die voor je pagina van belang zijn. Gebruik een smal en een breed venster, vergroot daarna de paginatekst en herhaal de test. Ga ervan uit dat het aantal regels kan variëren; je acceptatiecriterium is een consistente padding op de fragmenten die elke browser daadwerkelijk produceert.

Als een omgeving geen van beide declaraties herkent, is de verbetering waarbij fragmenten per regel worden gekloond niet beschikbaar. Zorg dat de onderliggende tekst en achtergrond bruikbaar blijven, of kies voor een blok met padding als één rechthoekige achtergrond aan de ontwerpeis voldoet. Dat verandert de vormgeving en moet daarom een bewuste ontwerpkeuze zijn.

Hoe voorkom je overlappende achtergronden en onhandige tekstafbreking?

Padding en regelafstand lossen verschillende problemen op. Bij een normaal inline-vak kan boven- en onderpadding het ingekleurde gebied vergroten zonder dat de omliggende inhoud verder weg komt te staan. Daardoor kunnen gemarkeerde regels verticaal overlappen als je de verticale padding verhoogt. MDN documenteert dit gedrag van inline-vakken expliciet. Bekijk hoe inline-padding en omliggende inhoud zich gedragen.

Pas de line-height van de kop aan in combinatie met de verticale padding van de markering. Het voorbeeld begint bewust met een ruime 1.65. Verklein die waarde geleidelijk als de tussenruimte te groot lijkt en controleer telkens de smalste lay-out. Er bestaat geen enkele afstandswaarde die voor elk lettertype en elke decoratie geschikt is.

Gebruik deze diagnosevolgorde om de oorzaak vast te stellen voordat je meer CSS wijzigt:

Wat je ziet Controleer eerst Volgende actie
Alleen aan de buitenste uiteinden van de frase is padding aanwezig Decoratiegedrag Pas beide declaraties van clone toe op het gemarkeerde inline-element.
Eén grote rechthoekige achtergrond Welk element de achtergrond heeft Zet de achtergrond en padding op de binnenste inline-span.
Gemarkeerde regels raken elkaar verticaal Verticale padding en regelhoogte van het bovenliggende element Verklein de verticale padding of vergroot de regelhoogte.
Een lang label steekt buiten de container uit Beschikbare mogelijkheden voor tekstafbreking Overweeg de optionele regel voor lange woorden hieronder.
Alleen Safari mist de bedoelde padding aan de uiteinden Declaratie met voorvoegsel Controleer of -webkit-box-decoration-break: clone in de stylesheet staat.

Voor een verder onafbreekbaar voorbeeldlabel zoals AmberTileSequenceAmberTileSequence kun je overflow-wrap: anywhere toevoegen aan .sample-title. Dit is een optioneel CSS-fragment dat je aan de bestaande regel kunt toevoegen; de rest van het voorbeeld blijft hetzelfde.

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

Hierdoor kan een string die anders niet kan worden afgebroken, indien nodig toch worden afgebroken om overlopen te voorkomen, zonder een koppelteken in te voegen. Dit biedt extra afbreekmogelijkheden; het voegt geen padding toe. Bij gewone frases met spaties is dit mogelijk niet nodig. MDN documenteert de voorwaarden voor overflow-wrap.

Denk ook aan de achtergrond zelf. Met clone wordt de achtergrond voor elk fragment afzonderlijk getekend, waardoor een verloop of achtergrondafbeelding op elke regel opnieuw kan beginnen. Gebruik een effen kleur als je een egale markering zonder herhaald afbeeldingspatroon wilt. De W3C beschrijft achtergronden van afzonderlijke fragmenten.

Behoud de natuurlijke tekststroom en grenzen voor glyphvorming

Gebruik één wrapper rond de volledige bedoelde frase in plaats van voor de huidige zichtbare regels afzonderlijke wrappers te maken. Zo blijft de markup onafhankelijk van de huidige vensterbreedte en lettertypekeuze.

Splits een woord niet op in spans met padding rond afzonderlijke tekens om dit effect na te bootsen. De CSS Text-specificatie vereist dat glyphvorming over inline-grenzen wordt afgebroken wanneer niet-nul padding, randen of marges op de inline-as aangrenzende typografische tekeneenheden van elkaar scheiden. Een grens met padding binnen een woord kan daardoor invloed hebben op de glyphvorming. Bekijk de regels van de W3C voor glyphvorming over grenzen heen.

Plaats voor deze kop de wrapper aan de grenzen van de frase en houd de tekst binnenin aaneengesloten. Zo voorkom je dat je extra grenzen met padding binnen de frase introduceert. Dit garandeert niet dat glyphs of regeleinden in verschillende browsers en lettertypen identiek zijn; bekijk de daadwerkelijke weergave die je wilt gebruiken.

Wat als het project Tailwind CSS gebruikt?

Voeg in een bestaand Tailwind-project box-decoration-clone toe aan het inline-element dat al de achtergrond en padding van de markering bevat. De actuele documentatie van Tailwind koppelt deze utility aan box-decoration-break: clone. De utility box-decoration-slice kiest het andere gedrag. Bekijk de utilities van Tailwind voor box-decoration-break.

Houd rekening met dezelfde browservereiste als in het voorbeeld met gewone CSS: controleer waar Safari-ondersteuning nodig is of de gegenereerde stylesheet de declaratie met voorvoegsel bevat, en voeg die via de aangepaste CSS van het project toe als dat niet zo is. De utility kiest het decoratiegedrag, maar heft beperkingen van browserimplementaties niet op.

Je hoeft Tailwind niet alleen voor dit effect te introduceren. Het complete lokale voorbeeld bevat de benodigde CSS al.

Kan een aangepaste markering dezelfde padding gebruiken?

Een bereik van de CSS Custom Highlight API dat is opgemaakt via ::highlight() heeft andere mogelijkheden dan een opgemaakt inline-element. MDN noemt de eigenschappen die zijn toegestaan, waaronder tekstkleur, achtergrondkleur en tekstopmaak. Padding en box-decoration-break vallen buiten die toegestane set. Lees de gedocumenteerde beperkingen voor de opmaak van aangepaste markeringen.

Als je de markup beheert en echte padding nodig hebt op elke afgebroken regel, gebruik dan een inline-wrapper zoals hierboven. Als je markering op basis van bereiken zonder wrappers moet behouden, gebruik dan de ondersteunde kleur- en decoratie-eigenschappen en accepteer dat deze API geen gepadde fragmentvakken biedt.

Gebruik voor een afgebroken paginakop of frase één inline-wrapper, zet de achtergrond en padding samen en pas beide declaraties van clone toe. Test tot slot verschillende breedtes en controleer de verticale tussenruimte. Zo stel je vast of de markering met de daadwerkelijke tekststroom werkt, en niet alleen bij één handig vensterformaat.

Bronnen