17 augusti 2025Svenska

En komplett guide till CSS writing-mode. Lär dig kontrollera textriktning för att skapa visuellt tilltalande och globalt tillgängliga webbplatser.

CSS Writing Mode: Bemästra internationell textriktning för globala webbplatser

I dagens uppkopplade värld måste webbplatser rikta sig till en mångfaldig publik, och en kritisk aspekt av det är att hantera olika textriktningar. CSS writing-mode är ett kraftfullt verktyg som låter utvecklare kontrollera riktningen i vilken texten flödar, vilket gör det möjligt för dem att skapa verkligt internationaliserade (i18n) och visuellt engagerande webbupplevelser. Denna omfattande guide kommer att utforska detaljerna i writing-mode, med praktiska exempel och handlingsbara insikter för att hjälpa dig att bemästra textriktning för globala webbplatser.

Förståelse för skrivlägen

CSS-egenskapen writing-mode specificerar om textrader läggs ut horisontellt eller vertikalt och i vilken riktning blocken fortskrider. Den spelar en avgörande roll i att anpassa webbsidor för språk som använder olika skrivriktningar, såsom:

Vänster-till-höger (LTR): Engelska, spanska, franska, tyska och många andra västerländska språk.
Höger-till-vänster (RTL): Arabiska, hebreiska, persiska och urdu.
Vertikal: Traditionell kinesiska, japanska och mongoliska.

Som standard använder webbläsare skrivläget horizontal-tb, vilket lägger ut text horisontellt från topp till botten. Däremot låter writing-mode dig ändra detta standardbeteende och skapa layouter som rymmer olika textriktningar.

Värden för egenskapen `writing-mode`

Egenskapen writing-mode accepterar flera värden, där var och en specificerar en annan textriktning och blockflöde:

horizontal-tb: Horisontellt från topp till botten. Textrader är horisontella och flödar från topp till botten. Detta är standardvärdet.
vertical-rl: Vertikalt från höger till vänster. Textrader är vertikala och flödar från höger till vänster. Blocken fortskrider nedåt.
vertical-lr: Vertikalt från vänster till höger. Textrader är vertikala och flödar från vänster till höger. Blocken fortskrider nedåt.
sideways-rl: Föråldrat alias för vertical-rl.
sideways-lr: Föråldrat alias för vertical-lr.

Följande värden är också tillgängliga men mindre vanligt använda:

block-flow: Använd riktningen för blockformateringskontexten, vilket kan påverkas av andra egenskaper.

Grundläggande exempel

Låt oss illustrera användningen av writing-mode med några enkla exempel:

Horisontell text (standard)

Detta är standardbeteendet, så ingen explicit writing-mode behövs:


<p>Detta är horisontell text.</p>

Vertikal text (höger-till-vänster)

För att visa text vertikalt från höger till vänster, använd vertical-rl:


<p style="writing-mode: vertical-rl;">Detta är vertikal text (höger-till-vänster).</p>

Vertikal text (vänster-till-höger)

För att visa text vertikalt från vänster till höger, använd vertical-lr:


<p style="writing-mode: vertical-lr;">Detta är vertikal text (vänster-till-höger).</p>

Praktiska tillämpningar av `writing-mode`

Utöver grundläggande textriktning erbjuder writing-mode en rad praktiska tillämpningar för att skapa visuellt engagerande och internationellt tillgängliga webbplatser:

1. Anpassning till RTL-språk

För webbplatser som stöder RTL-språk som arabiska eller hebreiska är writing-mode avgörande för att visa text korrekt. Du kan använda CSS-selektorer för att tillämpa writing-mode: rtl; på specifika element eller hela dokumentet baserat på språkattributet:


<html lang="ar">
  <body>
    <p>هذا نص عربي.</p>
  </body>
</html>


html[lang="ar"] {
  direction: rtl;
  unicode-bidi: bidi-override;
}

