Deel één CSS-bestand tussen LTR- en RTL-pagina’s door de HTML-richting expliciet in te stellen, logische eigenschappen te gebruiken voor richtingafhankelijke afstanden en gap te gebruiken tussen lay-outelementen. In deze gids bouw je een lokaal voorbeeld met twee pagina’s die je in een Mac-browser kunt vergelijken.

De opdracht is om ervoor te zorgen dat hetzelfde kleine component de bedoelde afstand behoudt wanneer de inline-richting verandert. Je hebt een editor voor platte tekst en een actuele desktopbrowser nodig. Het voorbeeld gebruikt synthetische labels en een decoratieve cirkel, zonder framework, externe assets of JavaScript.

Wat moet het gedeelde stijlblad regelen?

Laat de HTML verantwoordelijk zijn voor de richting en het stijlblad voor de afstand. Beide pagina’s laden dezelfde CSS-resource en gebruiken dezelfde componentklassen; het pagina-element op het hoogste niveau krijgt dir="ltr" of dir="rtl". HTML definieert rel="stylesheet" als een koppeling naar een externe resource die bijdraagt aan de opmaak van het document. HTML Standard: koppelingen naar stijlbladen.

Gebruik HTML dir wanneer de richting bekend is. Afstammelingen nemen de richting doorgaans over, en lang stelt die niet in. Geef voor deze gecontroleerde vergelijking de voorkeur aan een expliciete richting boven dir="auto": de automatische richting hangt af van de inhoud en zou ervoor zorgen dat de Engelse voorbeeldlabels LTR kiezen. MDN: het attribuut dir.

Het nuttige onderscheid is dat tussen een fysieke rand en een positie in de inhoudsstroom. In de schrijfmodus horizontal-tb van dit voorbeeld betekent inline-start links in LTR en rechts in RTL. Blok-start blijft bovenaan. Logische eigenschappen drukken die relaties rechtstreeks uit. MDN: logische marges, randen en binnenafstanden.

Bedoelde afstand Gedeelde CSS-keuze Resultaat wanneer de richting verandert
Ruimte binnen de voorste rand van het component padding-inline-start Verplaatst naar de andere fysieke zijde
Ruimte binnen beide inline-randen padding-inline Past de waarden voor start en einde toe in de nieuwe richting
Ruimte tussen Flexbox-items gap Behoudt de opgegeven ruimte tussen items
Ruimte boven en onder in deze horizontale lay-out padding-block Blijft boven en onder
Een marge vóór een element in de inline-stroom margin-inline-start Komt aan de nieuwe inline-startzijde terecht

De marges en binnenafstanden worden bepaald door de schrijfmodus en richting van het element. gap maakt daarentegen tussenruimten aan in ondersteunde lay-outcontainers. Dit zijn afzonderlijke taken: gebruik padding rond inhoud en gap tussen elementen op hetzelfde niveau. MDN: logische afstanden, MDN: gap.

Bouw twee lokale pagina’s die één CSS-bestand gebruiken

Maak op je Mac een map met de naam spacing-demo. Sla de volgende bestanden op als platte tekst met exact deze extensies. Vermijd een editor die .txt achter .html of .css plaatst.

spacing-demo/
  ltr.html
  rtl.html
  components.css

Sla dit volledige HTML-document op als ltr.html. Sla vervolgens een tweede kopie op als rtl.html en wijzig alleen het attribuut van het hoogste niveau van dir="ltr" in dir="rtl". Laat de verwijzing naar het stijlblad en de componentmarkeringen identiek. De labels blijven Engels, omdat dit een synthetische vergelijking van de lay-out is.

<!doctype html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Component spacing sample</title>
  <link rel="stylesheet" href="components.css">
</head>
<body>
  <main class="demo">
    <h1>Spacing sample</h1>
    <article class="sample-card">
      <span class="sample-card__shape" aria-hidden="true"></span>
      <div class="sample-card__copy">
        <h2 class="sample-card__title">Module A</h2>
        <p class="sample-card__description">A compact sample tile</p>
      </div>
      <span class="sample-card__tag">Set B</span>
    </article>
  </main>
