dir=rtl til højre-mod-venstre-tekst
Aktivér RTL-layout til arabisk, hebraisk og andre RTL-sprog
dir=rtl til højre-mod-venstre-tekst er en gratis HTML Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i HTML Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. HTML Academy-kurset indeholder 4 lektioner i alt.
Hvad dir gør
Attributten dir angiver et elements grundlæggende tekstretning. dir="ltr" (venstre mod højre, standarden for de fleste sprog) eller dir="rtl" (højre mod venstre for arabisk, hebraisk, persisk og urdu).
Angiv på html for RTL på hele webstedet
På websteder på arabisk, hebraisk, persisk og urdu skal du angive dir="rtl" på rodelementet. Det vender standardflowet for hver blok: teksten justeres til højre, lister indrykkes til højre, rullepaneler flyttes til venstre, og layout spejlvendes automatisk med moderne CSS.
<html lang="ar" dir="rtl">
<head>...</head>
<body>...</body>
</html>Tovejs tekst
Tekst med blandede retninger (arabisk med indlejrede engelske brandnavne) følger automatisk Unicode Bidirectional Algorithm. Grundretningen (fra dir) styrer, hvordan ensrettede segmenter arrangeres på linjeniveau; individuelle tegnsekvenser flyder i deres egne skriftsystemers naturlige retning.
Logiske CSS-egenskaber
Moderne CSS bruger logiske egenskaber, der tilpasser sig retningen: margin-inline-start (venstre i LTR, højre i RTL), padding-inline-end og border-inline-start. Ved at erstatte left/right med start/end kan ét stilark bruges til begge retninger.
/* Works in both directions */
.card {
padding-inline-start: 16px;
margin-block-end: 12px;
border-inline-end: 1px solid #ccc;
}Flexbox og Grid tilpasser sig automatisk
Flexbox' row-retning respekterer dir: i RTL flyder elementerne fra højre mod venstre. Grid-skabelonens kolonner vender også om. Det betyder, at de fleste layout skrevet med flex eller grid fungerer i RTL uden retningsspecifik CSS — moderne layout er retningsuafhængigt.
Ikoner, der skal spejlvendes
Retningsbestemte ikoner (tilbagepil, næste-pil, fortryd/gentag) skal spejlvendes i RTL. Brug CSS transform: scaleX(-1) i [dir="rtl"], eller angiv separate RTL-varianter af SVG. Ikoner uden retningsangivelse (søgning, indstillinger, tandhjul) forbliver de samme.
[dir="rtl"] .icon-back {
transform: scaleX(-1);
}Tekstjustering
Foretræk text-align: start frem for text-align: left — start bliver til venstre i LTR og til højre i RTL. Det samme gælder end. Retningsbevidst justering fjerner en klasse af fejl, når du tilføjer RTL-understøttelse.
Tilsidesættelse af dir pr. element
Angiv dir="auto" på et element, så browseren registrerer retningen ud fra det første tegn med tydelig retning: <p dir="auto">{user.name}</p> håndterer navne indsendt af brugere, som kan være arabiske, engelske eller blandede, uden særbehandling.
Bidi-indlejring
Elementerne bdi (isolation i tovejs tekst) og bdo (tilsidesættelse af tovejs tekst) giver finmasket kontrol over, hvordan bidi-algoritmen behandler bestemt tekst — nyttigt, når du gengiver brugerens indtastning ordret eller tvinger en bestemt retning for et kodestykke i løbende tekst.
Formularfelter
Inputfelter arver dir fra deres overordnede element. For tekst, som brugere indtaster, og hvor retningen varierer (en chatapp med flersprogede brugere), skal du angive dir="auto" på de enkelte inputfelter, så hvert felt vises korrekt ud fra sit indhold.
Test af RTL-layouts
Browsere giver dig mulighed for at se en forhåndsvisning af RTL ved midlertidigt at angive document.documentElement.dir = "rtl" i DevTools-konsollen. Kontrollér ikonernes retning, de indvendige og udvendige afstande, rullepanelets placering, og at intet element bruger hardkodet left/right, som burde være start/end.
CSS-retning adskiller sig fra layoutretning
CSS-egenskaben direction og HTML-attributten dir har samme effekt på det meste layout. Foretræk HTML-attributten, fordi hjælpemiddelteknologi, mailprogrammer og andre forbrugere læser den, mens CSS-egenskaben kun påvirker gengivelsen i browsere.
Test din viden
Hvorfor foretrækkes CSS'ens logiske egenskaber som margin-inline-start frem for margin-left ved understøttelse af RTL-sprog?
Opsummering
dir="rtl" på <html> vender grundretningen for websteder på arabisk, hebraisk, persisk og urdu. Logiske CSS-egenskaber (margin-inline-start, padding-block-end) tilpasser sig automatisk. Flexbox-/grid-layouts spejlvendes uden ændringer. Spejlvend retningsbestemte ikoner, brug text-align: start/end, og brug dir="auto" til brugerindhold med ukendt retning.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 40
- Lektioner
- 159
Ofte stillede spørgsmål
Er lektionen “dir=rtl til højre-mod-venstre-tekst” gratis?
Ja — alle 3 lektioner i læringssporet HTML Academy, inklusive “dir=rtl til højre-mod-venstre-tekst”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. HTML Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “dir=rtl til højre-mod-venstre-tekst”?
Aktivér RTL-layout til arabisk, hebraisk og andre RTL-sprog Du øver dig i HTML Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på HTML Academy?
Der kræves ingen tidligere erfaring. HTML Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.
Hvor lang tid tager lektionen “dir=rtl til højre-mod-venstre-tekst”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne HTML Academy-lektion?
Ja. Alle HTML Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- lang-attributten og skærmlæsere
- dir=rtl til højre-mod-venstre-tekst
- Elementerne bdi og bdo
- charset og Unicode-håndtering: specialtegn