Vibe Coding Part 4: Building a 4-Language Site with AI (and Surviving RTL)

The Moment You Need More Than One Language

You ship your site in English. Then a customer from Saudi Arabia visits. Then another from Mexico. Then Brazil. Suddenly, "English-only" isn't a feature — it's a limitation.

Adding multilingual support sounds simple. In practice, it's one of the hardest things in web development. Arabic reads right-to-left. Portuguese has different number formatting. Spanish needs different currency displays.

Here's how we solved it with AI — and how you can too.

Our i18n Architecture

We support 4 locales:

• en — English (USD) — default
• en-gcc — English with SAR currency (Gulf states)
• es — Spanish (MXN) — Latin America
• pt — Portuguese (BRL) — Brazil

The detection is automatic — based on navigator.language, not IP geolocation. This means a Saudi user with their browser set to Arabic sees Arabic. A Brazilian in the US sees Portuguese.

The RTL Challenge

Arabic isn't just "English backwards." The entire layout flips:

• Navigation goes right-to-left
• Text alignment flips
• Icons that imply direction (arrows, progress) reverse
• CSS properties like margin-left become margin-right

We solved this with CSS logical properties. Instead of margin-left, we use margin-inline-start. Instead of text-align: left, we use text-align: start. The browser handles the direction based on the dir attribute.

The AI helped here too. We told it: "All new components must use CSS logical properties, not physical ones." It learned the pattern and applied it consistently.

Translations Without a Translator

We created a translations.ts file with all UI strings in all 4 languages. The AI generated the initial translations, then we reviewed them for accuracy.

The key insight: don't translate literally. Translate for context. "Add to Cart" in Spanish isn't "Agregar al Carrito" — it's "Añadir al Carrito" (more natural in Latin American Spanish). "Buy Now" isn't "Compra Ahora" — it's "No Pierdas Esta Oportunidad" (power words).

Free Voiceovers with Edge TTS

For video content, we needed voiceovers in multiple languages. We used Edge TTS — Microsoft's free text-to-speech engine:

• Spanish: es-MX-DaliaNeural (warm, natural Mexican Spanish)
• Arabic: ar-AE-HamdanNeural (clear Gulf Arabic)
• English: en-US-GuyNeural (confident, professional)

The quality is production-ready. We compared it to professional voice actors — the difference is barely noticeable, and the cost is $0.00.

Currency Handling

Each locale shows prices in its local currency:

• EN: $XX.XX USD
• EN-GCC: XX.XX SAR
• ES: $X,XXX MXN
• PT: R$ XX,XX BRL

The exchange rates are stored in a config file and updated periodically. The formatting uses Intl.NumberFormat — no custom formatting code needed.

Lessons for Your Multilingual Site

1. Start with CSS logical properties. It's easier to add RTL later if you start with start/end instead of left/right.
2. Use a translations file. Don't scatter translated strings across components. One file, one source of truth.
3. Test RTL early. Don't wait until you have 100 components to discover that flexbox doesn't flip automatically.
4. Let AI generate initial translations. Then review with native speakers. AI gets you 90% there.
5. Use Edge TTS for voiceovers. Free, high quality, 30+ languages. No reason to pay for voice actors for MVP.

Multilingual support turned SAVAH from a local project into a global product. The AI made it possible in a weekend instead of a month.