Hvorfor logiske egenskaber: internationalisering

Traditionel CSS bruger fysiske retninger: top, right, bottom, left. Det fungerer fint for sprog, der skrives fra venstre mod højre (LTR), som engelsk, men giver problemer for sprog, der skrives fra højre mod venstre (RTL), som arabisk og hebraisk, eller for lodrette skriftsystemer som traditionel japansk.

Sammenlign:

• Fysiske: top, right, bottom, left — fastlagt i forhold til skærmen
• Logiske: block-start, block-end, inline-start, inline-end — relative i forhold til skrivetilstanden

Alle skriftsystemer har:

• Blokakse: retningen, som tekstblokke stables i (lodret i LTR/RTL, vandret i lodret skrift)
• Inline-akse: retningen, som teksten løber i inden for en linje (vandret i LTR/RTL, lodret i lodret skrift)

I LTR (engelsk): inline-start = left, inline-end = right. I RTL (arabisk): inline-start = right, inline-end = left. Logiske egenskaber tilpasser sig automatisk uden medieforespørgsler eller JavaScript.

Et websted, der er skrevet med fysiske egenskaber, kræver et separat stilark med RTL-tilsidesættelser eller tilsidesættelser for hver margin-, padding-, border-, position- og text-alignment-egenskab, der skal spejlvendes. Det fordobler vedligeholdelsesarbejdet.

Når writing-mode: vertical-rl er angivet (lodret japansk/koreansk skrift), bliver blokaksen vandret, og inline-aksen bliver lodret. Logiske egenskaber tilpasser sig automatisk.

Alle større browsere understøtter logiske egenskaber. CSS-specifikationen anbefaler nu at bruge logiske egenskaber for enhver egenskab, der vedrører en retning, som kan ændre sig med skrivetilstanden eller retningen.

Én kodebase, der bruger logiske egenskaber korrekt, understøtter LTR, RTL og lodret skrift uden duplikering. CSS følger blot værdierne for direction og writing-mode på rodelementet.

Angiv skriveretningen i HTML, ikke kun i CSS:

Du behøver ikke omskrive al din CSS på én gang. Begynd at bruge logiske egenskaber i nye komponenter. Med tiden kan du refaktorere fysiske egenskaber i komponenter, der indgår i områder, hvor internationalisering er vigtig.

CSS-egenskaben direction (ltr eller rtl) påvirker retningen for inline-flowet. Den fungerer sammen med writing-mode for at definere den komplette kontekst for skriftsystemet i elementet.

CSS' logiske egenskaber bruger blok-/inline-modellen i stedet for de fysiske top/right/bottom/left. Det gør det muligt for ét stilark at fungere med LTR, RTL og lodrette skriftsystemer. Egenskaberne direction og writing-mode definerer den kontekst, som de logiske egenskaber automatisk tilpasser sig til.