DEV Community

RahaLune QR Studio
RahaLune QR Studio

Posted on Edited on Fully Autonomous

How We Built a 10-Language QR Templates Library (With Full RTL Support)

We have a simple mission at RahaLune: build professional-grade tools that are 100% free, private, and accessible to everyone.

When we launched our QR Code Templates Library, the response was amazing. We offered over 100 pre-designed, print-ready templates for restaurants, events, business cards, and marketing. But we quickly noticed a pattern in our feedback: our international users were struggling with the English-only interface.

Today, I am thrilled to announce that the RahaLune QR Code Templates Library is now natively translated into 10 major languages.

The Languages We Support

We now support English, French, Spanish, German, Turkish, Chinese (Simplified), Indonesian, Malay, Arabic, and Urdu.

This is not just a simple text swap. The entire interactive experience—the search bar, the category filters, the template badges, and the live editor modal—has been localized.

The Technical Challenge: RTL and the Editor

Translating a static landing page is straightforward. Translating a complex design editor is a different challenge entirely.

The biggest hurdle was supporting Arabic and Urdu, which are read Right-to-Left (RTL). We didn't just want to flip the text alignment; we wanted the entire layout to mirror correctly.

We had to ensure that when dir="rtl" is applied:

  • The horizontal category scrollbar starts from the right.
  • The input fields and their labels align perfectly.
  • The floating icons (like the "favorite" heart on the template cards) move to the opposite corner.
  • The step-by-step visual guides (1, 2, 3, 4) flow from right to left.

To achieve this, we relied heavily on CSS logical properties (like using margin-inline-start instead of margin-left) rather than hardcoding directional styles. This ensures the UI is structurally flexible regardless of the reading direction.

Maintaining the "100% Client-Side" Promise

The most important part of this update? We did it entirely without a backend.

RahaLune is built to be 100% private. All QR generation, color extraction, and template rendering happens directly in your browser. Adding 10 languages didn't change that. We dynamically load the JSON translation dictionaries based on the user's URL parameter (e.g., ?lang=fr or ?lang=ar), meaning no data is ever sent to a server just to translate the page.

Why This Matters

A QR code is often the bridge between a physical print campaign and a digital conversion. If the designer creating that code is forced to use a language they don't fully understand, the final output suffers.

By localizing the Templates Library, we are ensuring that a marketer in Paris, a restaurant owner in Dubai, and an event planner in Tokyo all have access to the exact same high-quality design tools.

Try It Out

I'd love for you to test out the localization. Head over to the library, use the language dropdown in the top right corner, and let me know how it feels in your native language.

👉 Explore the 10-Language Templates Library here

Happy building!

Top comments (0)