Fun with Flags - i18n in the AI era

Smashing conference Freiburg 2026

Transcript

1. Fun with flags: i18n in the AI era Eva Ferreira – Smashing Conference 2026
2. Hola, ¡Soy Eva! Product Engineer at mabl & Google Developer Expert @evaferreira92
3. This is a talk about languages Examples will be mostly given in German and Spanish
4. This is a talk about culture
5. o e os “Che” V Culture t a l g n i Be s t n e v e l a i c o s r o f e
6. Culture Schnitzel
7. Impact of culture on i18n
8. i-18letters-n internationalization Numeronym
9. Lately, using the web as a non-native English speaker sucks. AI generated crap-tions, unrequired translations, weird grammar… @evaferreira92
10. Why is it so hard? • Languages are very complex • Languages are culture
13. Fix German overflow • Do not fix widths  Use paddings instead body { hyphens: auto; } @evaferreira92
16. @evaferreira92
17. AI is here to accelerate Good processes are now ok and faster. Bad processes are now worse and more and faster.
18. Un-offending people with i18n 1. The why? Culture 2. The how? Technique 3. The funcó? Quality @evaferreira92
19. Scene 1: The Why: Culture
23. Flags are not languages
25. Heladera refrigerador nevera frigorífico frutilla fresa palta aguacate porotos frijoles judías habichuelas pochoclo palomitas cotufas pororó choclo elote batata camote boniato papa patata ananá piña durazno melocotón banana plátano guineo cambur jugo zumo auto carro coche colectivo camión autobús guagua micro subte metro vereda banqueta acera canilla llave grifo sándwich sánguche estacionamiento aparcamiento parqueadero estacionar aparcar parquear manejar conducir valija maleta computadora ordenador computador celular móvil anteojos lentes gafas lapicera birome pluma bolígrafo lapicero remera playera camiseta polera campera chamarra chaqueta casaca zapatillas tenis deportivas championes pileta alberca piscina sorbete popote pajita pitillo pajilla torta pastel tarta queque sándwich sánguche bocadillo emparedado caramelo golosina dulce chuchería chuches departamento piso apartamento canilla llave grifo regadera ducha inodoro excusado váter sanitario pollera falda pibe chico chavo chaval laburo chamba curro pega changa cachuelo plata lana pasta lucas coger agarrar tomar plata lana pasta ¿Qué es el español?
26. internacionalization localization
27. Context makes culture, which then makes language.
28. From context to language • Time and calendar • Units of measurement • Geography and coordinates @evaferreira92
29. Default language
32. https://www.ef.com/wwen/epi
33. Language is a choice.
34. Scene 2: The How: Technique
35. Translation tools From code to SaaS @evaferreira92
36. Keys
37. Send button.send
38. Don't forget to translate screen reader content
39. ICU MessageFormat / i18next • Interpolation • Plurals • Formats  Dates and numbers • Selects / Context  "Conditionals" can be used for gender @evaferreira92
40. i18next • Namespaces  settings.json  dashboard.json  common.json @evaferreira92
41. i18next - Common • Glossary  button.[…]  entity.[…]  status.[…] @evaferreira92
42. Translation Management Systems (TMS)
43. TMS • New keys arrive They get translated Translation memory and screenshots They get reviewed Glossary They get shipped CI/CD integration @evaferreira92
44. Your base language is English
45. Typology of languages De tode nuestra problemos de i18n, el razón. Von alle unsere Problemens der i18n, das Grund. Of all of our i18n's problem, the reasons.
46. Morphological typology
47. Lexeme & morpheme • Español: Perr-o-s / Perr-a-s • English: Dog-s • Deutsch: Hund-e / Hünd-in-nen der Hund / den Hund / dem Hund / des Hund-es die Hund-e / die Hund-e / den Hund-e-n / der Hund-e
48. Morphological typology • Analytic Isolating • Synthetic Fusional Agglutinative Polisynthetic
49. Morphological typology • Analytic English* • Synthetic Spanish German Esperanto Sindarin…
50. Morphological typology • Analytic We will write • Synthetic Escribiremos
51. Verb conjugation English I speak You speak You speak You speak We speak They speak @evaferreira92 Spanish
52. Verb conjugation English Spanish I speak Yo hablo You speak Vos hablás You speak Tu hablas You speak Usted habla We speak Nosotros hablamos They speak Ellos hablan @evaferreira92
53. Pro-drop
54. "The {itemType} was shared." Das Video wurde geteilt Das Foto wurde getailt Die Datei wurde getailt
55. "The {itemType} was shared." El video fue compartido La foto fue compartida El archivo fue compartido
56. The itemType was shared "the": "The" "wasShared": "was shared." "photo": "photo" "video": "video t('common.the') + t('entity.?') + t('common.wasShared')
57. The itemType was shared "shared": "{itemType} was shared.“ "photo": “The photo“ "video": “The video" t('shared’, {entityType}')
58. The itemType was shared "shared": "Se compartió: {itemType}", "shared_f": "La {itemType} fue compartida.", "shared_m": "El {itemType} fue compartido." t('item.shared', { context: genderOf(itemType), itemType })
59. Nouns have gender that differ from one language to another
60. The itemType was shared "shared_photo": "The photo was shared." "shared_video": "The video was shared." t('shared’, {entityType}')
61. Syntactic typology
62. Syntactic typology • Suject • Verb • Object @evaferreira92
63. Syntactic typology • SVO English, Spanish, Mandarin “The cat chased the mouse” • SOV @evaferreira92
64. Syntactic typology • SVO • SOV Japanese, Korean, Hindi, Turkish “The cat the mouse chased” @evaferreira92
65. SVO • Rigid  The dog bit the man  The man bit the dog (failed OVS) • Flexible  El perro mordió al hombre  Al hombre lo mordió el perro (OVS) @evaferreira92
66. You just logged into {service} t('logged_in') + service_name @evaferreira92
67. t('logged_in') + service_name You just logged into {service_name} Acabas de iniciar sesión en {service_name} Du hast dich gerade angemeldet bei {service_name} Du hast dich gerade bei {service_name} angemeldet ログインしました {service_name} {service_name} にログインしました
68. "You just logged into {service_name}" Never concatenate sentences. @evaferreira92
69. Interpolation has to be flexible The placeholder position is defined by the target language
70. Scene 3: The funcó? Quality
71. Shipping strategies Who gets which translation first? @evaferreira92
72. Shipping strategies • Defer feature Do not ship for Japanese customers • Defer translation Ship in English • Provisional translation Ship with Machine Translation @evaferreira92
75. Provisional doesn’t mean careless. We need guardrails to get a good machine translation. @evaferreira92
76. Provisional translations • It's not copying and pasting into Google Translate. • It must be done as part of the Pull Request, working alongisde your coding agent. • They must be reviewed afterwards. • You must give translators context. @evaferreira92
77. Provisional guidelines • Good baseline on common.json  Prevents 50 "Save" keys from being created • UX writing guidelines in the repository  Formality level  You vs. We  Glossary  Do not translate list  High-risk namespaces (billing.json) @evaferreira92
78. CI/CD Checks • Placeholder integrity checks • Missing keys @evaferreira92
79. CI/CD Checks • Sentence assembly companyName + " " + t("list.dashboard") t("list.dashboard", {companyName}) @evaferreira92
80. Coverage threshold
81. Types of coverage • % of an specific user Flow • % translation’ status • % hardcoded, literal strings @evaferreira92
82. @evaferreira92
83. Deterministic checks
84. Validate regularly with AI and then validate the AI
85. Recap • I18n is not just translating strings • English destined us to many issues due to its weak morphology • Never concatenate sentences, use flexible keys • Checks and review processes are your friends
86. ¡Gracias! @evaferreira92