In the world of global audiences web developers are facing the challenging task of creating experiences that transcend borders and languages. Preston So who is a designer, developer, and polyglot dove into this topic at WebExpo 2023. Let’s take a closer look at some of the advancements in multilingual web design Preston covered in his talk not only from the UX and accessibility perspective but mainly when it comes to HTML and CSS coding.
Multilingual foundations
Multilingual web design goes far beyond the superficial features like a language selector or a Google Translate widget added to your website. It’s a holistic approach that starts already with writing the markup (HTML) and style (CSS) of the website in a language-neutral or language-agnostic way. The cornerstone to creating more empathetic multilingual experiences is to understand the languages our users use and how they work and embrace them as if they were our own even though we don’t speak them.
CSS and HTML – linguistic diversity wonderland
Even though it’s still common that websites are monolingual or coded only in Latin-based input methods and keyboards, HTML and CSS have gone beyond borders and opened the door of opportunity to linguistic diversity. Keep reading and dive right into what they have to offer.
👉 Language attributes
The backbone of multilingual web design is the language attribute in HTML. Language attributes distinguish languages using the same writing system even on the same web page. They play a pivotal role in search engine optimisation and in selecting the most compatible voices for modern screen readers.
👉 Writing systems
Whether the language writing system is left-to-right (English, French), right-to-left (Arabic, Hebrew) or top-to-bottom (Chinese, Japanese), incorporating proper direction is essential to allow the browser to select the actual direction at runtime. W3C recommends that markup should be used to set the directionality for a document or chunk of information. Based on that Preston emphasises choosing HTML and using the dir property over writing multiple text directions in CSS. Make sure you also learn about commonly used annotations and decorations in your target language.
👉 Logical properties
Logical properties upgrade the historical form of CSS physical properties originally created for languages like English where every text is horizontal and left-to-right. The main difference between physical properties and logical properties is that while physical properties are specific to writing mode, logical properties are agnostic to writing mode and work with block dimension and inline dimension. This change allows more efficient and adaptable styling for languages with different writing directions in a single page, and as a bonus it improves web performance by reducing the unnecessary CSS bloat.
Beyond the screen
Since languages are not only in a written form, focus on new approaches in the area of spoken and signed languages is necessary, too. Speech Synthesis Markup Language (SSML) is a markup language that enables crafting dialogue for voice interfaces considering factors like language, accents, and gender. Designing for signed languages is an intriguing question that Preston left without a conclusive answer: It’s still a relatively unexplored area searching for the best practices to support signed languages.
At the end of his talk, Preston sums up the 6 most important takeaways for multilingual web design mentioned below but also encourages you to play and explore the languages.
1. Understand deeply the languages your users speak.
2. Use language attributes.
3. Pay attention to lines of text – how they break, how they wrap, how they hyphenate etc.
4. Respect directions text can go.
5. Keep in mind that many languages use annotation and decoration.
6. Same principles apply to multilingual design beyond the web even though it’s still in its infancy.
If you are all caught up in the topic of multilingual web design and want to elevate your website, you definitely need to watch the full talk where Preston shows all the useful commands on real examples of many different language cases.⬇