2026-06-03 · Redaktion Baduno · 6 blog.readMin · Blog & Viden
RTL-design: Hvad ændrer sig, når læseretningen vender
Arabisk og hebraisk læses fra højre mod venstre – og vender dermed stiltiende designantagelser på hovedet. En praktisk rapport fra vores designsystem.
Mere end spejlet
Den naive tilgang – 'bare spejl alt' – fejler hurtigt: Tal og latinske varemærker forbliver venstre-til-højre, medieafspillersymboler beholder deres retning, telefonnumre bryder. RTL-design betyder at beslutte for hvert element, om det er logisk (følger læseretningen) eller fysisk (retningsfast).
CSS: logiske egenskaber
Moderne CSS-logik gør RTL håndterbart: margin-inline-start i stedet for margin-left, inset-inline-end i stedet for right, text-align:start i stedet for left. Hvem der fra starten skriver logisk, får den anden læseretning næsten gratis – hvem der eftermonterer, kæmper med hundredvis af undtagelser. Denne hjemmeside bruger gennemgående logiske egenskaber; enhver RTL-version oprettes ud fra samme stylesheet som den tyske.
Typografi og tæthed
Arabisk skrift har ingen versaler, anderledes over-/underlængder og virker ved samme skriftstørrelse mindre og tættere. God RTL-typografi kræver egne specialiserede skrifttyper, ofte en til to punkter større grad og mere generøs linjehøjde. Også letterspacing-effekter, populære i latinsk skrift, fungerer ikke med forbundne skrifter.
Test med modersmålstalende
Ingen automatik erstatter blikket fra en person, der lever i skriften: linjeskift i sammensatte ord, tal i brødtekst, blandede retninger i formularer – fejlklasserne er subtile. Vores gennemgangsproces inkluderer derfor altid et visuelt RTL-review, ikke kun tekstkorrektur.
Navigation: Hvor logikken bryder sammen
I RTL-miljøer skal navigationsstrukturer tænkes om. En vandret menubjælke starter til højre, det første menupunkt er længst til venstre – rækkefølgen forbliver logisk fra højre mod venstre. Rullemenuer åbner sig som standard nedad til venstre i stedet for nedad til højre, da ankerpunktet ligger på højre side. Sidepaneler, der i LTR-layout er placeret til venstre, rykker i RTL-tilfælde til højre. Særlig forsigtighed gælder for hamburgermenuer: Ikonet selv (tre vandrette linjer) er retningsneutralt, men dets placering (øverst til venstre vs. øverst til højre) skal byttes om. En hyppig fejl er undermenuer, der stadig viser LTR-retning, fordi de ikke styres via logiske CSS-egenskaber. I vores designsystem definerer vi derfor navigationskomponenter fuldstændigt med inset-inline-start/end, så de automatisk skifter mellem LTR og RTL. Praktisk eksempel: En brødkrummenavigation viser i RTL-tilstand den aktuelle side til venstre og startsiden til højre – skillepilene skal også ændre retning. Vi bruger her CSS-content med indlejrede pile, der alt efter dir-værdi anvender en anden entity.
Blandede retninger: Tal og tegn
Tal, telefonnumre, e-mail-adresser og latinske mærkenavne bevarer deres LTR-retning, selv når den omgivende tekst er RTL. Det fører til såkaldte bidirektionelle afsnit, hvor læseretningen skifter midt i sætningen. Som standard håndterer Unicode-bidirektionalalgoritmen (Bidi) sådanne blandede tekster, men du skal sikre, at retningsskiftet er korrekt. Brug dir-attributten på niveau med det blandede element eller brug tegn som LRM (Left-to-Right Mark) og RLM (Right-to-Left Mark). Eksempel: I en hebraisk sætning „Telefon: 01234 56789“ skal talrækken læses fra venstre mod højre. Uden korrekt markering kan browseren bryde strengen eller vise den forkert. I formularer er det afgørende, at etiketter står til højre og input til venstre, da brugeren begynder at læse til højre. Vores fremgangsmåde: For hvert tekstelement med indlejret latinmateriale sætter vi i RTL-skabelonen en <span dir="ltr">-wrapper med et afsluttende LRM, så det følgende RTL-tegn korrekt placeres til sidst.
Arabisk og hebraisk læses fra højre mod venstre – og vender dermed stiltiende designantagelser på hovedet. En praktisk rapport fra vores designsystem.
Symboler: Retningsbestemte eller logiske?
Ikoner og piktogrammer bærer ofte underforståede retninger: Fremad-pile peger til højre, tilbage-pile til venstre. Disse skal spejlvendes i RTL-grænseflader, ellers virker navigationen kontraintuitiv. Dog er ikke alle symboler retningsafhængige: En play-trekant forbliver altid den samme (da den repræsenterer en fysisk handling), det samme gælder for et e-mail- eller telefon-ikon. Tommelfingerreglen: Logisk retning (tidsmæssig rækkefølge, læseretning, navigationsretning) skal spejles; fysisk eller symbolsk betydning skal ikke. I udvikling bruger vi CSS-transformationer til ikoner: scaleX(-1) for alle retningslogiske SVG'er, styret af en klasse [dir=rtl] .icon--directional. Så undgår vi dobbelte aktiver. OBS: Carousel-pile, der peger til højre, skal i RTL-tilstand pege til venstre, da den „næste“ side nu ligger til venstre. Det samme gælder for statuslinjer: Fremskridtet bør øges fra højre mod venstre. I vores designsystem er sådanne komponenter implementeret med logiske egenskaber (inline-size i stedet for width), så fyldningsniveauet automatisk binder til starten af statuslinjen.
Billeder: Hvad skal spejles, hvad skal tegnes om?
Grafik og illustrationer indeholder ofte kulturelle eller retningsafhængige symboler: ure, der går med uret (i RTL-kontekst virker spejlet normalt), håndtryk, tidslinjer. Ikke alle billeder skal spejles fuldstændigt – en spejlet urviserbevægelse kunne opfattes som forkert, da den fysiske realitet bevares. Men en tidslinje fra venstre mod højre bør i RTL-kontekst gå fra højre mod venstre. Logoer og brandbilleder forbliver normalt uspejlede, da de er underlagt et fast udseende. Udfordringen er at levere de rigtige billeder automatisk. Vi gemmer for hver grafik et RTL-ækvivalent som et separat aktiv eller bruger CSS-transformationer til enkle tilfælde. I komplekse scenarier (f.eks. infografik med tekst) er en manuel omdesign nødvendig. Vores workflow: Grafikdesigneren mærker hvert billede som "retningsfrit", "spejlbart" eller "individuelt" i CMS. Leveringen sker via en betingelse, der aflæser dir-attributten på det overordnede element. Eksempel: En illustration af en bogreol med bøger i latinsk skrift skulle spejles, så bogrykkene er til højre – det kan virke overraskende ved første øjekast, men er konsistent.
SEO og hreflang: RTL-specifik markering
For søgemaskiner er korrekt sprog- og retningsmarkering essentielt. Ud over sprogattributten (lang) skal dir-attributten være angivet på hver side, så browseren og søgemaskinen korrekt kan fortolke læseretningen. Ved flersprogede RTL-sider er hreflang-markeringen særlig kritisk: En arabisk side (ar) skal korrekt henvise til dens tyske eller engelske modstykker. Fejlagtige hreflang-indgange fører til forkerte indekseringer, da Google ikke automatisk udleder læseretningen. Derudover bør du overveje separate sitemaps til LTR- og RTL-versioner for at forstærke signaler. En hyppig fejl er brugen af generiske tags uden hensyntagen til skriftretningen. Vi satser på en dynamisk hreflang-generering, der ud fra sprogdatabasen udleder både sprog- og regionskoder. For arabiske dialekter er regional differentiering nødvendig, da forbrugere og algoritmer har forskellige forventninger. Derudover bruger vi canonical-tagget for at undgå inkonsistenser mellem spejlede og ikke-spejlede indhold. Vores workflow kontrollerer automatisk, om dir-attributten i HTML-headeren er konsistent med hreflang-angivelserne. For en arabisk tekst uden dir="rtl" kan blive forkert vist af browsere, hvilket igen øger afvisningsprocenten. SEO-præstationen påvirkes altså ikke kun af tekster, men også af korrekt markering af læseretningen.
Tilgængelighed: RTL-udfordringer for assisterende teknologier
Behovene for skærmlæsere og andre assisterende teknologier ændrer sig med læseretningen. Skærmlæsere som JAWS eller VoiceOver forventer dir-attributten for at bestemme den korrekte oplæsningsrækkefølge. Hvis denne angivelse mangler, læser de flersproget indhold muligvis i den forkerte rækkefølge. Også ARIA-landmarks forbliver de samme, men positionen i DOM bør ideelt set følge læseretningen: Hovedmenuen bør i kildekoden stå før hovedindholdet – ved RTL betyder det højre side først. Et andet punkt er fokusrækkefølger: Tab-indekser skal i RTL-sider logisk gå fra højre mod venstre. Brug native HTML-elementer, der automatisk tilpasser tastaturnavigationen. Alt-tekster til billeder bør være sprogspecifikke og afspejle målgruppens kulturelle perspektiv. Eksempel: En grafik, der viser et håndtryk, bør på arabisk beskrives som "to hænder, der krydser hinanden", da den kulturelle konnotation er anderledes. Vi anbefaler at udføre tilgængeligheds-audits i både LTR- og RTL-visning. Dette inkluderer kontrol af kontraster, som kan være anderledes under RTL-typografi. Vores team bruger automatiserede værktøjer i kombination med manuelle tests af indfødte talere for at sikre, at brugeroplevelsen er inkluderende.
blog.faqT
Skal jeg spejle alle billeder, når jeg opretter en RTL-version?
Nej. Kun billeder med en tydelig læseretning som tidslinjer, pile eller fortløbende diagrammer bør spejles. Logoer, portrætter, grafik med fysiske objekter (ur, globus) forbliver uændrede, da betydningen ellers forvrænges. Vurder fra sag til sag.
Hvordan tester jeg RTL mest effektivt under udviklingen?
Brug browserudviklingsværktøjer til at sætte dir-attributten på html-elementet til "rtl", og kontrollér hver komponent for korrekt layout. Udvid din kodegennemgangsproces med et dedikeret RTL-tjek med modersmålstalere, der dækker visuelle forstyrrelser og forkert bidirektionel tekstflyd.
