RTL og LTR layout sammenligning med tekstjustering

Praktisk guide

Grundlæggende om RTL-webdesign til arabisk, persisk & hebraisk

Understøttelse af højre-til-venstre (RTL) skriftsprog som arabisk, persisk og hebraisk kræver særlige webdesignteknikker. Denne guide forklarer de væsentlige grundprincipper: dir-attributten, spejlede layouts, logiske CSS-egenskaber, håndtering af tal og indlejret latin samt korrekt skriftvalg og spejling af ikoner. Målet er at skabe en konsistent og brugervenlig oplevelse for RTL-sprog.

ar: Arabisk RTL-skrift
fa: Persisk RTL-layout
he: Hebraisk RTL-tekst

Grundlæggende dir-attribut

Det dir-attribut med værdien 'rtl' er grundlaget for ethvert RTL-webdesign. Det sættes normalt på <html>- eller <body>-tagget og påvirker tekstjusteringen, standardrækkefølgen af tabelceller og retningen af CSS-egenskaber som 'text-align'. Uden dette attribut forbliver indholdet venstrejusteret, hvilket virker unaturligt for RTL-sprog. Desuden bør du tilsidesætte 'dir' på containerniveau, når der forekommer blandede retninger. Et manglende eller forkert dir-attribut fører til svært læselige layouts og bør derfor prioriteres.

Spejlet layout og logiske CSS-egenskaber

I stedet for fysiske egenskaber som 'left' og 'right' bruger du logiske CSS-egenskaber som 'margin-inline-start' og 'padding-inline-end'. Disse tilpasser sig automatisk skriveretningen og undgår manuelle overskrivninger. Et spejlet layout betyder, at navigationslinjen starter til højre og indholdet til venstre. Med logiske værdier som 'float: inline-start' eller 'text-align: start' opnår du dette uden media queries. Moderne CSS-grid- og flexbox-egenskaber som 'justify-content: flex-start' virker korrekt afhængigt af dir-attributten. Test altid med ægte indhold, da logiske egenskaber ikke fortolkes ens af alle browsere.

CSS logical properties eksempel med inline-start og end

Tal og indlejret latin

I RTL-tekster forbliver tal og indlejrede latinske bogstaver venstre-til-højre-orienterede. Dette giver udfordringer, da de kan forstyrre læseretningen. Brug 'unicode-bidi'-attributten eller 'direction: ltr' for sådanne elementer for at sikre en ensartet visning. Ved dato- eller talformater er det tilrådeligt at tilpasse rækkefølgen til RTL-kulturen. Vær også opmærksom på layoutet af formularer, hvor indtastningsfelter for tal bør forblive venstrejusterede. En omhyggelig behandling af denne blandingsretning forhindrer visuelle brud og forbedrer læsbarheden.

Skrifttyper og typografi

Valget af skrifttype er afgørende: Arabisk, persisk og hebraisk kræver skrifttyper med passende glyfunderstøttelse. Populære muligheder er 'Noto Naskh Arabic', 'Vazir' til persisk og 'Noto Sans Hebrew'. Definer fallbacks, f.eks. 'font-family: 'Noto Naskh Arabic', 'Tahoma', sans-serif;'. Sørg for tilstrækkelige skriftstørrelser og linjeafstande, da RTL-skrifttyper ofte er smallere eller mere komplekse. Undgå kursiv, da det ikke findes i mange arabiske skrifttyper. Test visningen på forskellige enheder for at sikre, at skrifttyperne indlæses korrekt og er læsbare.

Ikoner og spejling

Ikoner, der angiver en retning (f.eks. pile, frem/tilbage-symboler), skal spejles i RTL-layouts. Dette opnås med CSS-transformationer som 'transform: scaleX(-1)' eller ved brug af ikonsæt, der automatisk understøtter RTL (f.eks. Font Awesome med 'dir'-attribut). Symboler uden retningsreference (f.eks. hus, indstillinger) forbliver uændrede. Sørg for, at spejlingen ikke forvrænger semantikken. Test alle ikoner i RTL-visningen, da utilsigtede spejlinger kan påvirke brugervenligheden.

Tjekliste til markedsindtræden

Sæt dir='rtl' på html-elementet.
Brug logiske CSS-egenskaber i stedet for fysiske.
Håndter tal og blandede retninger med 'direction'.
Vælg skrifttyper med omfattende glyf-understøttelse.
Spejl retningsafhængige ikoner med scaleX.
Test layoutet med ægte indhold på alle målsprog.

Ofte stillede spørgsmål

Hvorfor er dir='rtl' alene ikke tilstrækkeligt?

dir-attributten fastlægger basisretningen, men CSS-egenskaber som 'margin-left' forbliver venstre. Uden logiske egenskaber skal du manuelt tilsidesætte mange værdier, hvilket er fejlbehæftet og forringer vedligeholdelsen.

Hvordan håndterer jeg tal i RTL-layouts?

Tal er som standard LTR i RTL-kontekster. Brug 'unicode-bidi: embed' på overordnet element eller indstil 'direction: ltr' for talområder for at sikre korrekt justering.

Skal alle ikoner spejles?

Nej, kun ikoner med en implicit retning som pile skal spejles. Symboler som et hus eller et tandhjul forbliver uændrede. Spejl kun ikoner, der angiver en bevægelses- eller læseretning.

Klar til dette marked?

Vi lokaliserer din hjemmeside sprogligt, teknisk og kulturelt – med modersmålskontrol og fast pris. Anmod om et uforpligtende tilbud.

Anmod om uforpligtende tilbud