[{"data":1,"prerenderedAt":364},["ShallowReactive",2],{"DefaultLayoutnl":3,"language-blog-slug-designing-css-for-non-latin-languages-on-the-web-i18n-slugs":132,"language-blog-slug-nl-designing-css-for-non-latin-languages-on-the-web":138},{"app":4,"menu":31,"footer":66},{"githubUrl":5,"youtubeUrl":6,"linkedinUrl":7,"phoneNumber":8,"emailAddress":9,"legal":10,"addresses":20},"https:\u002F\u002Fgithub.com\u002Fvoorhoede\u002F","https:\u002F\u002Fwww.youtube.com\u002Fchannel\u002FUCzHuhQVYFRixtQN2-swcuGg","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fde-voorhoede","+31 20 2610 954","post@voorhoede.nl",[11,14,17],{"title":12,"value":13},"KvK","56017235",{"title":15,"value":16},"BTW","NL851944620B01",{"title":18,"value":19},"IBAN","NL14TRIO0320142078",[21,26],{"address":22,"city":23,"googleMapsLink":24,"postalCode":25},"Koivistokade 70","Amsterdam","https:\u002F\u002Fwww.google.com\u002Fmaps\u002Fplace\u002FDe+Voorhoede+%7C+Front-end+Development\u002F@52.396847,4.8700823,17z\u002Fdata=!3m1!4b1!4m5!3m4!1s0x47c5e21d502d2d59:0xbf570944a96ebf45!8m2!3d52.347647!4d4.8502154","1013 BB",{"address":27,"city":28,"googleMapsLink":29,"postalCode":30},"Koornmarkt 22","Delft","https:\u002F\u002Fwww.google.nl\u002Fmaps\u002Fplace\u002FKoornmarkt+22,+2611+EG+Delft\u002F@52.0093477,4.3573054,17z\u002F","2611 EG",{"title":32,"callToActions":33,"links":39},"Site Menu",[34],{"id":35,"title":36,"link":37},"163140903","Contact",{"__typename":38},"ContactRecord",[40,46,51,56,61],{"id":41,"title":42,"link":43},"163140909","Impact",{"__typename":44,"slug":45},"PageRecord","impact",{"id":47,"title":48,"link":49},"163140910","Services",{"__typename":50},"ServiceOverviewRecord",{"id":52,"title":53,"link":54},"163140911","Cases",{"__typename":55},"CaseOverviewRecord",{"id":57,"title":58,"link":59},"163140913","Over ons",{"__typename":44,"slug":60},"about-us",{"id":62,"title":63,"link":64},"NnUFs73_Saa8XE_jYZFHcw","Werken bij",{"__typename":44,"slug":65},"work-at",{"links":67,"copyrightTitle":93,"copyrightLabel":94,"copyrightLink":95,"privacyTitle":96,"privacyLabel":97,"privacyLink":98,"certificatesGrid":99},[68,71,74,77,82,85,88],{"id":69,"title":42,"link":70},"144185271",{"__typename":44,"slug":45},{"id":72,"title":48,"link":73},"144185272",{"__typename":50},{"id":75,"title":53,"link":76},"144185273",{"__typename":55},{"id":78,"title":79,"link":80},"144185274","Blog",{"__typename":81},"BlogPostOverviewRecord",{"id":83,"title":58,"link":84},"144185275",{"__typename":44,"slug":60},{"id":86,"title":36,"link":87},"144185276",{"__typename":38},{"id":89,"title":90,"link":91},"144185277","FAQ",{"__typename":44,"slug":92},"faq","Creative Commons licentie en disclaimer","CC BY 4.0","https:\u002F\u002Fcreativecommons.org\u002Flicenses\u002Fby\u002F4.0\u002F","PDF bestand van De Voorhoede privacy statement","Privacy statement","https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1763455427-vh-isms-007-privacy-statement-de-voorhoede-nl.pdf",[100,112,122],{"id":101,"image":102,"link":107},"Xq4bBfg_TZ6Fkjax9mkbLQ",{"url":103,"alt":104,"width":105,"height":106},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353463-b-corp-logo-black-rgb.png",null,404,680,{"__typename":108,"id":109,"title":110,"url":111},"ExternalLinkRecord","fGW1ak8XQYaYDLkBSyncog","B Corp","https:\u002F\u002Fwww.bcorporation.net\u002Fen-us\u002Ffind-a-b-corp\u002Fcompany\u002Fde-voorhoede\u002F",{"id":113,"image":114,"link":118},"c5mCXRTiSraRIB25fw1p7Q",{"url":115,"alt":104,"width":116,"height":117},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353461-dda-boxlogo-black.png",627,480,{"__typename":108,"id":119,"title":120,"url":121},"P6Jh7B0cTv2cKyNEeKVWVQ","Dutch Digital Agencies","https:\u002F\u002Fdutchdigitalagencies.com\u002Fleden\u002Fde-voorhoede\u002F",{"id":123,"image":124,"link":127},"MT5SCyNxSTSr_v5eeATMZw",{"url":125,"alt":104,"width":126,"height":126},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1775730283-dnv.png",518,{"id":128,"title":129,"link":130},"BRtNB5HnT5i-7HkA8IYzBw","DIV",{"__typename":44,"slug":131},"impact\u002Fdigitale-producten-privacy-by-design",[133,136],{"locale":134,"value":135},"en","designing-css-for-non-latin-languages-on-the-web",{"locale":137,"value":135},"nl",{"page":139},{"slug":135,"i18nSlugs":140,"social":143,"title":146,"subtitle":79,"isArchived":147,"headerIllustration":148,"date":152,"authors":153,"introTitle":162,"items":163,"pivots":314,"relatedBlogPosts":330,"tags":331,"onMountedScript":156,"onUnmountedScript":156},[141,142],{"locale":134,"value":135},{"locale":137,"value":135},{"title":144,"description":145,"image":104},"CSS for Non-Latin Languages","Designing CSS for Non-Latin Languages on the Web","CSS\u002FHTML voor niet-Latijnse talen op het web",false,{"url":149,"alt":104,"width":150,"height":151},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1655104054-multilingual.svg",581,365,"2025-09-01T09:23:50.428+02:00",[154],{"name":155,"lastName":156,"slug":157,"image":158},"Marleen","","marleen",{"url":159,"alt":104,"width":160,"height":161},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1760339746-marleen-edit.jpeg",1431,1908,"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?",[164,168,171,181,184,190,193,197,202,208,212,215,219,222,228,231,235,238,241,244,247,250,257,260,264,267,270,276,279,282,288,291,294,300,304,307,310],{"__typename":165,"id":166,"title":156,"body":167},"TextSectionRecord","dKHN2xsjRdW4tYnAUQl26A","\u003Cp>\u003Cspan style=\"font-weight: 400;\">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 \u003C\u002Fspan>\u003Ci>\u003Cspan style=\"font-weight: 400;\">de Voorhoede\u003C\u002Fspan>\u003C\u002Fi>\u003Cspan style=\"font-weight: 400;\">, heb ik gemerkt dat er specifieke CSS\u002FHTML-technieken nodig zijn voor niet-Latijnse scripts die ik niet meer zo vaak gebruik, maar die nog steeds essentiële kennis vormen.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">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.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">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!\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":165,"id":169,"title":170,"body":156},"AasnrU8nR5SOCZp58DJRFg","De onzichtbare voorkeur voor het Latijnse schrift",{"__typename":172,"id":173,"image":174,"caption":179,"fullWidth":147,"captionPosition":180},"ImageRecord","J0rlv_nvSUukheeX2e1p8A",{"url":175,"alt":176,"width":177,"height":178},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1753098739-map-nl.png","World map that shows which countries use predominant non-Latin scripts",1320,822,"Gebaseerd op gegevens van het CIA world fact book.","bottom",{"__typename":165,"id":182,"title":156,"body":183},"PZpyLQEASBeNgWi0-kuAFg","\u003Cp>\u003Cspan style=\"font-weight: 400;\">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 \u003C\u002Fspan>\u003Ccode><meta charset=\"UTF-8\">\u003C\u002Fcode> \u003Cspan style=\"font-weight: 400;\">worden niet-Latijnse tekens mogelijk helemaal niet weergegeven. Dit komt doordat de\u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fwww.ascii-code.com\u002FASCII\">\u003Cspan style=\"font-weight: 400;\"> \u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">standaard ASCII\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\"> alleen Latijnse tekens ondersteunt.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003C!-- notionvc: 57f1f17a-4d92-427a-8ae8-2ac74719f19c -->\u003C\u002Fp>",{"__typename":172,"id":185,"image":186,"caption":156,"fullWidth":147,"captionPosition":180},"Xd0er-ZvRlSTQr8CAMupfA",{"url":187,"alt":188,"width":177,"height":189},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1752849832-metatag-1.png","utf8 meta tag",810,{"__typename":165,"id":191,"title":156,"body":192},"Ff94OwZZREyoYl4DhhCefA","\u003Cp>\u003Cspan style=\"font-weight: 400;\">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.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003C!-- notionvc: 57f1f17a-4d92-427a-8ae8-2ac74719f19c -->\u003C\u002Fp>",{"__typename":165,"id":194,"title":195,"body":196},"NEnbwgOVSay2sgB7z4yk1g","Generic font","\u003Cp>\u003Cspan style=\"font-weight: 400;\">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 \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Ffont-family#generic-name\">\u003Cspan style=\"font-weight: 400;\">generic font\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\">.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Bekijk het onderstaande voorbeeld. Het bestaat uit een alinea met zowel Engelse als Japanse tekst. De lettertypen\u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Ffonts.google.com\u002Fspecimen\u002FBebas+Neue\">\u003Cspan style=\"font-weight: 400;\"> \u003C\u002Fspan>\u003Ci>\u003Cspan style=\"font-weight: 400;\">Bebas Neue\u003C\u002Fspan>\u003C\u002Fi>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\"> en \u003C\u002Fspan>\u003Ci>\u003Cspan style=\"font-weight: 400;\">WingDings\u003C\u002Fspan>\u003C\u002Fi>\u003Cspan style=\"font-weight: 400;\"> ondersteunen geen Japanse tekens en alleen het Engelse deel van de tekst wordt weergegeven in het beoogde lettertype. In het laatste voorbeeld wordt het \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Ffonts.google.com\u002Fspecimen\u002FYuji+Mai\">\u003Ci>\u003Cspan style=\"font-weight: 400;\">Yuji Mai\u003C\u002Fspan>\u003C\u002Fi>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\"> lettertype gebruikt. Dit lettertype ondersteunt zowel Japanse als Engelse tekens, dat valt op te merken doordat de gehele tekst van uiterlijk verandert.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003C!-- notionvc: 9a783e11-c034-4fe5-bc06-6644dc31472b -->\u003C\u002Fp>",{"__typename":198,"id":199,"language":200,"body":201},"CodeBlockRecord","TXY0GL7PQAiNzB1Ut-ILnA","html","\u003C!-- \n   Er is geen lettertype ingesteld.\n   Engelse tekens wordt weergegeven in de default generic font.\n   Japanse tekens worden weergegeven in de default generic font.\n-->\n\u003Cp> \nこれは日本語のテキストで this is English text. \n\u003C\u002Fp>\n\n\u003C!-- \n   Bebas Neue is ingesteld.\n   Engelse tekens worden ondersteund en weergegeven in het Bebas Neue lettertype.\n   Japanse tekens worden niet ondersteund en weergegeven in de default generic font.\n -->\n\u003Cp class=\"bebas-neue\"> \nこれは日本語のテキストで this is English text. \n\u003C\u002Fp>\n\n\u003C!-- \n   Wingdings is ingesteld.\n   Engelse tekens worden ondersteund en weergegeven in het Wingdings lettertype.\n   Japanse tekens worden niet ondersteund en weergegeven in de default generic font.\n -->\n\u003Cp class=\"wingdings\"> \nこれは日本語のテキストで this is English text. \n\u003C\u002Fp>\n\n\u003C!--\n   Yuji Mai is ingesteld.\n   Engelse tekens worden ondersteund en weergegeven in het Juyi Mai lettertype.\n   Japanse tekens worden ondersteund en weergegeven in het Juyi Mai lettertype.\n-->\n\n\u003Cp class=\"yuji-mai\">\n  これは日本語のテキストで this is English text.\n\u003C\u002Fp>",{"__typename":172,"id":203,"image":204,"caption":156,"fullWidth":147,"captionPosition":180},"L0vXrkAATBeCyv12ewbT_A",{"url":205,"alt":206,"width":177,"height":207},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1753098892-rendering-nl.png","renderen van Japanse karaketers met verschillende fonts",894,{"__typename":165,"id":209,"title":210,"body":211},"KkaC2X5CTpC-phMjNTkxeg","Verschillende talen vragen om verschillende lettertypen","\u003Cp>\u003Cspan style=\"font-weight: 400;\">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.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Neem bijvoorbeeld het Japanse karakter 直. Aan de onderkant zijn er 2 penseelstreken die een soort ‘L’ vormen.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">\u003Cimg src=\"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1753098964-screenshot-2025-07-16-at-16-56-02.png\" \u002F>\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":198,"id":213,"language":200,"body":214},"YaFpWfwUSgG_UMsG0KnZrg","\u003C!-- Japanse tekst gerendered in Japans lettertype (correct) -->\n\u003Cspan class=\"japanese-font\"> 直 \u003C\u002Fspan>\n\n\u003C!-- Japanse text gerendered in Chinees lettertype (incorrect) -->\n\u003Cspan class=\"chinese-font\"> 直 \u003C\u002Fspan>",{"__typename":198,"id":216,"language":217,"body":218},"Bj2m8P77R6-_6tIMt5t3GQ","css",".japanese-font {\n  font-family: \"Noto Sans JP\", sans-serif;\n}\n.chinese-font {\n  font-family: \"Noto Sans SC\", sans-serif;\n}\n",{"__typename":165,"id":220,"title":156,"body":221},"EQjxrHcsRreEVMKYX1Mh9A","\u003Cp>\u003Cspan style=\"font-weight: 400;\">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.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":172,"id":223,"image":224,"caption":156,"fullWidth":147,"captionPosition":180},"Tomk4FjVSHWGcZDjMcns1w",{"url":225,"alt":226,"width":177,"height":227},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1753099080-character-fail-nl.png","Rendering van Japans karakter",608,{"__typename":165,"id":229,"title":156,"body":230},"cMsiN7pkThi8D-yGgN-80A","\u003Cblockquote>\n\u003Cp>\u003Cspan style=\"background-color: transparent; font-family: inherit; font-size: inherit; font-style: inherit; font-variant-ligatures: inherit; font-variant-caps: inherit; letter-spacing: 0px;\">💡 Tip: Begin met\u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Ffonts.google.com\u002Fnoto\u002Ffonts?query=Noto\" style=\"font-weight: 400; letter-spacing: 0px;\"> Google's Noto lettertypen\u003C\u002Fa>\u003Cspan style=\"background-color: transparent; font-family: inherit; font-size: inherit; font-style: inherit; font-variant-ligatures: inherit; font-variant-caps: inherit; letter-spacing: 0px;\">. 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\u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Ffonts.google.com\u002Fknowledge\u002Ftype_in_china_japan_and_korea\u002Fcjk_typesetting_rules\" style=\"font-weight: 400; letter-spacing: 0px;\"> Oost-Aziatische typografie\u003C\u002Fa>\u003Cspan style=\"background-color: transparent; font-family: inherit; font-size: inherit; font-style: inherit; font-variant-ligatures: inherit; font-variant-caps: inherit; letter-spacing: 0px;\">.\u003C\u002Fspan>\u003C\u002Fp>\n\u003C\u002Fblockquote>",{"__typename":165,"id":232,"title":233,"body":234},"NRp72M4CTEGKlfZHj-LSmA","Meerdere talen tegelijk gebruiken met lang","\u003Cp>\u003Cspan style=\"font-weight: 400;\">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\u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FReference\u002FGlobal_attributes\u002Flang\">\u003Cspan style=\"font-weight: 400;\"> \u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">lang\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\"> je in staat om te voorzien in taalspecifieke behoeften zoals \u003C\u002Fspan>\u003Ci>\u003Cspan style=\"font-weight: 400;\">line-height\u003C\u002Fspan>\u003C\u002Fi>\u003Cspan style=\"font-weight: 400;\"> en \u003C\u002Fspan>\u003Ci>\u003Cspan style=\"font-weight: 400;\">letter-spacing\u003C\u002Fspan>\u003C\u002Fi>\u003Cspan style=\"font-weight: 400;\">. Bovendien kunnen browser rendering engines, wanneer je het\u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FReference\u002FGlobal_attributes\u002Flang\">\u003Cspan style=\"font-weight: 400;\"> \u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">lang\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\">-attribuut correct gebruikt, automatisch typografische functies zoals ligaturen en woordafbreking aanpassen aan de conventies van elke taal.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Bekijk bijvoorbeeld onderstaande code:\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":198,"id":236,"language":200,"body":237},"T2cYWPAiTnC3OyIb2LCtEg","\u003Cp>\nこれは日本語のテキストで this is English text.同時に使っても問題ない！\u003C\u002Fp>",{"__typename":198,"id":239,"language":217,"body":240},"I5nNU5SWRl6VyOojQ5CliQ","\u002F* standaard taal is Japans met onderstaande styling *\u002F\np { \nfont-family: \"Noto Sans JP\", sans-serif; \n}",{"__typename":165,"id":242,"title":156,"body":243},"MSab61CxQu-IsuKI9EA6pQ","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Dit zal er goed uitzien voor de Japanse tekst, maar de Engelse tekst valt terug op het fallback lettertype (zoals besproken in hoofdstuk 2) \u003C\u002Fspan>\u003Ci>\u003Cspan style=\"font-weight: 400;\">sans-serif\u003C\u002Fspan>\u003C\u002Fi>\u003Cspan style=\"font-weight: 400;\"> en ziet er iets kleiner uit in vergelijking met de Japanse tekst in\u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Ffonts.google.com\u002Fnoto\u002Fspecimen\u002FNoto+Sans+JP\">\u003Cspan style=\"font-weight: 400;\"> \u003C\u002Fspan>\u003Ci>\u003Cspan style=\"font-weight: 400;\">Noto Sans JP\u003C\u002Fspan>\u003C\u002Fi>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\">.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">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.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":198,"id":245,"language":200,"body":246},"BP-6l_rHSLWf5N7B3q0exQ","\u003Cp>\n  これは日本語のテキストで\n  \u003Cspan lang=\"en\">this is English text.\u003C\u002Fspan>\n  同時に使っても問題ない！\n\u003C\u002Fp>\n",{"__typename":198,"id":248,"language":217,"body":249},"Mapj7Q9_Q4aWn5VwLSCT_Q","\u002F* standaard taal is Japans met onderstaande styling *\u002F\np { \nfont-family: \"Noto Sans JP\", sans-serif; \n} \n\n\u002F* Engelse karakters zullen een andere kleur, font-size en lettertype krijgen *\u002F\nspan:lang(en) { \nfont-family: \"Bebas Neue\", Arial, sans-serif; \nfont-size: 1.2em; \ncolor: #001BF7;\n}\n",{"__typename":172,"id":251,"image":252,"caption":156,"fullWidth":147,"captionPosition":180},"SwFGgjRXQGKhtPxLAVi0dQ",{"url":253,"alt":254,"width":255,"height":256},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1753097666-lang-attribute.png","Rendering van tekst met meerdere talen",1078,126,{"__typename":165,"id":258,"title":156,"body":259},"KqoRlbh9QA2QUFYn6Y3Rqw","\u003Cp>\u003Cspan style=\"font-weight: 400;\">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.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":165,"id":261,"title":262,"body":263},"MPECD78ZRz2zWtpB0iCryw","Tekstrichting met writing-mode en dir","\u003Cp>\u003Cspan style=\"font-weight: 400;\">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\u003C\u002Fspan> \u003Ca href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FReference\u002FGlobal_attributes\u002Fdir\">\u003Cspan style=\"font-weight: 400;\">dir\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\"> en\u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Fwriting-mode\">\u003Cspan style=\"font-weight: 400;\"> \u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">writing-mode\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\"> om deze gevallen aan te pakken.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Laten we kijken naar voorbeelden voor Arabisch en Japans:\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":198,"id":265,"language":200,"body":266},"CbuWu7vaQjiYcVy-kMpf3g","\u003C!-- Arabisch -->\n\u003Cp dir=\"rtl\" lang=\"ar\">\n  هذه الفقرة باللغة العربية ، لذا يجب الانتقال من اليمين إلى اليسار.\n\u003C\u002Fp>\n\n\u003C!-- Japans met Engels -->\n\u003Cp dir=\"ltr\" lang=\"ja\">\n  これは日本語のテキストです。\n  \u003Cspan lang=\"en\">There is also some English\u003C\u002Fspan>\n\u003C\u002Fp>\n",{"__typename":165,"id":268,"title":156,"body":269},"E_HeypbQRBuT-pwEh3sh2Q","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Het \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FReference\u002FGlobal_attributes\u002Fdir\">dir\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\"> attribuut geeft hier de richting van de tekst van het element aan.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cblockquote>\u003C\u002Fblockquote>",{"__typename":172,"id":271,"image":272,"caption":156,"fullWidth":147,"captionPosition":180},"GywtGlU0QM6eX5M2h4RpaQ",{"url":273,"alt":274,"width":177,"height":275},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1753097767-dir-1.png","Dir attribute",632,{"__typename":165,"id":277,"title":156,"body":278},"DajBaHJGSv6cqSnrtIMp0g","\u003Cblockquote>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">💡 \u003C\u002Fspan>\u003Cb style=\"letter-spacing: 0px;\">Tip:\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\"> Er is een CSS attribute genaamd \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Fdirection\" style=\"letter-spacing: 0px;\">\u003Cspan>direction\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\"> met vergelijkbaar resultaat, maar het gebruik van\u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FReference\u002FGlobal_attributes\u002Fdir\" style=\"letter-spacing: 0px;\">\u003Cspan> \u003C\u002Fspan>\u003Cspan>dir\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\"> heeft de voorkeur vanuit accessibility oogmerk.\u003C\u002Fspan>\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">💡 \u003C\u002Fspan>\u003Cb>Best practice:\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\"> Bij het werken met directionele layouts, overweeg het gebruik van logische eigenschappen zoals\u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Fmargin-inline\">\u003Cspan style=\"font-weight: 400;\"> \u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">margin-inline\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\"> en\u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Fpadding-inline\">\u003Cspan style=\"font-weight: 400;\"> \u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">padding-inline\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\"> etc. in plaats van fysieke eigenschappen zoals\u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Fmargin-left\">\u003Cspan style=\"font-weight: 400;\"> \u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">margin-lef\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\">t. Deze passen zich natuurlijker aan verschillende schrijfrichtingen aan.\u003C\u002Fspan>\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Maar het gaat niet alleen om tekstrichting; sommige scripts worden verticaal geschreven. Dit kan worden bereikt met\u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Fwriting-mode\">\u003Cspan style=\"font-weight: 400;\"> \u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">writing-mode\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\">.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":198,"id":280,"language":217,"body":281},"Bo7OGm0kQ167G0x8A87-Aw","p {\n  writing-mode: vertical-rl\n}\n",{"__typename":172,"id":283,"image":284,"caption":156,"fullWidth":147,"captionPosition":180},"Y-zjnXS1TEyPMcEhCW9oIA",{"url":285,"alt":286,"width":177,"height":287},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1753097853-vertical-mode.png","verticale writing mode",536,{"__typename":165,"id":289,"title":156,"body":290},"bnVtWAhySCKfU-f_5em-bQ","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Bovenstaand kan in sommige gevallen de bedoelde UI zijn, maar vaak wil men de tekens zelf ook verticaal weergeven. Dit kan worden bereikt door\u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Ftext-orientation\">\u003Cspan style=\"font-weight: 400;\"> \u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">text-orientation\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\"> toe te voegen.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":198,"id":292,"language":217,"body":293},"QJ2i-UDoSZalVA8xqQ2KdA","p {\n  writing-mode: vertical-rl;\n  text-orientation: upright;\n}",{"__typename":172,"id":295,"image":296,"caption":156,"fullWidth":147,"captionPosition":180},"XfSxI1OwRDa2rtH2JCQ9dQ",{"url":297,"alt":298,"width":177,"height":299},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1753097894-vertical-mode-2-1.png","Verticale writing mode met verticale tekst",742,{"__typename":165,"id":301,"title":302,"body":303},"JYNo5WLRS22D8AwhMSEPeg","Taalspecifieke HTML-tags zoals \u003Cruby>","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Sommige talen vereisen unieke markup-oplossingen. Een daarvan is de \u003C\u002Fspan>\u003Cb><ruby> \u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\">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 \u002F jongere kinderen zijn met minder Japanse kennis.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">\u003Cimg src=\"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1753097981-screenshot-2025-07-16-at-14-30-58.png\" \u002F>\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":198,"id":305,"language":200,"body":306},"blUD01XYQLO077XMQVRrsQ","\u003Cruby>\n  漢 \u003Crp>(\u003C\u002Frp>\u003Crt>Kan\u003C\u002Frt>\u003Crp>)\u003C\u002Frp>\n  字 \u003Crp>(\u003C\u002Frp>\u003Crt>ji\u003C\u002Frt>\u003Crp>)\u003C\u002Frp>\n\u003C\u002Fruby>",{"__typename":165,"id":308,"title":156,"body":309},"SwiJdMA2Soy8BLIrkTaY_g","\u003Cul>\n\u003Cli>\u003Cb>rp\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\">: Ruby fallback voor browsers die \u003C\u002Fspan>\u003Cb><ruby>\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\"> niet ondersteunen\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cb>rt\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\">: Ruby tekstelement. Dit is het element dat de lezing van de karakters aangeeft.\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cblockquote>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">💡 \u003C\u002Fspan>\u003Cb>Note:\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\"> De <ruby> tag heeft niets te maken met de programmeertaal Ruby.\u003C\u002Fspan>\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">💡  \u003Cb>Fun Fact:\u003C\u002Fb> Japanse auteurs gebruiken soms \u003Cb><ruby>\u003C\u002Fb> stilistisch in romans om sarcasme, dubbele betekenis of onverwachte lezingen te creëren.\u003C\u002Fspan>\u003C\u002Fp>\n\u003C\u002Fblockquote>",{"__typename":165,"id":311,"title":312,"body":313},"e9uQqC5HSVC0_hBtGFv0pw","Wrapping Up","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Als er één ding is dat ik hoop dat meer ontwikkelaars ter harte nemen, is het dit: \u003C\u002Fspan>\u003Cb>behandel niet-Latijnse talen niet als edge-cases.\u003C\u002Fb>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Voordat je tot hacks over gaat, overweeg het volgende:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul>\n\u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Gebruik lettertypes geschikt voor je taal.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Specificeer altijd een \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FReference\u002FGlobal_attributes\u002Flang\">lang\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\"> \u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">attribuut voor elke verschillende taal.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Gebruik \u003Ca href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FReference\u002FGlobal_attributes\u002Fdir\">dir\u003C\u002Fa>\u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">, \u003Ca href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Fwriting-mode\">writing-mode\u003C\u002Fa> \u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">, en \u003Ca href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Ftext-orientation\">text-orientation\u003C\u002Fa>\u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\"> om de structuur van een taal weer te geven.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Zoek naar taalspecifieke HTML-tags zoals \u003Ccode><ruby>\u003C\u002Fcode> voor betere accesibility.\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Laten we het web beter maken voor iedereen, ook voor de miljoenen mensen die dagelijks een ander schrift gebruiken dan het Latijnse!\u003C\u002Fspan>\u003C\u002Fp>",[315],{"title":316,"body":156,"links":317,"mailchimpValue":156,"mailchimpName":156,"mailchimpId":156,"formType":156,"contactPerson":323},"Heb je een project waar we samen aan kunnen bouwen?",[318],{"__typename":319,"id":320,"title":321,"link":322},"InternalLinkRecord","163140953","Neem contact met ons op",{"__typename":38},{"name":324,"lastName":156,"jobTitle":325,"image":326},"Jasper","CTO, Co-founder",{"url":327,"alt":104,"width":328,"height":329},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683535518-jasper.jpg",1892,2523,[],[332],{"id":333,"title":334,"slug":335,"blogPosts":336},"HgWm8aCCRMWWS0eqggo5xg","Accessibility","accessibility",[337,348,359],{"slug":338,"title":339,"date":340,"authors":341},"toegankelijkheid-in-design-systems","Toegankelijkheid in Design Systems","2025-06-17T14:15:56.000+02:00",[342],{"name":343,"image":344},"Sjoerd",{"url":345,"alt":104,"width":346,"height":347},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683534892-sjoerd.jpg",1637,2182,{"slug":349,"title":350,"date":351,"authors":352},"toegankelijkheid-testen-windows-virtualbox","Toegankelijkheid testen op Windows met VirtualBox","2019-09-18T02:00:00.000+02:00",[353],{"name":354,"image":355},"Bas",{"url":356,"alt":104,"width":357,"height":358},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683534636-placeholder.jpg",1235,1646,{"slug":104,"title":156,"date":360,"authors":361},"2016-12-27T01:00:00.000+01:00",[362],{"name":354,"image":363},{"url":356,"alt":104,"width":357,"height":358},1776256140260]