Kies bij geneste HTML-tekst voor isolatie wanneer elke frase zijn eigen richting moet behouden zonder de omringende tekst te verstoren. Gebruik inbedding alleen wanneer interactie met de omringende tekst opzettelijk is, en een override wanneer het ontwerp expliciet een geforceerde tekenvolgorde vereist.

Deze gids helpt iemand die een HTML-pagina op een Mac bewerkt om het juiste mechanisme te kiezen, geneste labels en leestekens te behouden en het resultaat in een desktopbrowser te controleren. De voorbeelden gebruiken verzonnen labels, getallen en geometrische tekens.

Welk mechanisme past bij de lay-outtaak?

Begin met twee vragen: moet de browser de gewone bidirectionele volgorde binnen de frase toepassen, en moet die frase invloed hebben op de volgorde van de omringende tekst? Die keuzes leiden tot de volgende praktische vergelijking. In de referentie van MDN voor unicode-bidi worden de onderliggende CSS-gedragingen beschreven.

Vereiste Mechanisme Aanbevolen HTML-aanpak
Een frase met een bekende richting een eigen grens geven Isolatie Een bestaand inline-element met dir="ltr" of dir="rtl"
Een frase met onbekende richting isoleren Isolatie met automatische richting bdi, of een bestaand inline-element met dir="auto"
Een richtingsbereik maken dat de volgorde van omringende tekst blijft beïnvloeden Inbedding Een gespecialiseerd CSS-geval met unicode-bidi: embed
De tekenvolgorde forceren en het resultaat isoleren Geïsoleerde override bdo met expliciete dir="ltr" of dir="rtl"
De tekenvolgorde forceren en interactie met de omringende tekst behouden Niet-geïsoleerde override Een gespecialiseerd CSS-geval met unicode-bidi: bidi-override

Gebruik voor gewone HTML-auteurschap richtingsmarkering als uitgangspunt. Het W3C raadt aan elke frase met een tegengestelde richting strak te omwikkelen en geneste frasen met geneste markup aan te geven. Zo zijn de bedoelde grenzen zichtbaar in het document. W3C: Inline-markup en bidirectionele tekst in HTML.

Hoe markeer je geneste geïsoleerde tekst?

Geef elke volledige frase een eigen richtingsgrens. Als een bestaand inline-element al precies die frase bevat, voeg daar dir aan toe. Introduceer anders een span. Houd leestekens die bij de frase horen binnen de wrapper; houd de leestekens van de omringende zin erbuiten. Het W3C noemt dit de frase ‘strak omwikkelen’. Richtlijnen van het W3C voor inline-markup.

Voor een synthetisch vormlabel dat bedoeld is om van rechts naar links te lopen en een van links naar rechts leesbare identificatie bevat, kan de structuur er in dit illustratieve fragment zo uitzien:

<p dir="ltr">
  Tile <span dir="rtl">● <span dir="ltr">A1 + B2</span> ■</span>: 12 items.
</p>

Er zijn drie weloverwogen bereiken: de buitenste zin, de vormreeks en de geneste identificatie. De telling hoort bij de zin en blijft daarom buiten de vormreeks. Als alleen de buitenste frase wordt gemarkeerd, heeft de binnenste identificatie geen eigen expliciete grens. Deze nesting volgt de door het W3C aanbevolen structuur voor richtingsveranderingen. Richtlijnen van het W3C voor geneste frasen.

Wanneer de richting van het ingevoegde label onbekend is, biedt bdi isolatie en wordt standaard automatische richtingsdetectie gebruikt. Een gewone span zonder dir biedt niet dezelfde standaardinstelling. WHATWG specificeert dat bdi standaard auto gebruikt in plaats van op de gebruikelijke manier de richting over te nemen. HTML Standard: Het element bdi.

Automatische richting is een heuristiek op basis van het eerste sterk richtingsbepalende teken, met gespecificeerde uitzonderingen voor geneste richtingselementen. De heuristiek begrijpt de bedoelde betekenis van een label niet. Een label dat begint met A1 geeft daarom een aanwijzing van links naar rechts, zelfs als latere inhoud op een andere weergave duidt. Gebruik een expliciete richting als je de vereiste al kent. MDN: Het globale attribuut dir.

