Geef tekst met items die door <br>-tags van elkaar zijn gescheiden een hangende inspringing door text-indent: 2em hanging each-line toe te passen op hun blokcontainer. Controleer of beide trefwoorden worden ondersteund; als oudere browsers van belang zijn, geef elk item een eigen blok en gebruik opvulling met een negatieve inspringing.

Deze handleiding is bedoeld voor iemand die een kleine HTML-pagina op een Mac bewerkt en wil dat elk item begint op de linker rand, terwijl vervolgregels verder naar binnen staan. De voorbeelden gebruiken synthetische tekst en vereisen alleen een eenvoudige teksteditor of code-editor en een browser.

Waarom een gewone hangende inspringing na een regeleindetag niet werkt

Er zijn twee verschillende regeleinden om rekening mee te houden. Een <br> maakt een expliciete regeleinde. Een zachte regelafbreking ontstaat wanneer de browser tekst passend maakt binnen de beschikbare breedte. In de gewenste opmaak geldt de eerste als het begin van een nieuw item en de tweede als een vervolgregel. WHATWG definieert <br> als een regeleinde; het maakt geen nieuwe alinea of itemcontainer aan. HTML Standard: The br element.

Een gewone negatieve text-indent beïnvloedt de eerste opgemaakte regel van een blok. Opvulling toevoegen kan dus een hangende inspringing voor dat blok opleveren, maar de uitspringing begint daardoor niet opnieuw na elke <br>. De daaropvolgende items blijven deel uitmaken van hetzelfde blok. MDN: text-indent.

De CSS-specificatie definieert de combinatie die hiervoor nodig is: each-line omvat de eerste regel en regels direct na geforceerde regeleinden; hanging keert die selectie om. Samen laten ze de zacht afgebroken vervolgregels inspringen, terwijl elke expliciet begonnen regel op de rand blijft. W3C: First Line Indentation.

Het gewenste resultaat ziet er zo uit. De regeleinden hieronder zijn ter illustratie; de browser bepaalt de daadwerkelijke afbreekpunten op basis van de beschikbare breedte en de lettertypemetrieken.

Item A begint aan de buitenrand en loopt door
    naar binnen wanneer de beschikbare breedte op is.
Item B begint ook aan de buitenrand en heeft
    een eigen ingesprongen vervolgregel.
Item C is kort.

Kies een methode voordat je de pagina wijzigt

Kies je aanpak op basis van de bestaande opmaak en de vereiste browsers. Deze beslissingstabel volgt uit de gedocumenteerde werking van inspringingen en de browserondersteuningsgegevens; het is een hulpmiddel voor de implementatie, geen aparte browserfunctie.

Jouw situatie Aanbevolen aanpak
Expliciete regeleinden maken deel uit van één tekstgedeelte en de ondersteunde browsers volstaan Behoud de regeleinden en gebruik hanging each-line
Items zijn afzonderlijke alinea's of lijstitems Geef elk item de juiste structurele opmaak
De hangende inspringing moet in oudere browsers zichtbaar zijn Gebruik één blok per item met opvulling en een negatieve inspringing
Je kunt alleen CSS bewerken en een oudere browser ondersteunt de trefwoorden niet Behoud een leesbare opmaak zonder inspringing of vraag om een wijziging van de HTML-opmaak

Leid ondersteuning voor trefwoorden niet af uit ondersteuning voor gewone text-indent. De actuele compatibiliteitsgegevens van MDN vermelden ondersteuning voor zowel hanging als each-line vanaf Safari 15, Firefox 121 en Chrome 146. Oudere installaties kunnen gewone inspringing ondersteunen, maar deze combinatie afwijzen. MDN browser compatibility data: text-indent.

Controleer ook of de regeleinden de juiste structuur uitdrukken. WHATWG reserveert <br> voor regeleinden die bij de inhoud horen en zegt dat de tag geen thematische groepen binnen een alinea mag scheiden. Afzonderlijke alinea's horen in alineaelementen; een verzameling lijstitems hoort lijstmarkering te gebruiken. HTML Standard: The br element, HTML Standard: Grouping content.

Behoud de regeleindetags met de native CSS-oplossing

Het volgende complete HTML-document laat de methode zien waarbij regeleinden behouden blijven. Plak het op je Mac in een eenvoudige teksteditor of code-editor, sla het op als hanging-indent.html en open dat bestand in een browser. Gebruik een HTML-bestand en geen document met opmaak.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Break-separated hanging indent</title>
  <style>
    body {
      margin: 2rem;
      font-family: system-ui, sans-serif;
      line-height: 1.6;
    }

    .entries {
      max-inline-size: 30rem;
      margin: 0;
      white-space: normal;
      text-align: start;
      text-indent: 0;
    }

    @supports (text-indent: 2em hanging each-line) {
      .entries {
        text-indent: 2em hanging each-line;
      }
    }
  </style>
</head>
<body>
  <h1>Sample entries</h1>
  <p class="entries">Entry A: A long sample line describing a pale rectangular panel, a narrow heading area, and a small square beside the heading.<br>
Entry B: Another long sample line describing a circular tile, an open space beneath it, and a row of neutral labels.<br>
Entry C: A short sample line.</p>
</body>
</html>

De voorwaarde @supports controleert de volledige declaratie voordat die wordt toegepast. Browsers die de combinatie niet ondersteunen, behouden de expliciet ingestelde opmaak zonder inspringing. Met feature queries wordt CSS voorwaardelijk toegepast op basis van browserondersteuning. MDN: @supports.

Pas de inspringing toe op .entries, het blok dat de tekst bevat. De betreffende eigenschap geldt voor blokcontainers; de declaratie op de <br> zetten biedt geen container voor het volgende item. MDN: text-indent.

