Gebruik HTML dir om de basistekstrichting in te stellen en CSS flex-direction: row-reverse om de stroomrichting van een flexrij om te keren. Bepaal bij het rangschikken van kaarten op een openbare pagina vanaf je Mac eerst of je de tekstrichting, de itemvolgorde of de uitlijning wilt wijzigen.

Deze handleiding gaat ervan uit dat je de HTML en CSS van een pagina in een teksteditor bewerkt en een voorbeeld ervan bekijkt in een desktopbrowser. De taak is drie neutrale tegels—Alpha, Beta en Gamma—te rangschikken, met bewust gekozen tekstgedrag en documentvolgorde.

Wat verandert elke richtingsinstelling precies?

Het HTML-attribuut dir beschrijft de basistekstrichting van een element. De expliciete waarden zijn ltr en rtl; met auto bepaalt de browser de richting aan de hand van de inhoud. WHATWG moedigt auteurs aan om de tekstrichting via HTML aan te geven, zodat die informatie ook zonder CSS beschikbaar blijft. HTML Standard: het attribuut dir.

De CSS-eigenschap direction bepaalt eveneens de basistekstrichting en is van invloed op het lay-outgedrag. De eigenschap wordt overgeërfd, dus direction: rtl instellen op een container kan ook gevolgen hebben voor diens afstammelingen. MDN raadt aan waar mogelijk HTML dir te gebruiken. Beschouw een CSS-richtingsoverschrijving als een bewuste keuze voor de tekstrichting, niet als een handige manier om vakken te verplaatsen. MDN: direction.

De CSS-eigenschap flex-direction bepaalt de hoofdas van een flexcontainer. Een row volgt de inline-as van de huidige schrijfmodus; row-reverse wisselt de richtingen van het begin en het einde van de hoofdas om. De eigenschap verandert de richting waarin items worden neergezet, maar laat hun bronvolgorde intact. W3C: Flex Flow Direction.

Deze mechanismen beïnvloeden elkaar. Bij horizontaal schrijven begint een flexrij met ltr links, terwijl een flexrij met rtl rechts begint. Met row-reverse wordt de beginrichting in beide gevallen omgekeerd. Daarom betekent row-reverse niet altijd dat het eerste item rechts verschijnt. MDN: flex-direction.

Welke instelling past bij het gewenste resultaat?

Schrijf vóór je iets wijzigt concreet op wat je wilt bereiken: “Laat de Engelse labels ongewijzigd, zet de tegels in omgekeerde visuele volgorde en houd de groep rechts.” Zo’n formulering maakt duidelijk dat je afzonderlijke keuzes maakt voor tekst, itemstroom en uitlijning.

Gewenst resultaat Geschikt uitgangspunt Waarop letten
De basistekstrichting van de inhoud instellen HTML dir="ltr" of dir="rtl" Pas dit toe op het bereik waarvan de tekst die richting nodig heeft.
De visuele volgorde van alle items in een flexrij omkeren flex-direction: row-reverse Controleer eerst de bestaande richting van de container.
Een ongewijzigde rij naar de rand aan het einde van de hoofdas verplaatsen justify-content: flex-end Zorg dat er vrije ruimte is voor de uitlijning.
De betekenisvolle volgorde overal wijzigen De bron-elementen herschikken Controleer of de resulterende leesvolgorde logisch is.
Geselecteerde items visueel verplaatsen Afzonderlijke waarden voor order Controleer het verschil tussen de visuele volgorde en de bronvolgorde.

Het onderscheid tussen omkering en uitlijning is belangrijk. Bij een rij met ltr kan justify-content: flex-end Alpha, Beta en Gamma samen rechts plaatsen zonder hun volgorde om te keren. Uitlijning verdeelt de beschikbare ruimte langs de hoofdas; flex-end verwijst naar de kant van de hoofdas aan het einde van de flexcontainer. Het effect kan verdwijnen wanneer flexibele items die ruimte innemen. MDN: justify-content.

Als lezers items in een bepaalde volgorde moeten tegenkomen, leg die volgorde dan vast in het document zelf. W3C waarschuwt uitdrukkelijk tegen het gebruik van flexomkering of order om een onjuiste bronvolgorde te compenseren. W3C: Ordering and Orientation.

Voorspel de vier combinaties voordat je de pagina wijzigt

