Hvorfor logiske egenskaper: internasjonalisering

Tradisjonell CSS bruker fysiske retninger: top, right, bottom og left. Dette fungerer fint for språk som skrives fra venstre mot høyre (LTR), som engelsk, men fungerer dårlig for språk som skrives fra høyre mot venstre (RTL), som arabisk og hebraisk, eller for vertikale skrivesystemer som tradisjonell japansk.

Sammenlign:

• Fysiske: top, right, bottom og left – fast knyttet til skjermen
• Logiske: block-start, block-end, inline-start og inline-end – relative til skrivemodusen

Alle skrivesystemer har:

• Blokkakse: retningen tekstblokker stables i (vertikalt i LTR/RTL, horisontalt i vertikal skriving)
• Inline-akse: retningen teksten flyter i innenfor en linje (horisontalt i LTR/RTL, vertikalt i vertikal skriving)

I LTR (engelsk): inline-start = venstre, inline-end = høyre. I RTL (arabisk): inline-start = høyre, inline-end = venstre. Logiske egenskaper tilpasser seg automatisk uten mediespørringer eller JavaScript.

Et nettsted som er skrevet med fysiske egenskaper, trenger et separat stilark med RTL-overstyringer eller overstyringer for hver margin-, padding-, kantlinje-, posisjons- og tekstjusteringsegenskap som skal snus. Dette dobler vedlikeholdsarbeidet.

Når writing-mode: vertical-rl er angitt (vertikal japansk/koreansk), blir blokkaksen horisontal og inline-aksen vertikal. Logiske egenskaper tilpasser seg automatisk.

Alle større nettlesere støtter logiske egenskaper. CSS-spesifikasjonen anbefaler nå å bruke logiske egenskaper for alle egenskaper som gjelder en retning som kan endres med skrivemodus eller tekstretning.

Én kodebase som bruker logiske egenskaper riktig, støtter LTR, RTL og vertikal skriving uten duplisering. CSS følger ganske enkelt verdiene for direction og writing-mode på rotelementet.

Angi skriveretningen i HTML, ikke bare i CSS:

Du trenger ikke å skrive om all CSS på én gang. Begynn å bruke logiske egenskaper i nye komponenter. Etter hvert kan du refaktorere fysiske egenskaper i komponenter som inngår i områder der internasjonalisering er viktig.

CSS-egenskapen direction (ltr eller rtl) påvirker retningen for inline-flyt. Den fungerer sammen med writing-mode for å definere hele skrivesystemkonteksten til elementet.

Logiske CSS-egenskaper bruker blokk-/inline-modellen i stedet for fysiske top/right/bottom/left. Dette gjør at ett stilark kan fungere for LTR, RTL og vertikale skrivesystemer. Egenskapene direction og writing-mode definerer konteksten som logiske egenskaper tilpasser seg automatisk.