Arabisch, Hebreeuws en Perzisch zijn tegenwoordig de meest voorkomende schrijfsystemen van rechts naar links. Als je een meertalige website maakt waarbij je LTR-talen wilt combineren met RTL-talen, zijn er een paar dingen die je moet weten.
Je zou kunnen denken dat het ingewikkeld is, maar het is vrij eenvoudig toe te passen. Het is eigenlijk een standaardgeschenk in HTML en CSS. Dat is iets waar we van houden aan het web. Geen behoefte aan extra plugins. Gebruik dus deze kennis in je voordeel. Zonder verdere omhaal, hier zijn 3 belangrijke zaken om je meertalige website geschikt te maken voor RTL en LTR.
1. Definieer de tekstrichting op je website
Same as you can define a language, you’re able to define a text direction on your website. Using the dir attribute to set the base direction of text for display. When the language on your website is like English, Spanish or Dutch use dir=”ltr”. When it’s written in Arabic, Hebrew or Persian use dir=”rtl”.
Net zoals je een taal kunt definiëren, kun je ook een tekstrichting op je website definiëren. Gebruik het dir attribuut om de basisrichting van tekst voor weergave in te stellen. Wanneer de taal op je website zoals Engels, Spaans of Nederlands is, gebruik dir="ltr". Als het geschreven is in het Arabisch, Hebreeuws of Perzisch gebruik je dir="rtl".
<html lang=”ar-MA” dir=”rtl”>Er is ook een CSS-eigenschap genaamd direction die hetzelfde effect heeft als het dir-attribuut. Ik raad het dir attribuut aan, omdat het een impliciete semantische waarde heeft aangezien de volgorde van elementen verandert wanneer de tekstrichting verandert. Zowel het HTML-attribuut als de CSS-eigenschap verplaatsen naar beneden en kunnen op een lager niveau worden overschreven.
2. Gebruik CSS-logische eigenschappen
When you’re changing your website from LTR to RTL some objects may lose the margins or paddings you defined. All CSS properties with left or right in them, need to be switched to the other side. In the old days we needed to do something like this:
Wanneer je je website van LTR naar RTL verandert, verliezen sommige objecten de marges of padding die je hebt gedefinieerd. Alle CSS-eigenschappen met left of right erin, moeten naar de andere kant worden omgeschakeld. Vroeger moesten we iets doen als dit:
.absolute-element {
position: absolute;
}
[dir="rtl"] .absolute-element {
right: 50px;
}
[dir="ltr"] .absolute-element {
left: 50px;
}Maar tegenwoordig kunnen CSS-logische operatoren je helpen om de meeste problemen op te lossen.
Je kunt inline gebruiken voor de as waarlangs de tekst stroomt en block voor de as onder een rechte hoek van die waarlangs de tekst stroomt.
Ik raad je aan om 'inline' te gebruiken in plaats van left/right, 'block' in plaats van top/bottom, 'start' in plaats van top en end in plaats van bottom (redenerend vanuit LTR-talen). Op deze manier zal het ondersteunen van verschillende tekstrichtingen natuurlijk gaan.
Als je ook talen wilt ondersteunen die van boven naar beneden worden gelezen, wil je misschien zelfs heroverwegen om width en height te gebruiken en inline-size te gebruiken in plaats van width en block-size in plaats van height. Deze CSS-eigenschappen voldoen aan de CSS writing-mode eigenschap.
Op X wees Dmitry Belyaev me erop dat er ook logische eigenschappen zijn voor absolute, relatieve of vaste elementen. Dus left wordt inset-inline-start, right wordt inset-inline-end, top wordt inset-block-start en bottom wordt inset-block-end.
Hier zijn enkele voorbeelden om het verder te verduidelijken:
border-block-start: 10px; // border-top: 10px;
padding-inline-end: 10px; // padding-right: 10px;
margin-block-start: 10px; // margin-top: 10px;
text-align: start; // text-align: left;
inline-size: 100px; // width: 100px;
max-block-size: 100px; // max-height: 100px;3. Geef unicode ranges aan lettertypen
Het lettertype dat je hebt gekozen voor je website is mogelijk niet geschikt voor alle talen. Je kunt unicode ranges definiëren om het specifieke bereik van karakters in te stellen dat moet worden gebruikt vanuit een lettertype gedefinieerd door @font-face. Hiermee zorg je ervoor dat het lettertype alleen wordt geladen wanneer een karakter op het scherm binnen die specifieke unicode range valt. Hieronder zie je een voorbeeld van Arabische tekens in een ander lettertype dan Latijnse tekens:
@font-face {
font-family: "My Latin Font";
src: url("MyLatinFont.woff2") format("woff2-variations"),
url("MyLatinFont.woff2") format("woff2"),
url("MyLatinFont.woff") format("woff");
unicode-range: U+0000-007F; // Latin
}
@font-face {
font-family: "My Arabic Font";
src: url("MyArabicFont.woff2") format("woff2-variations"),
url("MyArabicFont.woff2") format("woff2"),
url("MyArabicFont.woff") format("woff");
unicode-range: U+0600-06FF; // Arabic
}