Även om direction: rtl; är avgörande för att ställa in basriktningen, kan du också behöva unicode-bidi: bidi-override; för att säkerställa korrekt hantering av text med blandad riktning. Moderna tillvägagångssätt föredrar ofta logiska egenskaper, vilka diskuteras senare.

2. Skapa vertikala navigeringsmenyer

writing-mode kan användas för att skapa vertikala navigeringsmenyer, vilket ofta ses på japanska och kinesiska webbplatser. Detta kan ge din webbplats en unik visuell känsla:


<ul class="vertical-menu">
  <li><a href="#">Hem</a></li>
  <li><a href="#">Om oss</a></li>
  <li><a href="#">Tjänster</a></li>
  <li><a href="#">Kontakt</a></li>
</ul>


.vertical-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.vertical-menu li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
  background-color: #f0f0f0;
  border-bottom: 1px solid #ccc;
  writing-mode: vertical-rl;
  text-orientation: upright;
}

I detta exempel används text-orientation: upright; för att säkerställa att texten inom de vertikala menyalternativen visas upprätt istället för roterad.

3. Designa layouter i tidskriftsstil

writing-mode kan införlivas för att uppnå layouter i tidskriftsstil. Till exempel kan du ha en stor bild med vertikal text överlagd för att skapa en slående visuell effekt.


<div class="magazine-section">
  <img src="image.jpg" alt="Tidningsbild">
  <div class="vertical-text">Exklusiv intervju</div>
</div>


.magazine-section {
  position: relative;
  width: 500px;
  height: 300px;
}

.magazine-section img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vertical-text {
  position: absolute;
  top: 0;
  right: 10px;
  color: white;
  font-size: 2em;
  writing-mode: vertical-rl;
  text-orientation: upright;
  transform-origin: top right;
  transform: rotate(180deg); /* Krävs för att rendera korrekt i alla webbläsare */
}

transform: rotate(180deg); är ofta nödvändigt för att säkerställa konsekvent rendering i olika webbläsare, särskilt äldre versioner.

4. Förbättra datavisualisering

Inom datavisualisering kan writing-mode vara användbart för att etikettera axlar i diagram och grafer, särskilt när utrymmet är begränsat. Till exempel kan du rotera etiketterna på en vertikal axel för att förhindra att de överlappar varandra.

Avancerade tekniker och överväganden

För att fullt ut utnyttja kraften i writing-mode, överväg dessa avancerade tekniker och viktiga faktorer:

1. Logiska egenskaper och värden

Modern CSS introducerar logiska egenskaper och värden, vilka ger ett mer flexibelt och semantiskt sätt att hantera layout och riktning. Istället för fysiska egenskaper som left och right, används logiska egenskaper som start och end, vilka anpassar sig till skrivriktningen. Till exempel:

margin-inline-start: Motsvarar margin-left i LTR och margin-right i RTL.
padding-block-start: Motsvarar padding-top i horisontella skrivlägen och padding-left eller padding-right i vertikala skrivlägen.

Att använda logiska egenskaper gör din CSS mer anpassningsbar och underhållsvänlig, särskilt när du hanterar flera skrivriktningar.

2. Kombinera `writing-mode` med andra CSS-egenskaper

writing-mode interagerar med andra CSS-egenskaper, såsom text-orientation, direction och unicode-bidi, för att kontrollera textens utseende och beteende. Att förstå dessa interaktioner är avgörande för att uppnå önskat resultat.

text-orientation: Specificerar orienteringen av tecken i vertikala skrivlägen. Värden inkluderar upright, sideways, mixed och use-glyph-orientation.
direction: Specificerar textens basriktning (LTR eller RTL).
unicode-bidi: Kontrollerar hur Unicode's dubbelriktade algoritm tillämpas på elementet.

3. Hantera text med blandad riktning

När man hanterar text som innehåller både LTR- och RTL-tecken (t.ex. engelsk text i ett arabiskt stycke), är det viktigt att använda egenskapen unicode-bidi för att säkerställa korrekt rendering. Värdet bidi-override används ofta för att tvinga en specifik riktning.


