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 

• Chris Fung • 🦋 @aergonaut.com • 🐘 @[email protected] • Rubyist for 10 + years • Staff Software Engineer @ Binti Who am I? 

• 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? 💙 

Why should you care about localization? 

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. 

Isn ’ t English good enough? 

😒 Well… 

Who speaks English as a second language? 

Who knows someone who speaks ESL? 

1.5 billion / 8B Worldwide English speakers / total 🌍 population Source: https://www.statista.com/chart/26884/languages-on-the-internet/ 

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/ 

8.2% US residents speak English less than very well Source: https://www.census.gov/acs/www/about/why-we-ask-each-question/language/ 

🙅 English is not enough! 

So you want to localize… 

Roadmap 1. Externalize all your text 2. Choose target locales 3. Translate! 4. Commit and push! 5. Profit! 

Step 1 - Externalize! • Look for hardcoded text anywhere in your app: • Views:

Edit user

• Controllers: flash[:success] = "Save successful" • Models: errors.add(:title, "cannot be blank") 

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 

Step 1 - Externalize! • Replace the hardcoded text with I18n.t • Views:

<%= t("users.edit.title") %>

• Controllers: flash[:success] = I18n.t("flash.save") • Models: errors.add(:title, :blank) 

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? 

No content

No content

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 

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 

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 

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 📦 

🎉 Congrats! 🎉 Your app is translated! 

• 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 

Binti’s Story 

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! 

• 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/ 

• 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 

• 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 

Source: Photo by Alex Knight on Unsplash Thank you! Good luck on your localization journey!