Een label dat alleen vormen en cijfers bevat, vereist extra aandacht: het bevat geen sterk richtingsbepalende letter. Voor de gewone inline-voorbeelden hier valt het HTML-algoritme terug op een richting van links naar rechts wanneer automatische richtingsdetectie geen geschikt teken vindt. Geef dir="rtl" op als deze synthetische reeks een basisrichting van rechts naar links moet hebben. HTML Standard: Het attribuut dir.

Wanneer zijn inbedding en overrides geschikt?

Inbedding maakt een extra richtingsniveau aan en behoudt de gewone tekenvolgorde daarbinnen. De grens ervan heeft ook een directioneel effect op de omringende tekst. Isolatie geeft de inhoud een eigen bereik en zorgt ervoor dat de reeks zich neutraal gedraagt tegenover de omgeving. De specificatie van het W3C maakt expliciet onderscheid tussen deze interne en externe effecten. CSS Writing Modes Level 3: Inbeddingen en overrides.

Kies alleen voor inbedding wanneer die externe invloed op de richting deel uitmaakt van het beoogde resultaat. Voor een onafhankelijk genest label gevolgd door een afzonderlijke telling is isolatie meestal de juiste keuze. Een dieper nestingniveau is op zichzelf geen reden om embed te kiezen: geïsoleerde spans kunnen zelf nog meer richtingsspans bevatten.

Een override verandert de interne regel. Deze dwingt de directe tekst in de opgegeven richting tot een reeks, in plaats van het gewone algoritme de richtingssegmenten te laten bepalen. isolate-override voegt een isolatiegrens rond die geforceerde volgorde toe. Dit zijn afzonderlijke gedragingen, geen sterkere instellingen om een gewone frase te corrigeren. MDN: Waarden van unicode-bidi.

Gebruik voor een bewuste demonstratie van de tekenvolgorde bdo met dir="ltr" of dir="rtl". De HTML Standard vereist een expliciete richting en verbiedt auto op dit element. De weergaveregels gebruiken unicode-bidi: isolate-override, waardoor het huidige gedrag van HTML bdo isolatie omvat. HTML Standard: Het element bdo, HTML Standard: Weergave van bidirectionele tekst.

Dit onderscheid is van belang voor Latijnse labels: een basisrichting van rechts naar links betekent niet ‘elk Latijns teken omkeren’. Een override kan die volgorde afdwingen. Zelfs dan behouden de afzonderlijke glyphs hun oriëntatie; bdo tekent lettervormen niet achterstevoren. MDN: Het element bdo.

Probeer een complete vergelijkingspagina op je Mac

De volgende zelfstandige pagina vereist alleen een browser en een editor voor platte tekst. De eerste twee rijen vergelijken gewone richtingsverwerking met een geforceerde volgorde. De overige rijen laten de keuzes voor nesting en grenzen zien. De rij met CSS-inbedding is opgenomen als demonstratie van het mechanisme; gebruik de HTML-isolatierij als uitgangspunt voor een gewoon, onafhankelijk label.

Kies in TextEdit File > New en vervolgens Format > Make Plain Text. Plak de volledige code hieronder. Kies File > Save, noem het bestand bidi-demo.html en selecteer Use .html als daarom wordt gevraagd. Dit zijn de door Apple gedocumenteerde stappen voor het maken van een HTML-bestand. Open het opgeslagen bestand in je desktopbrowser. Apple: Werken met HTML-documenten in TextEdit op de Mac.

<!doctype html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bidi boundary comparison</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      max-width: 44rem;
      margin: 2rem auto;
      padding: 0 1rem;
      line-height: 1.7;
    }
    .sample {
      border: 1px solid #777;
      padding: 0.75rem;
    }
    .scope {
      background: #eeeeee;
      outline: 1px dotted #555;
    }
    .embedding {
      direction: rtl;
      unicode-bidi: embed;
    }
  </style>
</head>
<body>
  <h1>Bidi boundary comparison</h1>

  <h2>Ordinary right-to-left base</h2>
  <p class="sample">Before <span class="scope" dir="rtl">ABC</span> after.</p>

  <h2>Forced right-to-left sequence</h2>
  <p class="sample">Before <bdo class="scope" dir="rtl">ABC</bdo> after.</p>

  <h2>Nested isolation</h2>
  <p class="sample">Tile <span class="scope" dir="rtl">&#x25CF; <span dir="ltr">A1 + B2</span> &#x25A0;</span>: 12 items.</p>

  <h2>Embedding comparison</h2>
  <p class="sample">Tile <span class="scope embedding">&#x25CF; <span dir="ltr">A1 + B2</span> &#x25A0;</span>: 12 items.</p>

  <h2>Automatic isolated direction</h2>
  <p class="sample">Tile <bdi class="scope">A1 (12)</bdi>: 12 items.</p>