<p dir="rtl">هذا نص عربي يتضمن بعض الكلمات الإنجليزية <span style="unicode-bidi: bidi-override; direction: ltr;">like this example.</span></p>

4. Typsnittsöverväganden

Alla typsnitt är inte lämpliga för vertikal skrift. Vissa typsnitt kanske inte innehåller glyfer för vertikal skrift eller kanske inte renderas korrekt. När du använder vertikala skrivlägen, välj typsnitt som är specifikt designade för vertikal text eller som har bra stöd för vertikala glyfer.

Typsnitt från östasiatiska länder (Kina, Japan, Korea) har generellt mycket bra stöd för vertikal skrift.

5. Tillgänglighet

Se till att din användning av writing-mode inte negativt påverkar tillgängligheten. Tillhandahåll alternativ text för bilder och annat icke-textinnehåll, och se till att texten är läsbar och förståelig för användare med funktionsnedsättningar. Använd semantiska HTML-element och ARIA-attribut för att förbättra tillgängligheten.

6. Webbläsarkompatibilitet

writing-mode har bra stöd i moderna webbläsare, men äldre webbläsare kan kräva leverantörsprefix (t.ex. -webkit-writing-mode, -ms-writing-mode). Använd en CSS-preprocessor som Sass eller Less för att automatisera tillägget av leverantörsprefix eller använd ett verktyg som Autoprefixer.

Bästa praxis för att använda `writing-mode`

För att effektivt använda writing-mode och skapa globalt tillgängliga webbplatser, följ dessa bästa praxis:

Använd logiska egenskaper och värden när det är möjligt. Detta gör din CSS mer anpassningsbar och underhållsvänlig.
Välj lämpliga typsnitt för vertikala skrivlägen. Testa dina typsnitt för att säkerställa att de renderas korrekt i vertikal text.
Tänk på tillgängligheten. Se till att din användning av writing-mode inte negativt påverkar tillgängligheten för användare med funktionsnedsättningar.
Testa dina layouter i olika webbläsare och enheter. Se till att dina layouter renderas korrekt på olika plattformar.
Använd CSS-preprocessorer eller Autoprefixer för att hantera leverantörsprefix. Detta sparar dig tid och ansträngning och säkerställer att din CSS är kompatibel med äldre webbläsare.
Separera innehåll från presentation. Använd CSS för att kontrollera presentationen av ditt innehåll och undvik att använda HTML för stiländamål.

Exempel på globala webbplatser som använder `writing-mode`

Många webbplatser runt om i världen använder writing-mode för en mängd olika ändamål, från att anpassa sig till RTL-språk till att skapa visuellt unika layouter. Här är några exempel:

Nyhetswebbplatser på arabiska eller hebreiska: Dessa webbplatser använder direction: rtl och potentiellt writing-mode-justeringar för korrekt visning av text.
Japanska och kinesiska konst- och kulturwebbplatser: Inkorporerar ofta vertikal skrift för rubriker, menyer och dekorativa element.
Modetidningar: Använder ofta vertikal text i visuella layouter för stilistiska effekter.

Slutsats

CSS writing-mode är ett kraftfullt verktyg för att skapa internationaliserade och visuellt engagerande webbplatser. Genom att förstå egenskapens olika värden och hur den interagerar med andra CSS-egenskaper kan du skapa layouter som anpassar sig till olika textriktningar och förbättrar användarupplevelsen för en global publik. Kom ihåg att ta hänsyn till tillgänglighet, webbläsarkompatibilitet och typsnittsval för att säkerställa att dina webbplatser är tillgängliga och visuellt tilltalande för alla användare.

I takt med att webbutvecklingen fortsätter att utvecklas blir det allt viktigare att bemästra tekniker som writing-mode för att skapa verkligt globala och inkluderande onlineupplevelser. Omfamna kraften i internationalisering och skapa webbplatser som når ut till användare från världens alla hörn.