--- title: CSS for Non-Latin Languages description: Designing CSS for Non-Latin Languages on the Web language: Dutch url: >- https://www.voorhoede.nl/nl/blog/designing-css-for-non-latin-languages-on-the-web/ --- Blog # CSS/HTML voor niet-Latijnse talen op het web [](/nl/team/marleen.md) Door [Marleen](/nl/team/marleen.md) 1 September 2025 Pagina kopiëren▾ * [Openen als Markdown](/nl/blog/designing-css-for-non-latin-languages-on-the-web.md) * [Openen in Claude](https://claude.ai/new?q=Lees%20https%3A%2F%2Fwww.voorhoede.nl%2Fnl%2Fblog%2Fdesigning-css-for-non-latin-languages-on-the-web.md%20zodat%20ik%20vragen%20kan%20stellen%20over%20de%20inhoud.) * [Openen in ChatGPT](https://chatgpt.com/?q=Lees%20https%3A%2F%2Fwww.voorhoede.nl%2Fnl%2Fblog%2Fdesigning-css-for-non-latin-languages-on-the-web.md%20zodat%20ik%20vragen%20kan%20stellen%20over%20de%20inhoud.\&hints=search) - [](https://www.linkedin.com/shareArticle?\&url=https://www.voorhoede.nl/nl/blog/designing-css-for-non-latin-languages-on-the-web/\&title=) ## Categorieën * [Accessibility](/nl/blog/tag/accessibility.md) - [De onzichtbare voorkeur voor het Latijnse schrift](#de-onzichtbare-voorkeur-voor-het-latijnse-schrift) - [Generic font](#generic-font) - [Verschillende talen vragen om verschillende lettertypen](#verschillende-talen-vragen-om-verschillende-lettertypen) - [Meerdere talen tegelijk gebruiken met lang](#meerdere-talen-tegelijk-gebruiken-met-lang) - [Tekstrichting met writing-mode en dir](#tekstrichting-met-writing-mode-en-dir) - [Taalspecifieke HTML-tags zoals \](#taalspecifieke-html-tags-zoals-ruby-) - [Wrapping Up](#wrapping-up) Het grootste deel van het internet is geschreven in het Engels, en als westerse ontwikkelaars hebben we de neiging om te bouwen met het Latijnse schrift in gedachten. Maar wat gebeurt er als we interfaces moeten creëren in talen die niet zijn gebaseerd op het Latijn? Na het behalen van een BA in Japanse taalkunde begon ik mijn front-end carrière in Tokio, waar ik meertalige weboplossingen bouwde in het Japans en Engels. Nu ik terug ben in mijn thuisland en werk bij *de Voorhoede*, heb ik gemerkt dat er specifieke CSS/HTML-technieken nodig zijn voor niet-Latijnse scripts die ik niet meer zo vaak gebruik, maar die nog steeds essentiële kennis vormen. Hoewel mijn persoonlijke ervaring geworteld is in het Japans, hebben we bij de Voorhoede ook interfaces gebouwd voor right-to-left niet-Latijnse scripts, wat ons een breder perspectief geeft op meertalige accessibility. In dit artikel deel ik praktische tips voor het bouwen van weboplossingen die niet-Latijnse scripts ondersteunen. De meeste voorbeelden zijn ontleend aan mijn ervaring met Japans, maar de algemene boodschap is toepasbaar voor elke niet-Latijnse taal op het web! ## De onzichtbare voorkeur voor het Latijnse schrift ![World map that shows which countries use predominant non-Latin scripts](https://www.datocms-assets.com/6524/1753098739-map-nl.png) Gebaseerd op gegevens van het CIA world fact book. Er zijn wereldwijd meer dan 50 landen die voornamelijk niet-Latijnse scripts gebruiken. Ondanks dit is het web gebouwd met Engels in gedachten, en de meeste standaardinstellingen weerspiegelen dat nog steeds. Zonder `` worden niet-Latijnse tekens mogelijk helemaal niet weergegeven. Dit komt doordat de[ standaard ASCII](https://www.ascii-code.com/ASCII) alleen Latijnse tekens ondersteunt. ![utf8 meta tag](https://www.datocms-assets.com/6524/1752849832-metatag-1.png) Hoewel deze blog post zich richt op CSS en HTML, is het belangrijk om te onthouden dat Latijnse scripts een oneerlijk voordeel hebben omdat ze de standaard zijn op het gehele web. ## Generic font Niet elk lettertype ondersteunt elk schrift. Terwijl de meeste Latijnse lettertypes werken voor westerse talen, worden niet-Latijnse talen vaak opgebouwd van unicode karakters. Als deze niet worden ondersteund, valt de browser terug op een [generic font](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#generic-name). Bekijk het onderstaande voorbeeld. Het bestaat uit een alinea met zowel Engelse als Japanse tekst. De lettertypen[ *Bebas Neue*](https://fonts.google.com/specimen/Bebas+Neue) en *WingDings* ondersteunen geen Japanse tekens en alleen het Engelse deel van de tekst wordt weergegeven in het beoogde lettertype. In het laatste voorbeeld wordt het [*Yuji Mai*](https://fonts.google.com/specimen/Yuji+Mai) lettertype gebruikt. Dit lettertype ondersteunt zowel Japanse als Engelse tekens, dat valt op te merken doordat de gehele tekst van uiterlijk verandert. ```

