[{"data":1,"prerenderedAt":371},["ShallowReactive",2],{"DefaultLayouten":3,"language-blog-slug-designing-css-for-non-latin-languages-on-the-web-i18n-slugs":134,"language-blog-slug-en-designing-css-for-non-latin-languages-on-the-web":140},{"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},"163140902","Contact",{"__typename":38},"ContactRecord",[40,46,51,56,61],{"id":41,"title":42,"link":43},"163140904","Impact",{"__typename":44,"slug":45},"PageRecord","impact",{"id":47,"title":48,"link":49},"163140905","Services",{"__typename":50},"ServiceOverviewRecord",{"id":52,"title":53,"link":54},"163140906","Cases",{"__typename":55},"CaseOverviewRecord",{"id":57,"title":58,"link":59},"163140908","About us",{"__typename":44,"slug":60},"about-us",{"id":62,"title":63,"link":64},"d6WdFJq2SOuc3dWtpibbXQ","Work at",{"__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},"144185264",{"__typename":44,"slug":45},{"id":72,"title":48,"link":73},"144185265",{"__typename":50},{"id":75,"title":53,"link":76},"144185266",{"__typename":55},{"id":78,"title":79,"link":80},"144185267","Blog",{"__typename":81},"BlogPostOverviewRecord",{"id":83,"title":58,"link":84},"144185268",{"__typename":44,"slug":60},{"id":86,"title":36,"link":87},"144185269",{"__typename":38},{"id":89,"title":90,"link":91},"144185270","FAQ",{"__typename":44,"slug":92},"faq","Creative Commons licence and disclaimer","CC BY 4.0","https:\u002F\u002Fcreativecommons.org\u002Flicenses\u002Fby\u002F4.0\u002F","De Voorhoede privacy statement (pdf)","Privacy statement","https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1763455455-vh-isms-006-privacy-statement-de-voorhoede-en.pdf",[100,112,123],{"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","B Corp logo",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":119},"c5mCXRTiSraRIB25fw1p7Q",{"url":115,"alt":116,"width":117,"height":118},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353461-dda-boxlogo-black.png","Dutch Digital Agencies logo",627,480,{"__typename":108,"id":120,"title":121,"url":122},"P6Jh7B0cTv2cKyNEeKVWVQ","Dutch Digital Agencies","https:\u002F\u002Fdutchdigitalagencies.com\u002Fleden\u002Fde-voorhoede\u002F",{"id":124,"image":125,"link":129},"MT5SCyNxSTSr_v5eeATMZw",{"url":126,"alt":127,"width":128,"height":128},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1775730283-dnv.png","DNV logo",518,{"id":130,"title":131,"link":132},"BRtNB5HnT5i-7HkA8IYzBw","DIV",{"__typename":44,"slug":133},"impact\u002Fdigitale-producten-privacy-by-design",[135,138],{"locale":136,"value":137},"en","designing-css-for-non-latin-languages-on-the-web",{"locale":139,"value":137},"nl",{"page":141},{"slug":137,"i18nSlugs":142,"social":145,"title":150,"subtitle":79,"isArchived":151,"headerIllustration":152,"date":157,"authors":158,"introTitle":167,"items":168,"pivots":319,"relatedBlogPosts":335,"tags":336,"onMountedScript":161,"onUnmountedScript":161},[143,144],{"locale":136,"value":137},{"locale":139,"value":137},{"title":146,"description":147,"image":148},"CSS for Non-Latin Languages","Designing CSS for Non-Latin Languages on the Web",{"url":149},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1756825325-blog_css.jpg","Designing CSS\u002FHTML for Non-Latin Languages on the Web",false,{"url":153,"alt":154,"width":155,"height":156},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1655104054-multilingual.svg",null,581,365,"2025-09-01T09:23:50.428+02:00",[159],{"name":160,"lastName":161,"slug":162,"image":163},"Marleen","","marleen",{"url":164,"alt":154,"width":165,"height":166},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1760339746-marleen-edit.jpeg",1431,1908,"Most of the internet is written in English, and as Western developers, we tend to build with Latin-based scripts in mind. But what happens when we need to create interfaces for Non-latin writing scripts?",[169,173,176,186,189,195,198,202,207,213,217,220,224,227,233,236,240,243,246,249,252,255,262,265,269,272,275,281,284,287,293,296,299,305,309,312,315],{"__typename":170,"id":171,"title":161,"body":172},"TextSectionRecord","Fv8wDzVDR1-UEBCarfngzw","\u003Cp>\u003Cspan style=\"font-weight: 400;\">After earning a BA in Japanese linguistics, I began my front-end career in Tokyo, building multi-lingual web solutions in Japanese and English. Now back in my home country and working at \u003C\u002Fspan>\u003Ci>\u003Cspan style=\"font-weight: 400;\">de Voorhoede\u003C\u002Fspan>\u003C\u002Fi>\u003Cspan style=\"font-weight: 400;\">, I’ve noticed some specific CSS\u002F HTML techniques required for non-Latin scripts that I don’t use as often anymore but remain essential knowledge.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\"> While my personal experience is rooted in Japanese, at de Voorhoede we’ve also built interfaces for right-to-left non-Latin scripts, giving us a broader perspective on multilingual accessibility.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">In this post, I’ll share practical tips for building web solutions that support non-Latin scripts. Most of the examples will be drawn from my experience with Japanese, but the overall message is applicable for any non-Latin language on the web!\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":170,"id":174,"title":175,"body":161},"fK_A0TVyRYSQnLP4hjnmxQ","The hidden bias of the Latin script",{"__typename":177,"id":178,"image":179,"caption":184,"fullWidth":151,"captionPosition":185},"ImageRecord","EaglD3jiT2GVlQN2Hf2VRA",{"url":180,"alt":181,"width":182,"height":183},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1753098739-map-nl.png","World map that shows which countries use predominant non-Latin scripts",1320,822,"Based on data provided by the CIA's world fact book.","bottom",{"__typename":170,"id":187,"title":161,"body":188},"TJZKMr0STqCB0JKB87JbVQ","\u003Cp>\u003Cspan style=\"font-weight: 400;\">There are over 50 countries worldwide that predominantly use non-Latin scripts. Despite this, the web was built with English in mind, and most defaults still reflect that. For example, without \u003C\u002Fspan>\u003Ccode>\u003Cspan style=\"font-weight: 400;\"><meta charset=\"UTF-8\">\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan style=\"font-weight: 400;\">, non-Latin characters may not render at all. This is because the\u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fwww.ascii-code.com\u002FASCII\">\u003Cspan style=\"font-weight: 400;\"> \u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">default of ASCII\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\"> only supports Latin characters.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003C!-- notionvc: 57f1f17a-4d92-427a-8ae8-2ac74719f19c -->\u003C\u002Fp>",{"__typename":177,"id":190,"image":191,"caption":161,"fullWidth":151,"captionPosition":185},"bdiWNhSfRKKqmyKKhwqaEA",{"url":192,"alt":193,"width":182,"height":194},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1752849832-metatag-1.png","utf8_meta_tag",810,{"__typename":170,"id":196,"title":161,"body":197},"EOIx9uP2SAidPKlzgISj1g","\u003Cp>\u003Cspan style=\"font-weight: 400;\">While this post focuses on CSS and HTML, it’s worth remembering that Latin scripts enjoy an unfair advantage of being the default on the web.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":170,"id":199,"title":200,"body":201},"CDu1-2muTE6SfgmbkkirwQ","Generic font","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Not every font supports every script. While most Latin fonts work across Western languages, non-Latin languages often rely on unicode characters. If those aren’t supported, the browser falls back to a \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;\">Take a look at the example below. It consists of a paragraph with both English and Japanese text. The fonts \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Ffonts.google.com\u002Fspecimen\u002FBebas+Neue\">\u003Ci>\u003Cspan style=\"font-weight: 400;\">Bebas Neue\u003C\u002Fspan>\u003C\u002Fi>\u003Cspan style=\"font-weight: 400;\"> \u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\">and \u003C\u002Fspan>\u003Ci>\u003Cspan style=\"font-weight: 400;\">WingDings\u003C\u002Fspan>\u003C\u002Fi>\u003Cspan style=\"font-weight: 400;\"> do not support Japanese characters and only the English part of the text is rendered in the intended font. In the last example with the \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>\u003Ci>\u003Cspan style=\"font-weight: 400;\"> \u003C\u002Fspan>\u003C\u002Fi>\u003Cspan style=\"font-weight: 400;\">font, note how not only the English characters changed in appearance, but the Japanese characters as well. This is because \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>\u003Ci>\u003Cspan style=\"font-weight: 400;\"> \u003C\u002Fspan>\u003C\u002Fi>\u003Cspan style=\"font-weight: 400;\">is the only font out of the examples that supports both English and Japanese characters.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003C!-- notionvc: 9a783e11-c034-4fe5-bc06-6644dc31472b -->\u003C\u002Fp>",{"__typename":203,"id":204,"language":205,"body":206},"CodeBlockRecord","IE3n9BgeTFiw0L5KSbUbZw","html","\u003C!-- \n  No font is set.\n  English text is displayed in the default generic font.\n  Japanese text is displayed in the default generic font.\n  -->\n\u003Cp> \nこれは日本語のテキストで this is English text. \n\u003C\u002Fp>\n\n\u003C!-- \n  Bebas Neue is set.\n  English characters are supported and displayed in the Bebas Neue font.\n  Japanese characters are not supported and displayed in the default generic font.\n -->\n\u003Cp class=\"bebas-neue\"> \nこれは日本語のテキストで this is English text. \n\u003C\u002Fp>\n\n\u003C!-- \n  Wingdings is set.\n  English characters are not supported and displayed in the default fallback font.\n  Japanese characters are not supported and displayed in the default generic font.\n -->\n\u003Cp class=\"wingdings\"> \nこれは日本語のテキストで this is English text. \n\u003C\u002Fp>\n\n\u003C!-- \n  Yuji Mai is set.\n  English characters are supported and displayed in the Juyi Mai font.\n  Japanese characters are supported and displayed in the Juyi Mai font.\n -->\n\u003Cp class=\"yuji-mai\">\n  これは日本語のテキストで this is English text.\n\u003C\u002Fp>\n",{"__typename":177,"id":208,"image":209,"caption":161,"fullWidth":151,"captionPosition":185},"NRm-7PlMQaKhn20TxUyoqg",{"url":210,"alt":211,"width":182,"height":212},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1752849950-rendering-2.png","rendering of Japanese characters among different fonts",894,{"__typename":170,"id":214,"title":215,"body":216},"JQpliMzBSBGSf78Byr3ZAw","Different languages need different fonts","\u003Cp>\u003Cspan style=\"font-weight: 400;\">It’s not just about whether a font supports all the characters in a language. Using the wrong font for a language can make text hard to read or even change the meaning. This is especially true for Asian languages, where characters can have different strokes or shapes depending on the language.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">To illustrate this, let’s take a look at the Japanese character of \u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">直 . Note how there are 2 strokes at the bottom, forming a sort of L shape.\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":203,"id":218,"language":205,"body":219},"aCzrh9LSR8atWMQpUzKoDg","\u003C!-- Japanese text rendered in Japanese font (correct) -->\n\u003Cspan class=\"japanese-font\"> 直 \u003C\u002Fspan>\n\n\u003C!-- Chinese text rendered in Chinese font (incorrect) -->\n\u003Cspan class=\"chinese-font\"> 直 \u003C\u002Fspan>\n",{"__typename":203,"id":221,"language":222,"body":223},"WewdF0oqRZS2nUqIbxDKSA","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":170,"id":225,"title":161,"body":226},"KvCGvIVeTWe_KjSIYTLPjg","\u003Cp>\u003Cspan style=\"font-weight: 400;\">When rendering the text with a Chinese font, the bottom left stroke disappears and the ‘L’ shape is no longer visible. To a native speaker, this character has now turned unrecognizable.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":177,"id":228,"image":229,"caption":161,"fullWidth":151,"captionPosition":185},"QPsCFht9S_efhIo8m6pbqw",{"url":230,"alt":231,"width":182,"height":232},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1753097338-character-fail-2.png","incorrect rendering results with Japanese character",608,{"__typename":170,"id":234,"title":161,"body":235},"PO5yDub1TvC8QMfHCmtnVQ","\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;\">💡 \u003C\u002Fspan>\u003Cb style=\"letter-spacing: 0px;\">Tip:\u003C\u002Fb>\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;\"> Start with\u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Ffonts.google.com\u002Fnoto\u002Ffonts?query=Noto\" style=\"font-weight: 400; letter-spacing: 0px;\"> Google’s Noto fonts\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;\">. They’re designed to support a wide range of scripts and look consistent across languages. Google also offers a good place to start if you want more information on \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;\">East Asian typography\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":170,"id":237,"title":238,"body":239},"M-IgZtUKR4K_FvDMC041cw","Using multiple languages at once with lang","\u003Cp>\u003Cspan style=\"font-weight: 400;\">WCAG Success Criterion 3.1.2 requires that parts of a page written in different languages also declare those languages. This is still often overlooked, but beyond accessibility, adding the HTML attribute\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;\"> enables you to cater to language specific needs such as line-height and letter-spacing. Additionally, when you use the \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FReference\u002FGlobal_attributes\u002Flang\">\u003Cspan style=\"font-weight: 400;\">lang\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\"> attribute correctly, browser rendering engines can automatically adjust typographic features like ligatures and hyphenation to match the conventions of each language. \u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Take below code for example:\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":203,"id":241,"language":205,"body":242},"VIEB1f2ETF6JrQx00YMo6Q","\u003Cp>\nこれは日本語のテキストで this is English text.同時に使っても問題ない！\u003C\u002Fp>",{"__typename":203,"id":244,"language":222,"body":245},"Lv5lXq6eTrigi_n8BHAbHw","\u002F* default language is Japanese with below set specifics *\u002F\np { \nfont-family: \"Noto Sans JP\", sans-serif; \n}\n",{"__typename":170,"id":247,"title":161,"body":248},"CpU_uL6oR2ew5Yqmip0s0A","\u003Cp>\u003Cspan style=\"font-weight: 400;\">This will render great for the Japanese text, but the English text defaults to the fallback font (as discussed in chapter 2) \u003C\u002Fspan>\u003Ci>\u003Cspan style=\"font-weight: 400;\">sans-serif\u003C\u002Fspan>\u003C\u002Fi>\u003Cspan style=\"font-weight: 400;\"> and looks slightly small in comparison to the Japanese text in \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Ffonts.google.com\u002Fnoto\u002Fspecimen\u002FNoto+Sans+JP\">\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>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">By adding the lang attribute, you not only improve accessibility, but also unlock the ability to target language-specific styles in CSS without the extra classes or hacks.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":203,"id":250,"language":205,"body":251},"XKbGDwGkSvSS75J4_bDWRg","\u003Cp>\n  これは日本語のテキストで\n  \u003Cspan lang=\"en\">this is English text.\u003C\u002Fspan>\n  同時に使っても問題ない！\n\u003C\u002Fp>\n",{"__typename":203,"id":253,"language":222,"body":254},"WbIF8dqWQsOHlmN8vabkxg","\u002F* default language is Japanese with below set specifics *\u002F\np { \nfont-family: \"Noto Sans JP\", sans-serif; \n} \n\n\u002F* English text will have another font, color and optmized font-size *\u002F\nspan:lang(en) { \nfont-family: \"Bebas Neue\", Arial, sans-serif; \nfont-size: 1.2em; \ncolor: #001BF7;\n}\n",{"__typename":177,"id":256,"image":257,"caption":161,"fullWidth":151,"captionPosition":185},"Qx_jRzKFQnWEgAkEetXXZg",{"url":258,"alt":259,"width":260,"height":261},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1753097666-lang-attribute.png","Multilangual text rendered succesfully",1078,126,{"__typename":170,"id":263,"title":161,"body":264},"QCxSzrnsT6WEH_75CJaoLA","\u003Cp>\u003Cspan style=\"font-weight: 400;\">By simply setting the appropriate lang attribute in your HTML, you ensure that both accessibility and typographic accuracy are maintained for multilingual content.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":170,"id":266,"title":267,"body":268},"e-4FKkzmTzmpxHlYglMrXQ","Text direction with writing-mode and dir","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Not all languages are written left-to-right (LTR). Arabic, for example, is right-to-left (RTL), and Japanese can be written vertically right-to-left. Thankfully, the web offers some out-of the box solutions such as \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;\"> and \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Fwriting-mode\">\u003Cspan style=\"font-weight: 400;\">writing-mode\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\"> to tackle these cases.\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Let’s look at examples for Arabic and Japanese:\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":203,"id":270,"language":205,"body":271},"LsVuis1FTfSUXZxjDHEUMw","\u003C!-- Arabic -->\n\u003Cp dir=\"rtl\" lang=\"ar\">\n  هذه الفقرة باللغة العربية ، لذا يجب الانتقال من اليمين إلى اليسار.\n\u003C\u002Fp>\n\n\u003C!-- Japanese with embedded English -->\n\u003Cp dir=\"ltr\" lang=\"ja\">\n  これは日本語のテキストです。\n  \u003Cspan lang=\"en\">There is also some English\u003C\u002Fspan>\n\u003C\u002Fp>\n",{"__typename":170,"id":273,"title":161,"body":274},"QVAJUHXtQIelX_ceuPJMBw","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Here, the \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;\"> attribute indicates the directionality of the element’s text.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":177,"id":276,"image":277,"caption":161,"fullWidth":151,"captionPosition":185},"abqBbAORR6aV3y-JTPoGoA",{"url":278,"alt":279,"width":182,"height":280},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1753097767-dir-1.png","dir attribute",632,{"__typename":170,"id":282,"title":161,"body":283},"YtSWnFZFTY6KNPOhOyy-2A","\u003Cblockquote>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">💡 \u003C\u002Fspan>\u003Cb>Tip:\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\"> note that\u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Fdirection\">\u003Cspan style=\"font-weight: 400;\"> \u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">direction\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\"> css property exists, but the usage of\u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FReference\u002FGlobal_attributes\u002Fdir\">\u003Cspan style=\"font-weight: 400;\"> \u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">dir\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\"> is preferred for accessibility.\u003C\u002Fspan>\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Cp>\u003C\u002Fp>\n\u003Cblockquote>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">💡 \u003C\u002Fspan>\u003Cb>Best practice: \u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\">When working with directional layouts, consider using logical properties like \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Fmargin-inline\">\u003Cspan style=\"font-weight: 400;\">margin-inline\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\"> and \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Fpadding-inline\">\u003Cspan style=\"font-weight: 400;\">padding-inline\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\"> etc. instead of physical properties like \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Fmargin-left\">\u003Cspan style=\"font-weight: 400;\">margin-lef\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\">t. These adapt more naturally to different writing directions.\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;\">But it is not just about text direction; some scripts are written vertically. One can achieve this using \u003Ca href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Fwriting-mode\">writing-mode\u003C\u002Fa>.\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":203,"id":285,"language":222,"body":286},"WtTQQGVNReapqVdhB8J0iA","p {\n  writing-mode: vertical-rl\n}\n",{"__typename":177,"id":288,"image":289,"caption":161,"fullWidth":151,"captionPosition":185},"Ykwq6AhySFmhh_2yzXuxyQ",{"url":290,"alt":291,"width":182,"height":292},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1753097853-vertical-mode.png","vertical writing mode",536,{"__typename":170,"id":294,"title":161,"body":295},"fQjxINQJSamGHbQBV0kDcw","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Well this can be the intended UI in some cases, often one would want the characters themselves to also be rendered vertically. This can be achieved by adding \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002Ftext-orientation\">\u003Cspan style=\"font-weight: 400;\">text-orientation\u003C\u002Fspan>\u003C\u002Fa>\u003C\u002Fp>",{"__typename":203,"id":297,"language":222,"body":298},"et1QHtyQTwuZxwOh_6Q7fA","p {\n  writing-mode: vertical-rl;\n  text-orientation: upright;\n}",{"__typename":177,"id":300,"image":301,"caption":161,"fullWidth":151,"captionPosition":185},"GAkh3oyVQ5i8kRJpiJ7a9A",{"url":302,"alt":303,"width":182,"height":304},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1753097894-vertical-mode-2-1.png","Vertical writing mode with vertical text",742,{"__typename":170,"id":306,"title":307,"body":308},"FAwZoU8PSzavG2uDmU-1zA","Language specific HTML tags such as \u003Cruby>","\u003Cp>\u003Cspan style=\"font-weight: 400;\">Some languages require unique mark-up solutions. One of these is the \u003Ccode><\u003C\u002Fcode>\u003C\u002Fspan>\u003Ccode>ruby>\u003C\u002Fcode>\u003Cspan style=\"font-weight: 400;\">\u003Ccode> \u003C\u002Fcode>tag, which lets you display small text above or beside characters to show pronunciation or meaning. This is used in phonetic languages, such as Japanese and Chinese, to indicate the pronunciation of a character when it is unclear, or the target audience is language learners \u002F younger children with less Japanese knowledge.\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":203,"id":310,"language":205,"body":311},"Bl1JflcvQPuSSfimxHYs7Q","\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":170,"id":313,"title":161,"body":314},"EXeoneZqTemtYeiuBY2W9g","\u003Cul>\n\u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cb>rp\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\">: Ruby fallback for browsers that don't support\u003C\u002Fspan>\u003Cb> <ruby>\u003C\u002Fb>\u003C\u002Fli>\n\u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cb style=\"letter-spacing: 0px;\">rt\u003C\u002Fb>\u003Cspan style=\"font-weight: 400;\">: Ruby text element. This is the element that indicates the reading of the characters.\u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">\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;\"> The \u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\"><ruby>\u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\"> tag has nothing to do with the Ruby programming language.\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> Authors sometimes use\u003Cb> <ruby>\u003C\u002Fb> stylistically in novels to create sarcasm, dual meaning or unexpected readings.\u003C\u002Fspan>\u003C\u002Fp>\n\u003C\u002Fblockquote>",{"__typename":170,"id":316,"title":317,"body":318},"am3yLKn3SIiz2WKHSrAZQg","Wrapping Up","\u003Cp>\u003Cspan style=\"font-weight: 400;\">If there’s one thing I hope more developers take to heart, it’s this: \u003C\u002Fspan>\u003Cb>don’t treat non-Latin languages as edge cases.\u003C\u002Fb>\u003C\u002Fp>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Before reaching for hacks, remember to:\u003C\u002Fspan>\u003C\u002Fp>\n\u003Cul>\n\u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Use script-appropriate fonts\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Always specify a \u003C\u002Fspan>\u003Ca href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FReference\u002FGlobal_attributes\u002Flang\">\u003Cspan style=\"font-weight: 400;\">lang\u003C\u002Fspan>\u003C\u002Fa>\u003Cspan style=\"font-weight: 400;\"> attribute for each language section.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Use \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;\">, and \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;\"> to reflect the language’s structure.\u003C\u002Fspan>\u003C\u002Fli>\n\u003Cli style=\"font-weight: 400;\" aria-level=\"1\">\u003Cspan style=\"font-weight: 400;\">Explore language-specific HTML tags like \u003Ccode><\u003C\u002Fcode>\u003C\u002Fspan>\u003Ccode>\u003Cspan style=\"font-weight: 400;\">ruby>\u003C\u002Fspan>\u003C\u002Fcode>\u003Cspan style=\"font-weight: 400;\"> for richer, more accessible content.\u003C\u002Fspan>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cspan style=\"font-weight: 400;\">Let’s build a better web for everyone, including the 50+ countries that use non-Latin scripts on a daily basis!\u003C\u002Fspan>\u003Cspan style=\"font-weight: 400;\">\u003Cbr \u002F>\u003C\u002Fspan>\u003C\u002Fp>",[320],{"title":321,"body":161,"links":322,"mailchimpValue":161,"mailchimpName":161,"mailchimpId":161,"formType":161,"contactPerson":328},"Got a project we can work on?",[323],{"__typename":324,"id":325,"title":326,"link":327},"InternalLinkRecord","163140952","Contact us",{"__typename":38},{"name":329,"lastName":161,"jobTitle":330,"image":331},"Jasper","CTO, Co-founder",{"url":332,"alt":154,"width":333,"height":334},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683535518-jasper.jpg",1892,2523,[],[337],{"id":338,"title":339,"slug":340,"blogPosts":341},"HgWm8aCCRMWWS0eqggo5xg","Accessibility ","accessibility",[342,353,364],{"slug":343,"title":344,"date":345,"authors":346},"accessibility-in-design-systems","Accessibility in Design Systems","2025-06-17T14:15:56.000+02:00",[347],{"name":348,"image":349},"Sjoerd",{"url":350,"alt":154,"width":351,"height":352},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683534892-sjoerd.jpg",1637,2182,{"slug":354,"title":355,"date":356,"authors":357},"testing-accessibility-on-windows-with-virtualbox","Testing Accessibility on Windows with VirtualBox","2019-09-18T02:00:00.000+02:00",[358],{"name":359,"image":360},"Bas",{"url":361,"alt":154,"width":362,"height":363},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683534636-placeholder.jpg",1235,1646,{"slug":365,"title":366,"date":367,"authors":368},"improving-accessibility-for-the-blind-8-guidelines","Improving accessibility for the blind: 8 guidelines","2016-12-27T01:00:00.000+01:00",[369],{"name":359,"image":370},{"url":361,"alt":154,"width":362,"height":363},1776256139044]