How We Built a 10-Language Bulk QR Generator (And Handled RTL Layouts)

When we first launched the RahaLune Batch QR Code Generator, it was a fully functional, client-side React application capable of generating up to 100 custom QR codes from a single CSV file.

But it had one limitation: the entire interface was available only in English.

For a tool intended for businesses, event planners, and inventory managers worldwide, that wasn't ideal.

So, we decided to make it multilingual.

Our latest update brings support for 10 languages, including full Right-to-Left (RTL) support for Arabic and Urdu.

In this article, I'll share some of the challenges we encountered and how we approached localization while keeping everything client-side.

1. Building a Client-Side Translation System

Our first decision was to avoid external translation APIs.

Since RahaLune is entirely client-side, introducing an external service just to handle translations would add unnecessary complexity and potentially affect performance.

Instead, we created separate translation files for each supported language.

When a user selects a language from the header dropdown or visits the tool through a localized URL, the application automatically loads the corresponding translations.

This approach helped us achieve three things:

• Keep the initial application bundle lightweight.
• Load translations only when needed.
• Allow users to switch languages without reloading the entire application.

The result is a straightforward localization system that doesn't require a translation backend.

2. The Biggest Challenge: Right-to-Left Layout Support

Translating the interface was relatively straightforward. Making the entire application work properly in RTL languages was a different challenge.

Arabic and Urdu aren't simply English interfaces with translated labels. Their reading direction changes, which affects the overall layout and user experience.

We wanted the application to feel native to RTL users.

That meant adapting:

• Navigation and interface alignment.
• Input sections and tabs.
• Buttons and form elements.
• The three-step generation wizard.
• QR code preview layouts.

We also made the layout direction change automatically when users switch between languages.

One important lesson from this process was to avoid relying on fixed left-to-right spacing throughout the application.

Using flexible, direction-aware layouts made it much easier to support both LTR and RTL languages without maintaining completely separate designs.

3. Dealing with Longer Translations

Another challenge was handling text that takes up more space than its English equivalent.

For example, German and French translations can be considerably longer than English labels.

This becomes particularly noticeable in compact UI components such as our input tabs:

• Paste List
• Upload CSV
• Manual Entry

Longer translations can cause text overflow, inconsistent button heights, and alignment problems.

To address this, we made the interface more flexible.

Instead of forcing every label into a fixed-size container, we allowed buttons and tabs to grow naturally. We also adjusted spacing and minimum heights to maintain visual consistency when text wraps onto multiple lines.

This helped us maintain a clean interface across all 10 languages.

4. Making Multilingual SEO Work

Adding multiple languages also introduced an SEO consideration.

We wanted search engines to understand that the application was available in different languages and direct users to the appropriate version.

To achieve this, we implemented language-specific page titles, meta descriptions, and social sharing metadata.

We also added hreflang information to help search engines identify the available language versions.

For example, users searching in French should be able to discover the French version of the tool rather than always landing on the English interface.

This is an important part of building multilingual web applications. Translating the interface is only one part of localization; making those translations discoverable is equally important.

5. Keeping Everything Client-Side and Private

Throughout this update, one requirement remained unchanged: user privacy.

RahaLune doesn't need a backend to process QR codes.

Even after introducing support for 10 languages, all major operations continue to happen directly in the browser:

• Loading translations.
• Processing CSV files.
• Generating multiple QR codes.
• Creating ZIP downloads.
• Rendering QR code previews.

We don't need users to upload their CSV files to an external server to perform these operations.

Your files stay on your device.

Adding multilingual support didn't require compromising the privacy-first architecture of the application.

6. What's Next?

The Batch QR Code Generator now supports 10 languages and automatically adapts its layout for RTL users.

This update was a good reminder that internationalization involves much more than translating interface text.

It requires thinking about layout direction, text length, accessibility, SEO, performance, and the overall user experience.

We're happy to make RahaLune more accessible to people around the world while keeping it free and entirely browser-based.

Try It Yourself

You can explore the updated Batch QR Code Generator here:

RahaLune Batch QR Code Generator

Try switching to Arabic or Urdu to see the RTL layout in action.

If you're building a multilingual React application, we'd also love to hear about your approach to handling localization and RTL layouts.