De waarde 2em is een aanpasbare ontwerpkeuze. Probeer na controle van de smalle opmaak een kleinere of grotere waarde. Hiermee krijgt de vervolgregel een vaste inspringing; de waarde meet niet de breedte van Item A: en lijnt tekst niet automatisch uit onder het eerste woord na een label met variabele lengte.

Gebruik afzonderlijke blokken als elk item in iedere browser moet inspringen

Als elk item een zelfstandige alinea is, wijzig dan de HTML-opmaak zodat elk item een eigen eerste regel heeft. Het volgende complete alternatief verwijdert de scheidende regeleinden en past de traditionele berekening voor een hangende inspringing afzonderlijk toe op elke alinea.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Paragraph hanging indents</title>
  <style>
    body {
      margin: 2rem;
      font-family: system-ui, sans-serif;
      line-height: 1.6;
    }

    .entries {
      max-inline-size: 30rem;
      text-indent: 0;
    }

    .entry {
      margin: 0;
      padding-inline-start: 2em;
      text-indent: -2em;
      white-space: normal;
      text-align: start;
    }
  </style>
</head>
<body>
  <h1>Sample entries</h1>
  <div class="entries">
    <p class="entry">Entry A: A long sample paragraph describing a pale rectangular panel, a narrow heading area, and a small square beside the heading.</p>
    <p class="entry">Entry B: Another long sample paragraph describing a circular tile, an open space beneath it, and a row of neutral labels.</p>
    <p class="entry">Entry C: A short sample paragraph.</p>
  </div>
</body>
</html>

De opvulling verplaatst het begin van de alinea-inhoud 2em naar binnen. De negatieve inspringing verplaatst alleen de eerste regel evenveel terug. Afgebroken regels behouden de opgevulde beginpositie. De waarden moeten gelijk zijn: als je er maar één wijzigt, verandert de positie waar de eerste regel begint. Negatieve inspringing wordt gedocumenteerd door MDN; padding-inline-start voegt opvulling toe aan de logische beginrand. MDN: text-indent, MDN: padding-inline-start.

Bij een illustratieve lettergrootte van 16 pixels komt een inspringing van 2em overeen met 32 pixels: de vervolgregel begint 32 pixels naar binnen en de aanpassing van de eerste regel is −32 pixels. Dit is een berekening voor het voorbeeld, geen gemeten weergaveresultaat.

Verwijder de oude scheidingstekens wanneer je deze structuur overneemt. Behoud elk volledig item en de bestaande inline-opmaak ervan binnen de nieuwe alinea. Gebruik lijstitems als de inhoud een lijst is; het alinea-voorbeeld is specifiek bedoeld voor zelfstandige alinea's. HTML Standard: Grouping content.

Controleer de regelafbreking en tekststroom voordat je klaar bent

Test de pagina op een breedte waarbij beide lange items worden afgebroken. Maak het venster vervolgens breder totdat ze op één regel passen. Gebruik de volgende controles om een inspringingsprobleem te onderscheiden van een probleem met de regelafbreking of de structuur.

  1. Controleer het begin van elk item. In het voorbeeld waarin de regeleinden behouden blijven, hoort de tekst na elke <br> terug te keren naar de buitenrand. Gebeurt dat niet, controleer dan of de volledige combinatie van trefwoorden wordt ondersteund.
  2. Controleer elke vervolgregel. Lange items horen naar binnen te springen. Korte items horen op de rand te blijven, zonder extra voorafgaande spaties.
  3. Controleer de smalste kolom die je verwacht te gebruiken. Verklein de inspringing als die te veel van de beschikbare regelbreedte inneemt.
  4. Controleer de daadwerkelijke inhoud. Behoud de woorden, inline-opmaak en beoogde expliciete regeleinden van elk item wanneer je het naar een afzonderlijk blok verplaatst.

Als niets wordt afgebroken, controleer dan white-space. In het voorbeeld wordt normal gebruikt. Dit laat witruimte uit de bron samenvallen en maakt regelafbreking mogelijk. pre behoudt witruimte, maar voorkomt gewone zachte regelafbreking; pre-wrap behoudt witruimte en staat die wel toe. Inspringing wordt niet zichtbaar op een vervolgregel die nooit ontstaat. MDN: white-space.

Vermijd spaties toe te voegen om de inspringing na te bootsen. Met white-space: normal worden reeksen spaties samengevoegd. Voeg ook geen extra regeleindetags toe op de afbreekpunten van het huidige venster: daarmee worden door de browser bepaalde vervolgregels expliciete beginregels en verandert de manier waarop each-line ze behandelt. MDN: white-space, W3C: First Line Indentation.

Laat de browser verantwoordelijk blijven voor regelafbreking en de vormgeving van lettertekens. Splits een item niet op in omhullende elementen voor afzonderlijke tekens om de zichtbare regels te berekenen. W3C documenteert omstandigheden waarin grenzen tussen inline-elementen de vormgeving onderbreken, waaronder inline-opvulling, randen of marges tussen tekens met een niet-nulwaarde. Voor deze taak voorkom je zulke extra grenzen binnen woorden door hele items op de bedoelde grenzen af te breken. W3C: Shaping Across Element Boundaries.

Rond af met de structuur die bij je inhoud past: behoud betekenisvolle expliciete regeleinden met hanging each-line, of geef zelfstandige items elk hun eigen blok. Controleer dat elk item op de rand begint en dat alleen de natuurlijk afgebroken vervolgregels naar binnen springen bij de breedtes die je wilt gebruiken.

Bronnen