2026-06-03 · Redaktionen Baduno · 6 blog.readMin · Blog & Kunskap
RTL-design: Vad som förändras när läsriktningen vänds
Arabiska och hebreiska läses från höger till vänster – och vänder därmed på tysta designantaganden. En praktisk rapport från vårt designsystem.
Mer än speglat
Den naiva ansatsen – 'bara spegla allt' – misslyckas snabbt: Siffror och latinska varumärken förblir vänster-till-höger, mediaspelarsymboler behåller sin riktning, telefonnummer bryts. RTL-design innebär att för varje element avgöra om det är logiskt (följer läsriktningen) eller fysiskt (riktningsfast).
CSS: logiska egenskaper
Modern CSS-logik gör RTL hanterbart: margin-inline-start istället för margin-left, inset-inline-end istället för right, text-align:start istället för left. Den som från början skriver logiskt får den andra läsriktningen nästan på köpet – den som eftermonterar kämpar med hundratals undantag. Denna webbplats använder genomgående logiska egenskaper; varje RTL-version skapas från samma stilmall som den tyska.
Typografi och täthet
Arabisk skrift har inga versaler, andra över-/underhäng och verkar mindre och tätare vid samma teckenstorlek. Bra RTL-typografi kräver egna, specialiserade typsnitt, ofta en till två punkter större grad och generösare radhöjd. Även bokstavsmellanrumseffekter, populära i latinsk skrift, fungerar inte med sammanhängande skrift.
Testa med modersmålstalare
Ingen automatik ersätter blicken hos en person som lever i skriften: Radbrytningar i sammansatta ord, siffror i löptext, blandade riktningar i formulär – felklasserna är subtila. Vår granskningsprocess innehåller därför alltid en visuell RTL-genomgång, inte bara textkorrigering.
Navigation: Där logiken vänder
I RTL-miljöer måste navigationsstrukturer tänkas om. En horisontell menyrad börjar till höger, den första menypunkten är den längst till vänster – ordningen förblir logisk från höger till vänster. Rullgardinsmenyer öppnas som standard nedåt vänster i stället för nedåt höger, eftersom ankarpunkten ligger på höger sida. Sidopaneler som i LTR-layout är placerade till vänster flyttas i RTL-fallet till höger. Särskild försiktighet krävs med hamburgermenyerna: Själva ikonen (tre horisontella linjer) är riktningsneutral, men dess placering (överst till vänster vs överst till höger) måste bytas. Ett vanligt misstag är undermenyer som fortfarande visar LTR-riktning eftersom de inte styrs av logiska CSS-egenskaper. I vårt designsystem definierar vi därför navigationskomponenter helt med inset-inline-start/end, så att de automatiskt växlar mellan LTR och RTL. Praktiskt exempel: En brödsmulenavigation visar i RTL-läge den aktuella sidan till vänster och startsidan till höger – separatorpilarna måste också ändra riktning. Vi använder här CSS-content med inbäddade pilar som använder olika enheter beroende på dir-värdet.
Blandade riktningar: siffror och tecken
Siffror, telefonnummer, e-postadresser och latinska varumärkesnamn behåller sin LTR-orientering även om den omgivande texten är RTL. Detta leder till så kallade dubbelriktade avsnitt där läsriktningen vänder mitt i meningen. Som standard hanterar Unicode-bidirektionalalgoritmen (Bidi) sådan blandad text, men du måste se till att riktningsbytet är korrekt. Använd dir-attributet på nivån för det blandade elementet, eller använd tecken som LRM (Left-to-Right Mark) och RLM (Right-to-Left Mark). Exempel: I en hebreisk mening „Telefon: 01234 56789“ måste sifferföljden läsas från vänster till höger. Utan korrekt markering kan webbläsaren bryta eller visa teckenföljden felaktigt. I formulär är det viktigt att etiketter står till höger och inmatningsfält till vänster, eftersom användaren börjar läsa från höger. Vår metod: För varje textelement med inbäddat latinskt material lägger vi i RTL-mallen en <span dir="ltr">-omslutning med ett avslutande LRM, så att nästa RTL-tecken hamnar korrekt i slutet.
Arabiska och hebreiska läses från höger till vänster – och vänder därmed på tysta designantaganden. En praktisk rapport från vårt designsystem.
Symboler: riktningsbundna eller logiska?
Ikoner och piktogram har ofta underförstådda riktningar: Framåtpilar pekar åt höger, bakåtpilar åt vänster. Dessa måste spegelvändas i RTL-gränssnitt, annars känns navigeringen kontraintuitiv. Alla symboler är dock inte riktningsberoende: En spel-triangel förblir densamma (eftersom den representerar en fysisk handling), likaså en e-post- eller telefonikon. Tumregeln: Logisk riktning (tidsförlopp, läsriktning, navigeringsriktning) måste spegelvändas; fysisk eller symbolisk betydelse inte. I utvecklingen använder vi CSS-transformeringar för ikoner: scaleX(-1) för alla riktningslogiska SVG:er, styrda av en klass [dir=rtl] .icon--directional. På så sätt undviker vi dubbla tillgångar. Observera: Karusellpilar som pekar åt höger måste i RTL-läge peka åt vänster, eftersom den „nästa“ sidan nu ligger till vänster. Samma sak gäller för förloppsindikatorer: Förloppet bör öka från höger till vänster. I vårt designsystem är sådana komponenter implementerade med logiska egenskaper (inline-size i stället för width), så att fyllningsgraden automatiskt binds till början av förloppsindikatorn.
Bilder: Vad speglas, vad ritas om?
Grafik och illustrationer innehåller ofta kulturella eller riktningsberoende symboler: klockor som går medurs (i RTL-kontext ser det speglat normalt ut), handskakningar, tidslinjer. Inte varje bild måste speglas helt – en speglad visarrörelse kan uppfattas som felaktig eftersom den fysiska verkligheten bevaras. Men en tidslinje från vänster till höger bör i RTL-kontext löpa från höger till vänster. Logotyper och varumärkesbilder förblir oftast oförändrade eftersom de följer en fast visuell identitet. Utmaningen är att automatiskt leverera rätt bilder. Vi lagrar för varje grafik en RTL-ekvivalent som separat tillgång eller använder CSS-transformationer för enkla fall. I komplexa scenarier (t.ex. infografik med text) krävs manuell omdesign. Vårt arbetsflöde: Grafisk designer märker varje bild som "riktningsfri", "speglingsbar" eller "individuell" i CMS. Leveransen sker via ett villkor som läser dir-attributet på det överordnade elementet. Exempel: En bild av en bokhylla med böcker i latinsk skrift skulle behöva speglas för att bokryggarna ska synas till höger – det kan verka överraskande vid första anblicken, men är konsekvent.
SEO och hreflang: RTL-specifik märkning
För sökmotorer är korrekt språk- och riktningsmarkering avgörande. Förutom språkattributet (lang) måste dir-attributet finnas på varje sida så att webbläsaren och sökmotorn tolkar läsriktningen korrekt. För flerspråkiga RTL-sidor är hreflang-markeringen särskilt kritisk: En arabisk sida (ar) måste korrekt hänvisa till sina tyska eller engelska motsvarigheter. Felaktiga hreflang-poster leder till felaktig indexering eftersom Google inte automatiskt härleder läsriktningen. Dessutom bör du överväga separata webbplatskartor för LTR- och RTL-versioner för att förstärka signalerna. Ett vanligt misstag är att använda generiska taggar utan hänsyn till skriftriktningen. Vi satsar på dynamisk hreflang-generering som från språkdatabasen härleder både språk- och regionkoder. För arabiska dialekter är regional differentiering nödvändig eftersom konsumenter och algoritmer har olika förväntningar. Dessutom använder vi canonical-taggen för att undvika inkonsekvenser mellan speglat och icke-speglat innehåll. Vårt arbetsflöde kontrollerar automatiskt om dir-attributet i HTML-huvudet är konsekvent med hreflang-uppgifterna. En arabisk text utan dir="rtl" kan visas felaktigt av webbläsare, vilket i sin tur ökar avvisningsfrekvensen. SEO-prestandan påverkas alltså inte bara av texter utan också av korrekt markering av läsriktningen.
Tillgänglighet: RTL-utmaningar för assisterande teknik
Behoven hos skärmläsare och annan assisterande teknik förändras med läsriktningen. Skärmläsare som JAWS eller VoiceOver förväntar sig dir-attributet för att bestämma rätt uppläsningsordning. Saknas denna uppgift kan de läsa blandat språkligt innehåll i fel ordning. Även ARIA-landmärken förblir desamma, men positionen i DOM bör helst följa läsriktningen: Huvudmenyn bör i källkoden finnas före huvudinnehållet – för RTL innebär det höger sida först. En annan punkt är fokusordningar: Tab-index måste på RTL-sidor logiskt gå från höger till vänster. Använd inbyggda HTML-element som automatiskt anpassar tangentbordsnavigeringen. Bilders alt-texter bör vara språkspecifika och spegla målkulturens perspektiv. Exempel: En grafik som visar en handskakning bör på arabiska beskrivas som 'två händer som korsar varandra' eftersom den kulturella konnotationen är annorlunda. Vi rekommenderar att utföra tillgänglighetsrevisioner i både LTR- och RTL-vy. Detta inkluderar kontroll av kontraster, som kan bli annorlunda under RTL-typografi. Vårt team använder automatiserade verktyg i kombination med manuella tester av modersmålstalare för att säkerställa att användarupplevelsen är inkluderande.
blog.faqT
Måste jag spegla alla bilder när jag skapar en RTL-version?
Nej. Endast bilder med en tydlig läsriktning som tidslinjer, pilar eller löpande diagram bör speglas. Logotyper, porträtt, grafik med fysiska objekt (klocka, glob) förblir oförändrade, eftersom innebörden annars förvrängs. Beslut fall för fall.
Hur testar jag RTL mest effektivt under utvecklingen?
Använd webbläsarens utvecklarverktyg för att ställa in dir-attributet på html-elementet till "rtl" och kontrollera varje komponent för korrekt layout. Utöka din kodgranskningsprocess med en dedikerad RTL-kontroll med modersmålstalare som täcker visuella störningar och inkorrekta bidirektionella textflöden.