De volgende vergelijking is afgeleid van de gedocumenteerde asregels. Er wordt uitgegaan van writing-mode: horizontal-tb, één flexregel, gelijke waarden voor order en de bronvolgorde Alpha, Beta, Gamma. “Weergave van links naar rechts” beschrijft de fysieke posities van de tegels op het scherm.

Richting van container Flexrichting Eerste tegel begint aan Weergave van links naar rechts
ltr row Links Alpha, Beta, Gamma
ltr row-reverse Rechts Gamma, Beta, Alpha
rtl row Rechts Gamma, Beta, Alpha
rtl row-reverse Links Alpha, Beta, Gamma

De tweede en derde rij kunnen er hetzelfde uitzien als de inhoud uit eenvoudige rechthoeken bestaat. Toch verschillen hun tekstrichtingsinstellingen. De vierde combinatie verklaart een veelvoorkomende verrassing: als je zowel rtl als row-reverse toepast, verloopt de itemstroom van links naar rechts. MDN beschrijft dit richtingsafhankelijke gedrag. MDN: flex-direction.

De basistekstrichting is ook van invloed op interpunctie en de volgorde van tekstfragmenten met een eigen richting. rtl instellen betekent niet dat elk teken in een Engels woord simpelweg wordt omgekeerd. Een label kan herkenbaar blijven, terwijl de interpunctie op een onverwachte plek verschijnt. Eenvoudige tegels zijn daarom handig om de plaatsing van vakken te onderzoeken, maar volstaan niet om tekstgedrag te beoordelen. MDN: opmerkingen over het gebruik van dir.

Probeer een complete vergelijkingspagina op je Mac

Sla het volgende volledige document als direction-demo.html op met een teksteditor voor platte tekst en open het bestand daarna in je browser. Het gebruikt zelfbedachte labels en CSS-rechthoeken, zonder externe afhankelijkheden. De verwachte resultaten volgen uit de gedocumenteerde regels; dit voorbeeld wordt niet gepresenteerd als een resultaat dat in een browser is getest.

<!doctype html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Direction and flex comparison</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      margin: 24px;
      color: #202020;
      background: #fff;
    }
    .row {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      writing-mode: horizontal-tb;
      justify-content: flex-start;
      gap: 12px;
      max-width: 448px;
      padding: 12px;
      border: 1px solid #777;
      margin-bottom: 20px;
    }
    .reverse { flex-direction: row-reverse; }
    .tile {
      flex: 0 0 64px;
      padding: 16px 0;
      text-align: center;
      background: #e2ecf4;
    }
  </style>
</head>
<body>
  <h1>Direction and flex comparison</h1>
  <p>LTR with row</p>
  <div class="row" dir="ltr">
    <span class="tile">Alpha</span>
    <span class="tile">Beta</span>
    <span class="tile">Gamma</span>
  </div>
  <p>LTR with row-reverse</p>
  <div class="row reverse" dir="ltr">
    <span class="tile">Alpha</span>
    <span class="tile">Beta</span>
    <span class="tile">Gamma</span>
  </div>
  <p>RTL with row</p>
  <div class="row" dir="rtl">
    <span class="tile">Alpha</span>
    <span class="tile">Beta</span>
    <span class="tile">Gamma</span>
  </div>
  <p>RTL with row-reverse</p>
  <div class="row reverse" dir="rtl">
    <span class="tile">Alpha</span>
    <span class="tile">Beta</span>
    <span class="tile">Gamma</span>
  </div>
</body>
</html>

Vergelijk de vier rijen met de voorspellingstabel. Alle vier bevatten dezelfde bronvolgorde. Alleen de containerrichting en de omkeringsklasse verschillen. De expliciete horizontale schrijfmodus houdt deze demonstratie gericht op de gebruikelijke horizontale desktopsituatie.

Wijzig vervolgens alleen justify-content: flex-start in justify-content: flex-end, sla het bestand op en laad de pagina opnieuw. De groepen zouden naar de tegenoverliggende randen van de hoofdas moeten verschuiven, met behoud van de itemstroom in elke rij. Zo kun je plaatsing en omkering onderscheiden zonder een andere instelling voor de tekstrichting toe te voegen. MDN: justify-content.