</body>
</html>

Bekijk de eerste twee rijen voordat je iets wijzigt. De gewone richtingsspan hoort ABC in de volgorde van letters van links naar rechts te behouden. De override hoort CBA weer te geven wanneer je vanaf de linkerrand leest. Dit is een verwachting op basis van de gedocumenteerde mechanismen, geen gemeten browserresultaat. MDN: Gedrag van bdo.

Vergelijk vervolgens de rijen met geneste isolatie en inbedding. Laat de woorden en telling ongewijzigd terwijl je de vormreeks en de leestekens aan de grens ervan bekijkt. De mechanismen verschillen, zelfs als een bepaald voorbeeld er hetzelfde uitziet: isolatie en inbedding leveren niet gegarandeerd voor elke tekenreeks zichtbaar verschillende resultaten op. Het gedocumenteerde onderscheid betreft de manier waarop het bereik deelneemt aan de omringende bidi-resolutie. W3C: CSS Writing Modes Level 3.

Verplaats voor een nuttige grenstest de dubbele punt naar binnen, in de buitenste richtingsspan, sla op en laad de pagina opnieuw. Zet hem daarna weer buiten de span. Je verandert welke frase eigenaar is van het leesteken; beoordeel het resultaat daarom op basis van die bedoelde toewijzing. Maak het browservenster ten slotte smaller om dezelfde grenzen te controleren wanneer de zin omloopt.

De achtergrond en de gestippelde omtrek geven aan welke span wordt getest. Ze helpen bij de inspectie. Ze bepalen geen richting en zorgen niet voor isolatie.

Hoe stel je vast waarom een resultaat er nog steeds verkeerd uitziet?

Werk vanuit de kleinste getroffen frase naar buiten toe. Als je meerdere richtingseigenschappen tegelijk wijzigt, wordt het lastig vast te stellen welke grens het resultaat veroorzaakte.

  1. Controleer de wrapper. Bevat deze het volledige label en alleen dat label? Leestekens en tellingen van de zin blijven erbuiten, tenzij ze bij het label horen.
  2. Controleer geneste frasen. Een onafhankelijk gerichte identificatie binnen een andere frase heeft mogelijk een eigen wrapper met dir nodig.
  3. Controleer de automatische richting. Vervang auto door de expliciete richting als de bedoelde basisrichting bekend is. Dit is vooral nuttig voor synthetische vormen en cijfers.
  4. Controleer overrides. Als de tekenvolgorde onverwacht wordt geforceerd, controleer dan bdo en CSS-declaraties van unicode-bidi.
  5. Controleer de CSS-cascade. Een auteursregel kan de richtingsopmaak van de browser vervangen. Verwijder experimentele bidi-regels en test de HTML-markup opnieuw.

De eerste twee controles volgen de richtlijnen van het W3C voor omwikkelen en nesting. De controle van de automatische richting volgt de documentatie van MDN over dir; de laatste controles volgen de weergaveregels van HTML.

Maak ook onderscheid tussen volgorde en uitlijning. text-align: right plaatst inline-inhoud tegen de rechterrand van een blok; het maakt geen geïsoleerde frase aan. text-align: start volgt de richting van het blok, waardoor een wijziging van de basisrichting ook kan veranderen welke rand wordt gebruikt. Stel het probleem met de tekenvolgorde apart vast van de positie van de regel. MDN: text-align.

WHATWG documenteert bdi en bdo als ondersteund in alle huidige browserengines. Dat bevestigt geen ondersteuning in elke oudere browser of ingebouwde viewer. Test bij controle van een andere weergaveomgeving het daadwerkelijke doel en behoud de directionele HTML-markup: MDN raadt dit aan boven isolatie met alleen CSS, omdat styling mogelijk wordt genegeerd. HTML Standard: Semantiek op tekstniveau, MDN: Gebruiknotities voor bdi.

Sluit af met één expliciete keuze voor elke geneste frase: de basisrichting, de grens en de vraag of de interne tekenvolgorde gewoon moet blijven. Begin voor een onafhankelijk label met isolatie. Behoud inbedding of een override alleen wanneer de specifieke, gedocumenteerde werking ervan voor de lay-out vereist is.

Bronnen