Thread by @anitaycheng

Made it to the juicy part of @prestonso’s #AEASF talk about languages. 🏃‍♀️☕️ More CSS properties to help meet our users where they are, no matter what language they’re using:
- dir
- writing-mode
- lang (even mixed with another languages)
- text-orientation
- text-combine-upright

Remember to use HTML first to set the default reading direction, don’t just use CSS to do whatever you want. Set the structure first. @prestonso #AEASF

Markup that I never knew about, to help give readers of logographic languages more context about a character they might not know about: <ruby> and <rb>

Also, the CSS prop “text-emphasis” can customize text styles you want to bold, but bold wouldn’t look great. @prestonso #AEASF

.@prestonso encourages us to think more logically in our web layouts, not physical. That gives us more flexibility when it comes to languages. Be agnostic to writing mode, not specific. Try stuff like “margin-block-start” instead of “margin-top”. #AEASF

There’s even markup to indicate how spoken language should be read on platforms like Siri. Not much for signed languages yet, but @prestonso is excited to see what comes up next. #AEASF

Takeaways from @prestonso’s #AEASF talk:
- Understand your users’ languages deeply and treat them all as first-class citizens
- Use lang attributes
- Pay attention to lines of text (breaks, wrap, hyphenations)
- Respect directions the text can go
And think bigger beyond the web!

It certainly takes a polyglot the level of @prestonso to create such a great rundown of design considerations around so many languages! (He can read 20-22, speak about 13.) Thanks for sharing that knowledge with #AEASF.

Heh, @prestonso didn’t get into translations, since the data level “gets very hairy very fast.” Whew, don’t we know at SF Digital Services! 😅 (We have a translation manager starting VERY SOON and we are SO EXCITED!!!)

Audience Q&A about making a site literally for everyone. @prestonso mentions NYC subway as an example: the website uses Google Translate to cover everyone. Only use it as a last resort, but human translations for everything is impossible (and NYC is not made of money!). #AEASF

(Can attest to the difficulty of human translations. Doing the COVID work, I saw print work being passed back and forth >5x with changes in English, that needed to be retranslated and relaid out in InDesign. 😩)