CSS for Non-Latin Languages

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 — 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 <meta charset="UTF-8"> worden niet-Latijnse tekens mogelijk helemaal niet weergegeven. Dit komt doordat de standaard ASCII alleen Latijnse tekens ondersteunt.

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.

Bekijk het onderstaande voorbeeld. Het bestaat uit een alinea met zowel Engelse als Japanse tekst. De lettertypen 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 lettertype gebruikt. Dit lettertype ondersteunt zowel Japanse als Engelse tekens, dat valt op te merken doordat de gehele tekst van uiterlijk verandert.

<!-- 
   Er is geen lettertype ingesteld.
   Engelse tekens wordt weergegeven in de default generic font.
   Japanse tekens worden weergegeven in de default generic font.
-->
<p> 
これは日本語のテキストで this is English text. 
</p>

<!-- 
   Bebas Neue is ingesteld.
   Engelse tekens worden ondersteund en weergegeven in het Bebas Neue lettertype.
   Japanse tekens worden niet ondersteund en weergegeven in de default generic font.
 -->
<p class="bebas-neue"> 
これは日本語のテキストで this is English text. 
</p>

<!-- 
   Wingdings is ingesteld.
   Engelse tekens worden ondersteund en weergegeven in het Wingdings lettertype.
   Japanse tekens worden niet ondersteund en weergegeven in de default generic font.
 -->
<p class="wingdings"> 
これは日本語のテキストで this is English text. 
</p>

<!--
   Yuji Mai is ingesteld.
   Engelse tekens worden ondersteund en weergegeven in het Juyi Mai lettertype.
   Japanse tekens worden ondersteund en weergegeven in het Juyi Mai lettertype.
-->

<p class="yuji-mai">
  これは日本語のテキストで this is English text.
</p>

renderen van Japanse karaketers met verschillende fonts

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.

<!-- Japanse tekst gerendered in Japans lettertype (correct) -->
<span class="japanese-font"> 直 </span>

<!-- Japanse text gerendered in Chinees lettertype (incorrect) -->
<span class="chinese-font"> 直 </span>

.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.

💡 Tip: Begin met Google's Noto lettertypen. 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.

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 je in staat om te voorzien in taalspecifieke behoeften zoals line-height en letter-spacing. Bovendien kunnen browser rendering engines, wanneer je het lang-attribuut correct gebruikt, automatisch typografische functies zoals ligaturen en woordafbreking aanpassen aan de conventies van elke taal.

Bekijk bijvoorbeeld onderstaande code:

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

/* 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.

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.

<p>
  これは日本語のテキストで
  <span lang="en">this is English text.</span>
  同時に使っても問題ない！
</p>

/* 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;
}

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 en writing-mode om deze gevallen aan te pakken.

Laten we kijken naar voorbeelden voor Arabisch en Japans:

<!-- Arabisch -->
<p dir="rtl" lang="ar">
  هذه الفقرة باللغة العربية ، لذا يجب الانتقال من اليمين إلى اليسار.
</p>

<!-- Japans met Engels -->
<p dir="ltr" lang="ja">
  これは日本語のテキストです。
  <span lang="en">There is also some English</span>
</p>

Het dir attribuut geeft hier de richting van de tekst van het element aan.

💡 Tip: Er is een CSS attribute genaamd direction met vergelijkbaar resultaat, maar het gebruik van dir heeft de voorkeur vanuit accessibility oogmerk.

💡 Best practice: Bij het werken met directionele layouts, overweeg het gebruik van logische eigenschappen zoals margin-inline en padding-inline etc. in plaats van fysieke eigenschappen zoals margin-left. 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.

p {
  writing-mode: vertical-rl
}

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 toe te voegen.

p {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

Verticale writing mode met verticale tekst

Taalspecifieke HTML-tags zoals <ruby>

Sommige talen vereisen unieke markup-oplossingen. Een daarvan is de <ruby> 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.

<ruby>
  漢 <rp>(</rp><rt>Kan</rt><rp>)</rp>
  字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>

rp: Ruby fallback voor browsers die <ruby> niet ondersteunen
rt: Ruby tekstelement. Dit is het element dat de lezing van de karakters aangeeft.

💡 Note: De <ruby> tag heeft niets te maken met de programmeertaal Ruby.

💡 Fun Fact: Japanse auteurs gebruiken soms <ruby> 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 attribuut voor elke verschillende taal.
Gebruik dir, writing-mode , en text-orientation om de structuur van een taal weer te geven.
Zoek naar taalspecifieke HTML-tags zoals <ruby> voor betere accesibility.