--- title: 'How to: Meertalige website geschikt maken voor RTL en LTR' description: >- Bouw je een meertalige website? Wij delen 3 tips om jouw website geschikt te maken voor RTL en LTR talen met enkel HTML en CSS. language: Dutch url: 'https://www.voorhoede.nl/nl/blog/how-to-meertalige-website-rtl-html-css/' --- Blog # Hoe maak je jouw meertalige website geschikt voor RTL met alleen HTML en CSS [](/nl/team/declan.md) By [Declan](/nl/team/declan.md) 13 June 2022 * [](https://www.facebook.com/sharer.php?u=https://www.voorhoede.nl/nl/blog/how-to-meertalige-website-rtl-html-css/) * [](https://www.linkedin.com/shareArticle?\&url=https://www.voorhoede.nl/nl/blog/how-to-meertalige-website-rtl-html-css/\&title=) - [1. Definieer de tekstrichting op je website](#-definieer-de-tekstrichting-op-je-website) - [2. Gebruik CSS-logische eigenschappen](#-gebruik-css-logische-eigenschappen) - [3. Geef unicode ranges aan lettertypen](#-geef-unicode-ranges-aan-lettertypen) 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". ``` ``` 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](https://twitter.com/blvdmitry/status/1536288797075329025) 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 } ``` [← All blog posts](/nl/blog.md) ## Hulp nodig met je meertalige website? Jasper CTO, Co-founder Don't fill this out if you're human:My name isYour nameMy business isCompany nameYou can email me atEmail addressYou can call me atPhone numberMy question or project isGet in touch [Return to top](#top)