How to translate your Rails app into over 20 languages (And why you should)

English is the most widely spoken language in the world. It seems like everyone speaks it. Isn't it enough if your app is only available in English? Well...

Learn the basics of localization and internationalization in Ruby on Rails, and how to get started localizing your app using AI.

Given at the SF Bay Area Ruby Meetup on November 19, 2024.

Transcript

1. How to translate your Rails app into over 20 languages Chris Fung - SF Ruby Meetup - November 2024 And why you should! Source: Photo by Isaac Chou on Unsplash
2. • Chris Fung • 🦋 @aergonaut.com • 🐘 @aergonaut@ruby.social • Rubyist for 10 + years • Staff Software Engineer @ Binti Who am I?
3. • We believe every child deserves a loving family! • Foster agencies using Binti approve 40% more families per year, and see a 18% reduction in cycle time, and 40% in time spent for social workers! • 500 + agencies, 34 states (plus DC ) , 150,000 + children in care! What is Binti? 💙
4. Why should you care about localization?
5. What do all these words mean? • l10n - Localization. To adapt content from one locale into another • text: “hello ” -> “óla ” (translation) • dates: 8/24/2024 ( USA ) -> 24/8/2024 ( UK ) • Locale - an identifier representing a language with region and/or script • en; pt-BR; zh-Hant-HK • i18n - Internationalization. To adapt software so it can easily support many languages, scripts, regions, and cultures.
6. Isn ’ t English good enough?
7. 😒 Well…
8. Who speaks English as a second language?
9. Who knows someone who speaks ESL?
10. 1.5 billion / 8B Worldwide English speakers / total 🌍 population Source: https://www.statista.com/chart/26884/languages-on-the-internet/
11. 21.7% US residents speak a language other than English at home Source: https://www.census.gov/acs/www/about/why-we-ask-each-question/language/
12. 8.2% US residents speak English less than very well Source: https://www.census.gov/acs/www/about/why-we-ask-each-question/language/
13. 🙅 English is not enough!
14. So you want to localize…
15. Roadmap 1. Externalize all your text 2. Choose target locales 3. Translate! 4. Commit and push! 5. Profit!
16. Step 1 - Externalize! • Look for hardcoded text anywhere in your app: • Views: <h1>Edit user</h1> • Controllers: flash[:success] = "Save successful" • Models: errors.add(:title, "cannot be blank")
17. Step 1 - Externalize! • Give each message a key and put it in en.y m l en: users: edit: title: Edit user flash: save: Successfully saved
18. Step 1 - Externalize! • Replace the hardcoded text with I18n.t • Views: <h1><%= t("users.edit.title") %></h1> • Controllers: flash[:success] = I18n.t("flash.save") • Models: errors.add(:title, :blank)
19. Step 2 - Choose your target locales • What are your company ’ s goals? • What are your company ’ s most important markets? • Who is your company trying to reach?
22. 2.1 - Choose locale codes • Use online tools to find appropriate codes for each language • https://r12a.github.io/app-subtags/index.html • Follow a standard format for your locale codes • IETF language tag: en, pt-BR • GNU language code: pt_BR
23. Step 3 - Translate! • Bigger enterprises might contract with a language services provider ( LSP ) to obtain professional translations. • If you ’ re smaller, consider AI-powered machine translation ( MT ) . • DIY : i18n-tasks gem integrates with OpenAI, Google, DeepL, etc. • Localization platforms such as Crowdin, Phrase
24. 3.1 - Setup up i18n-tasks • Add gem 'i18n-tasks', group: :development • Choose a translation provider, e.g. Google Translate • Put your Google Translate API key in GOOGLE _T RANSLA TE _API_KEY • Run i18n-tasks translate- m i ssing -f en -l <locales…>
25. Step 4 - Commit and push! • Locale files can be very large! • Watch out for: • GitHub may reject pushes that are too big 🙅 • File bloat 📂 • Increased memory usage 💽 • Increased asset size 📦
26. 🎉 Congrats! 🎉 Your app is translated!
27. • Localized formatting • dates/numbers/calendars • Plural rules • N applications were updated. • Continuous localization • Automate all the things! Just the beginning! Source: Photo by Ben Neale on Unsplash
28. Binti’s Story
29. From 2 to 21 languages! • Started with English and manually translated Spanish. • Used US Census data on languages spoken at home to identify 19 new languages, covering 65% of “less than ‘very well ’ ” English speakers: • Bangla, German, Greek, French, Canadian French, Gujarati, Croatian, Haitian, Armenian, Italian, Korean, Polish, Portuguese, Brazilian Portuguese, Russian, Tagalog, Ukrainian, Vietnamese, Mandarin Chinese • Translated using i18n-tasks and the Google Translate API ✨ • We learned a lot about multilingual text and UIs!
30. • Browsers fallback to a system font when a script is not supported by the current font. • Minimally: be consistent with either serif or sans-serif as the base of your font stack. • Better to choose a font that supports Latin, Cyrillic, Greek. Multilingual fonts Source: https://rsms.me/inter/
31. • Some scripts, like Arabic, flow right-to-left ( RTL ) . • Many UI elements are mirrored: • Button order ( 3 ) • Checkboxes & icons ( 4 ) • Progress bars fill RTL ( 7 ) • RTL is more than just text! Bidirectional text Source: https://m2.material.io/design/usability/bidirectionality.html
32. • Languages have different preferred formats: • en - ‘Canadian French ’ • de - ‘Französisch ( Kanada) ’ • Don ’ t machine translate! • Source standardized data from Unicode Common Locale Data Repository ( CLDR ) Locale names
33. Source: Photo by Alex Knight on Unsplash Thank you! Good luck on your localization journey!