これは日本語のテキストで this is English text.

これは日本語のテキストで this is English text.

これは日本語のテキストで this is English text.

これは日本語のテキストで this is English text.

``` ![renderen van Japanse karaketers met verschillende fonts](https://www.datocms-assets.com/6524/1753098892-rendering-nl.png) ## Verschillende talen vragen om verschillende lettertypen Het is niet alleen belangrijk of een lettertype alle tekens in een taal ondersteunt, het lettertype moet ook passend zijn voor de taal. Het gebruik van het verkeerde lettertype voor een taal kan de tekst moeilijk leesbaar maken of zelfs de betekenis geheel veranderen. Dit geldt vooral voor Aziatische talen, waar tekens verschillende penseelstreken of vormen kunnen hebben, afhankelijk van de taal. Neem bijvoorbeeld het Japanse karakter 直. Aan de onderkant zijn er 2 penseelstreken die een soort ‘L’ vormen. ``` 直 直 ``` ``` .japanese-font { font-family: "Noto Sans JP", sans-serif; } .chinese-font { font-family: "Noto Sans SC", sans-serif; } ``` Bij het weergeven van de tekst met een Chinees lettertype verdwijnt de linker penseelstreek en is de 'L'-vorm niet meer zichtbaar. Voor een native speaker is dit karakter nu onherkenbaar geworden. ![Rendering van Japans karakter](https://www.datocms-assets.com/6524/1753099080-character-fail-nl.png) > 💡 Tip: Begin met[ Google's Noto lettertypen](https://fonts.google.com/noto/fonts?query=Noto). Ze zijn ontworpen om een breed scala aan scripts te ondersteunen en er consistent uit te zien in verschillende talen. Google biedt ook een goede plek om te starten als je meer informatie wilt over[ Oost-Aziatische typografie](https://fonts.google.com/knowledge/type_in_china_japan_and_korea/cjk_typesetting_rules). ## Meerdere talen tegelijk gebruiken met lang WCAG Succescriterium 3.1.2 vereist dat delen van een pagina die in verschillende talen zijn geschreven, ook die talen declareren. Dit wordt nog vaak over het hoofd gezien, maar naast accessibility stelt het HTML-attribuut[ lang](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/lang) je in staat om te voorzien in taalspecifieke behoeften zoals *line-height* en *letter-spacing*. Bovendien kunnen browser rendering engines, wanneer je het[ lang](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/lang)-attribuut correct gebruikt, automatisch typografische functies zoals ligaturen en woordafbreking aanpassen aan de conventies van elke taal. Bekijk bijvoorbeeld onderstaande code: ```

これは日本語のテキストで this is English text.同時に使っても問題ない！

``` ``` /* standaard taal is Japans met onderstaande styling */ p { font-family: "Noto Sans JP", sans-serif; } ``` Dit zal er goed uitzien voor de Japanse tekst, maar de Engelse tekst valt terug op het fallback lettertype (zoals besproken in hoofdstuk 2) *sans-serif* en ziet er iets kleiner uit in vergelijking met de Japanse tekst in[ *Noto Sans JP*](https://fonts.google.com/noto/specimen/Noto+Sans+JP). Door het lang-attribuut toe te voegen, verbeter je niet alleen de toegankelijkheid, maar ontgrendel je ook de mogelijkheid om taalspecifieke stijlen in CSS te targeten zonder extra CSS-classes of hacks. ```

これは日本語のテキストで this is English text. 同時に使っても問題ない！