</body>
</html>

Sla nu het volgende volledige stijlblad op als components.css. De bewust ongelijke inline-padding maakt richtingswijzigingen gemakkelijk te controleren: de grotere binnenafstand hoort inline-start te volgen.

:root {
  --space-small: 8px;
  --space-medium: 16px;
  --space-large: 24px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 24px;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
  color: #243447;
  background: #f2f5f8;
}

.demo {
  writing-mode: horizontal-tb;
  max-width: 640px;
  margin-inline: auto;
}

.sample-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-medium);
  padding-block: var(--space-medium);
  padding-inline: var(--space-large) var(--space-small);
  border: 1px solid #8594a5;
  border-radius: 12px;
  background: #ffffff;
}

.sample-card__shape {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #5477a3;
}

.sample-card__copy {
  flex: 1 1 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.sample-card__title,
.sample-card__description {
  margin: 0;
}

.sample-card__title {
  font-size: 18px;
}

.sample-card__description {
  margin-block-start: var(--space-small);
}

.sample-card__tag {
  flex: 0 0 auto;
  padding-block: 4px;
  padding-inline: var(--space-small);
  border: 1px solid #8594a5;
  border-radius: 6px;
}

Hier betekent padding-inline: 24px 8px een padding aan de start gevolgd door een padding aan het einde. Het betekent niet links gevolgd door rechts. Eén enkele waarde wordt op beide inline-randen toegepast. MDN: padding-inline.

Behoud flex-direction: row op beide pagina’s. Een Flexbox-rij volgt al de richting van de container: in LTR loopt die van links naar rechts en in RTL van rechts naar links. Als je row-reverse aan de RTL-versie toevoegt, wordt die richting opnieuw omgedraaid. MDN: flex-direction.

De neutrale cirkel heeft geen richtingsbetekenis, dus de vorm blijft hetzelfde terwijl de positie de rij volgt. De Engelse labels behouden ook hun lettervolgorde; dit voorbeeld controleert de componentindeling en niet vertaalde tekst.

Hoe controleer je of de afstand daadwerkelijk gedeeld wordt?

Open beide HTML-bestanden in de browser op je Mac en vergelijk ze met dezelfde vensterbreedte. De volgende waarden worden op basis van de declaraties verwacht; het zijn geen metingen in een browser. De rand van de kaart staat los van de padding.

Controle LTR-pagina RTL-pagina
Positie van de cirkel Eerste item links Eerste item rechts
Padding links van de kaart 24px 8px
Padding rechts van de kaart 8px 24px
Ruimte tussen aangrenzende Flexbox-items 16px 16px
Padding boven en onder van de kaart 16px 16px
Ruimte vóór de beschrijving 8px erboven 8px erboven

Test het delen van de resource afzonderlijk van de richting. Wijzig --space-medium in components.css van 16px in 20px, sla het bestand op en laad beide pagina’s opnieuw. Beide moeten meer ruimte tussen items en meer blokpadding krijgen, omdat die declaraties naar dezelfde variabele verwijzen. Zet de waarde na de vergelijking terug op 16px.

Maak het browservenster vervolgens smaller en vervang de beschrijving door een langer synthetisch label, zoals Module A extended sample description. Controleer of de tekst wordt afgebroken zonder de cirkel of tag te overlappen. Dit is een tweede nuttige test: een component kan bij één breedte correct spiegelen en bij een andere breedte toch te krap worden.

Beoordeel niet elke zichtbare afstand uitsluitend op basis van gap. Itemmarges, interne padding en uitgelijnde tussenruimte kunnen de zichtbare afstand groter maken dan de opgegeven tussenruimte. Het voorbeeld zet de tekstmarges terug en vermijdt uitlijning met verdeelde ruimte, zodat de vergelijking goed leesbaar blijft. MDN: beschrijving van gap.

Hoe migreer je een bestaand component zonder conflicterende afstanden?

Begin met de betekenis van elke bestaande declaratie. Een inspringing vóór de tekst hoort meestal bij inline-start; voor een bewust vastgelegde fysieke rand kan nog steeds een fysieke eigenschap nodig zijn. Zet eigenschappen om op basis van de bedoeling van het ontwerp, in plaats van elke keer dat left voorkomt die automatisch te vervangen.

Volg voor een component zoals dit voorbeeld deze stappen:

  1. Bepaal welke voorouder de richting opgeeft.
  2. Vervang richtingafhankelijke interne afstanden door logische padding.
  3. Vervang waar nodig richtingafhankelijke externe afstanden door logische marges.
  4. Gebruik gap van de ouder voor gewone afstand tussen Flexbox-items en verwijder marges die eerder diezelfde ruimte toevoegden.
  5. Herhaal de vergelijkingen met ongelijke padding en een smal venster in beide richtingen.

Controleer tijdens de migratie op oude fysieke declaraties en latere verkorte notaties. Logische en fysieke eigenschappen die naar dezelfde zijde verwijzen, doen samen mee in de cascade; een logische eigenschap wint niet automatisch omdat die logisch is. Als de overige cascadefactoren gelijk zijn, kan een latere declaratie van padding de padding resetten die eerder via logische eigenschappen was ingesteld. CSS Logical Properties and Values Level 1: eigenschappen van het boxmodel.

Houd ook rekening met de grens van de richting. Een genest component met een eigen dir="ltr" moet LTR-toewijzingen gebruiken, ook binnen een RTL-pagina. margin-inline zelf wordt daarentegen niet overgenomen; geef elk component dus de benodigde afstandsdeclaraties in plaats van te verwachten dat een marge van een voorouder erop wordt toegepast. MDN: overerving van de richting, MDN: formele definitie van margin-inline.

Welke browserbeperkingen zijn van invloed op deze aanpak?

MDN geeft aan dat padding-inline en margin-inline sinds april 2021 breed beschikbaar zijn in browsers. Daardoor zijn ze geschikt voor actuele desktopbrowsers, maar dit is geen garantie voor elke oudere browser of elke nieuwere syntaxis op die referentiepagina’s. Dit voorbeeld gebruikt gewone lengtes en auto, zonder nieuwere functies voor afmetingen. MDN: padding-inline, MDN: margin-inline.

Flexbox-gap heeft een aparte geschiedenis. Safari voegde die toe in versie 14.1; Grid-gap werd al sinds Safari 12 ondersteund. WebKit merkt specifiek op dat een functiequery voor een eigenschap geen onderscheid kon maken tussen die contexten. Alleen @supports (gap: 16px) is dus onvoldoende om ondersteuning voor Flexbox-gap in oudere versies van Safari vast te stellen. WebKit: nieuwe WebKit-functies in Safari 14.1.

Als je doelbrowser logische marges ondersteunt maar geen Flexbox-gap, voeg dan het volgende vervangende fragment toe na de hoofdregels van het stijlblad. Het biedt afstand voor dit specifieke component met één rij. Gebruik het in plaats van de actieve gap-afstand, zoals hieronder getoond; het is geen algemene oplossing voor rijen die teruglopen.

/* Optional single-row replacement for Flexbox gap. */
.sample-card {
  gap: 0;
}

.sample-card > * + * {
  margin-inline-start: var(--space-medium);
}

Deze terugvaloplossing is niet voldoende voor browsers die ook geen logische eigenschappen ondersteunen. Gebruik voor deze lokale opdracht een actuele browser, of schrijf en test expliciete fysieke regels voor LTR en RTL voor de oudere doelbrowser. Houd die browserspecifieke keuze los van het hoofdontwerp van het gedeelde stijlblad.

De voltooide vergelijking moet één samenhangende afspraak laten zien: HTML bepaalt de richting, de gedeelde CSS bepaalt de afstand en de inspringing aan de voorkant van het component volgt inline-start. Bewaar de twee lokale pagina’s als een compacte regressietest wanneer je de afstand of lay-out van het component wijzigt.

Bronnen