Zet ten slotte de uitlijningsinstelling terug en voeg na Alpha in elke rij een punt toe. Vergelijk zowel de interpunctie als de posities van de tegels. Dit is een demonstratie om tekstrichting te onderzoeken, geen aanbeveling om rtl toe te wijzen aan gewone Engelse labels. MDN’s uitleg van de basisrichting maakt duidelijk waarom interpunctie aan de rand afzonderlijk moet worden gecontroleerd. MDN: dir.

Onverwachte resultaten in de daadwerkelijke lay-out onderzoeken

Controleer of de ouder een flexcontainer is

Controleer het element dat de tegels bevat. flex-direction werkt wanneer de waarde van display flex of inline-flex is. Een declaratie op een gewone blokcontainer zorgt niet voor een flexlay-out. Controleer ook of een latere regel de effectieve waarde op de huidige browserbreedte wijzigt. MDN: beschrijving van flex-direction.

Controleer de overgeërfde richting voordat je nog een omkering toevoegt

Controleer de container en diens voorouders op dir en kijk vervolgens naar CSS-declaraties met direction. Als dir ontbreekt, wordt de richting doorgaans overgeërfd van het bovenliggende element; weglaten vraagt niet om automatische detectie. Als de bronvolgorde onverwacht rechts begint, kan een overgeërfde richting dat verklaren. MDN: overerving van dir.

Gebruik dir="auto" niet als schakelaar voor de lay-out. WHATWG definieert het als richtingsdetectie op basis van inhoud, voornamelijk aan de hand van het eerste teken met een sterke schrijfrichting, en raadt aan het alleen te gebruiken wanneer de tekstrichting werkelijk onbekend is. Een lay-outeis mag niet afhangen van welk label toevallig als eerste verschijnt. HTML Standard: het attribuut dir.

Maak onderscheid tussen omkering van items en omkering van regels

Als het probleem alleen optreedt nadat je het venster smaller hebt gemaakt, controleer dan het teruglopen. row-reverse verandert de voortgang langs de hoofdas; wrap-reverse verandert de richting waarin flexregels worden gestapeld. De standaardwaarde nowrap houdt alles op één regel en kan overlopen veroorzaken. Dit zijn afzonderlijke instellingen, dus test zowel een smal venster als de oorspronkelijke desktopbreedte. MDN: flex-wrap.

Zoek naar afzonderlijke volgorderegels

Controleer of een tegel een waarde voor order heeft. Bij flexlay-out worden items op basis van dat gehele getal gegroepeerd, van laag naar hoog, waarbij de bronvolgorde binnen groepen met dezelfde waarde behouden blijft. Een omkering verandert vervolgens de richting waarin deze resulterende volgorde wordt weergegeven. Zet onverwachte volgorde-instellingen op itemniveau terug voordat je besluit dat de richting van de container verkeerd staat. MDN: Ordering flex items.

Controleer de leesvolgorde voordat je de wijziging behoudt

Bij neutrale decoratieve tegels kan de visuele omkering de volledige vereiste zijn. Controleer bij links of bedieningselementen de volgorde in de bron en volg de toetsenbordfocus door de component. Flexomkering verandert de opeenvolgende navigatie- of spraakvolgorde zelf niet. Een visueel omgekeerde groep kan dus de oorspronkelijke interactievolgorde behouden. W3C: Flex Flow Direction.

Gebruik deze controle om te bepalen of de bron moet worden aangepast. Als Gamma, Beta, Alpha de bedoelde betekenisvolle volgorde is, zet de elementen dan in die volgorde. Als Alpha, Beta, Gamma de juiste leesvolgorde blijft en alleen de presentatie moet worden omgekeerd, beoordeel de visuele indeling dan met dat onderscheid in gedachten. MDN laat dit gedrag van de bronvolgorde zien met links waarop de focus kan vallen. MDN: Ordering flex items.

Kies de methode op basis van de vereiste: HTML dir voor de basistekstrichting, flex-direction voor de stroomrichting van de flexas en uitlijning om een ongewijzigde volgorde te positioneren. Vergelijk vóór je het resultaat behoudt afzonderlijk de plaatsing van de tegels, interpunctie, het teruglopen en de bronvolgorde. Zo kun je op een herhaalbare manier een lay-out corrigeren die er alleen maar omgekeerd uitziet.

Bronnen