``` ``` /* standaard taal is Japans met onderstaande styling */ p { font-family: "Noto Sans JP", sans-serif; } /* Engelse karakters zullen een andere kleur, font-size en lettertype krijgen */ span:lang(en) { font-family: "Bebas Neue", Arial, sans-serif; font-size: 1.2em; color: #001BF7; } ``` ![Rendering van tekst met meerdere talen](https://www.datocms-assets.com/6524/1753097666-lang-attribute.png) Door simpelweg het juiste lang-attribuut in je HTML in te stellen, zorg je ervoor dat zowel accessibility als styling beter en makkelijker wordt bij meertalige content. ## Tekstrichting met writing-mode en dir Niet alle talen worden zijn left-to-right (LTR). Arabisch bijvoorbeeld wordt van rechts naar links (RTL)geschreven, en Japans kan verticaal van rechts naar links worden geschreven. Gelukkig biedt het web enkele kant-en-klare oplossingen zoals [dir](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/dir) en[ writing-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode) om deze gevallen aan te pakken. Laten we kijken naar voorbeelden voor Arabisch en Japans: ```

هذه الفقرة باللغة العربية ، لذا يجب الانتقال من اليمين إلى اليسار.

これは日本語のテキストです。 There is also some English

``` Het [dir](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/dir) attribuut geeft hier de richting van de tekst van het element aan. > ![Dir attribute](https://www.datocms-assets.com/6524/1753097767-dir-1.png) > 💡 **Tip:** Er is een CSS attribute genaamd [direction](https://developer.mozilla.org/en-US/docs/Web/CSS/direction) met vergelijkbaar resultaat, maar het gebruik van[ dir](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/dir) heeft de voorkeur vanuit accessibility oogmerk. > 💡 **Best practice:** Bij het werken met directionele layouts, overweeg het gebruik van logische eigenschappen zoals[ margin-inline](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline) en[ padding-inline](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline) etc. in plaats van fysieke eigenschappen zoals[ margin-lef](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left)t. Deze passen zich natuurlijker aan verschillende schrijfrichtingen aan. Maar het gaat niet alleen om tekstrichting; sommige scripts worden verticaal geschreven. Dit kan worden bereikt met[ writing-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode). ``` p { writing-mode: vertical-rl } ``` ![verticale writing mode](https://www.datocms-assets.com/6524/1753097853-vertical-mode.png) Bovenstaand kan in sommige gevallen de bedoelde UI zijn, maar vaak wil men de tekens zelf ook verticaal weergeven. Dit kan worden bereikt door[ text-orientation](https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation) toe te voegen. ``` p { writing-mode: vertical-rl; text-orientation: upright; } ``` ![Verticale writing mode met verticale tekst](https://www.datocms-assets.com/6524/1753097894-vertical-mode-2-1.png) ## Taalspecifieke HTML-tags zoals \ Sommige talen vereisen unieke markup-oplossingen. Een daarvan is de **\ **tag, waarmee je kleine tekst boven of naast tekens kunt weergeven om uitspraak of betekenis te tonen. Dit wordt gebruikt in fonetische talen, zoals Japans en Chinees, om de uitspraak van een teken aan te geven wanneer dit onduidelijk is, of de doelgroep taalleerders / jongere kinderen zijn met minder Japanse kennis. ``` 漢 (Kan) 字 (ji) ``` * **rp**: Ruby fallback voor browsers die **\** niet ondersteunen * **rt**: Ruby tekstelement. Dit is het element dat de lezing van de karakters aangeeft. > 💡 **Note:** De \ tag heeft niets te maken met de programmeertaal Ruby. > 💡  **Fun Fact:** Japanse auteurs gebruiken soms **\** stilistisch in romans om sarcasme, dubbele betekenis of onverwachte lezingen te creëren. ## Wrapping Up Als er één ding is dat ik hoop dat meer ontwikkelaars ter harte nemen, is het dit: **behandel niet-Latijnse talen niet als edge-cases.** Voordat je tot hacks over gaat, overweeg het volgende: * Gebruik lettertypes geschikt voor je taal. * Specificeer altijd een [lang](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/lang) attribuut voor elke verschillende taal. * Gebruik [dir](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/dir), [writing-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode) , en [text-orientation](https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation) om de structuur van een taal weer te geven. * Zoek naar taalspecifieke HTML-tags zoals `` voor betere accesibility. Laten we het web beter maken voor iedereen, ook voor de miljoenen mensen die dagelijks een ander schrift gebruiken dan het Latijnse! ## Gerelateerde blog posts * ### [Toegankelijkheid in Design Systems](/nl/blog/toegankelijkheid-in-design-systems.md) 17 Jun 2025 Door Sjoerd * ### [Toegankelijkheid testen op Windows met VirtualBox](/nl/blog/toegankelijkheid-testen-windows-virtualbox.md) 18 Sep 2019 Door Bas * ### [](/nl/blog/designing-css-for-non-latin-languages-on-the-web.md) 27 Dec 2016 Door Bas [← Alle blogposts](/nl/blog.md) ## Heb je een project waar we samen aan kunnen bouwen? [Neem contact met ons op](/nl/contact.md) [Terug naar boven](#top)