dir=rtl för höger-till-vänster-text
Aktivera RTL-layout för arabiska, hebreiska och andra RTL-språk
dir=rtl för höger-till-vänster-text är en gratis lektion i HTML Academy på CoddyKit. Detta är lektion 2 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för HTML Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i HTML Academy innehåller totalt 4 lektioner.
Vad dir gör
Attributet dir anger ett elements grundläggande textriktning. dir="ltr" (vänster till höger, standard för de flesta språk) eller dir="rtl" (höger till vänster, för arabiska, hebreiska, persiska och urdu).
Ange på html för RTL på hela webbplatsen
För webbplatser på arabiska, hebreiska, persiska och urdu anger du dir="rtl" på rotelementet. Detta vänder standardflödet för alla block: text justeras åt höger, listor får indrag från höger, rullningslister flyttas åt vänster och layouter spegelvänds automatiskt med modern CSS.
<html lang="ar" dir="rtl">
<head>...</head>
<body>...</body>
</html>Dubbelriktad text
Text med blandad riktning (arabiska med inbäddade engelska varumärkesnamn) följer automatiskt Unicode Bidirectional Algorithm. Basriktningen (från dir) styr hur enkelriktade segment ordnas på radnivå; enskilda teckenkörningar flödar i sina skrifts naturliga riktning.
CSS-logiska egenskaper
Modern CSS använder logiska egenskaper som anpassas efter riktningen: margin-inline-start (vänster i LTR, höger i RTL), padding-inline-end och border-inline-start. Genom att ersätta left/right med start/end kan samma stilmall användas för båda riktningarna.
/* Works in both directions */
.card {
padding-inline-start: 16px;
margin-block-end: 12px;
border-inline-end: 1px solid #ccc;
}Flexbox och Grid anpassas automatiskt
Flexboxens rad riktar sig efter dir: i RTL flödar elementen från höger till vänster. Gridens mallkolumner vänds också. Det innebär att de flesta layouter som skrivs med flex eller grid fungerar i RTL utan riktningsspecifik CSS — modern layout är riktningsoberoende.
Ikoner som ska vändas
Riktningsikoner (bakåtpil, nästa-pil, ångra/gör om) måste vändas i RTL. Använd CSS transform: scaleX(-1) inuti [dir="rtl"] eller tillhandahåll separata RTL-varianter av SVG. Icke-riktningsberoende ikoner (sökning, inställningar, kugghjul) förblir oförändrade.
[dir="rtl"] .icon-back {
transform: scaleX(-1);
}Textjustering
Föredra text-align: start framför text-align: left — start motsvarar vänster i LTR och höger i RTL. Detsamma gäller end. Riktningsmedveten justering eliminerar en hel klass av fel när RTL-stöd läggs till.
Överskrid dir per element
Ange dir="auto" på ett element så att webbläsaren identifierar riktningen utifrån det första tecknet med stark riktning: <p dir="auto">{user.name}</p> hanterar användarinskickade namn som kan vara arabiska, engelska eller blandade utan specialfall.
Bidi-inbäddning
Elementen bdi (isolering i båda riktningar) och bdo (överskridning i båda riktningar) ger detaljerad kontroll över hur bidi-algoritmen behandlar viss text — användbart när användarinmatning ska återges ordagrant eller när en viss riktning måste tvingas fram för ett kodexempel i löpande text.
Formulärfält
Inmatningsfält ärver dir från sitt överordnade element. För användartext där riktningen varierar, till exempel i en chattapp med flerspråkiga användare, anger du dir="auto" på varje enskilt inmatningsfält så att det visas korrekt utifrån sitt innehåll.
Testa RTL-layouter
I webbläsare kan du förhandsvisa RTL genom att tillfälligt ange document.documentElement.dir = "rtl" i DevTools-konsolen. Kontrollera ikonernas orientering, padding/margin, rullningslistens placering och att inget element använder hårdkodade left/right där start/end borde användas.
CSS-riktning skiljer sig från layoutriktning
CSS-egenskapen direction och HTML-attributet dir har samma effekt på det mesta av layouten. Föredra HTML-attributet eftersom hjälpmedel, e-postklienter och andra konsumenter kan läsa det, medan CSS-egenskapen endast påverkar rendering i webbläsare.
Kunskapskontroll
Varför föredras CSS-logiska egenskaper som margin-inline-start framför margin-left vid stöd för RTL-språk?
Sammanfattning
dir="rtl" på <html> vänder basriktningen för webbplatser på arabiska, hebreiska, persiska och urdu. CSS-logiska egenskaper (margin-inline-start, padding-block-end) anpassas automatiskt. Flexbox- och gridlayouter spegelvänds utan ändringar. Vänd riktningsikoner, använd text-align: start/end och använd dir="auto" för användarinnehåll med okänd riktning.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 40
- Lektioner
- 159
Vanliga frågor
Är lektionen ”dir=rtl för höger-till-vänster-text” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen HTML Academy, inklusive ”dir=rtl för höger-till-vänster-text”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i HTML Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”dir=rtl för höger-till-vänster-text”?
Aktivera RTL-layout för arabiska, hebreiska och andra RTL-språk Ni övar på HTML Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig HTML Academy?
Du behöver inga förkunskaper. Utbildningen i HTML Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.
Hur lång tid tar lektionen ”dir=rtl för höger-till-vänster-text”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här HTML Academy-lektionen?
Ja. Varje HTML Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Attributet lang och skärmläsare
- dir=rtl för höger-till-vänster-text
- Elementen bdi och bdo
- charset och Unicode-hantering av specialtecken