Developer Guides

How to Prepare for Software Translation: A Step-by-Step Guide

Get your software ready for translation with PTC (Private Translation Cloud). Follow steps to create resource files, handle dynamic content, and add language support.

Most software isn’t built for multiple languages out of the box. To make it translatable, you need to take a few steps to prepare it—a process known as internationalization (i18n).

This guide walks you through the key steps of making your software ready for translation. Once your software is prepared, PTC simplifies the localization process by translating resource files quickly and accurately. With PTC, you can automate translation updates through repository integration, saving time and effort while maintaining high-quality translations.

Steps to Make Your Software Translation-Ready

Preparing your software for translation requires a few essential steps. These steps help you avoid common issues, like untranslated text or functionality errors. Here’s a brief overview of what to do before diving deeper into the tutorial:

  • Store user-facing text in resource files instead of embedding it directly into your source code
  • Use placeholders for dynamic content—like names, dates, and other variables—to ensure they display properly across all languages
  • Configure your software to load the appropriate translation files based on user language preferences
  • If your software allows users to change languages, include a language switcher


These steps apply to all programming languages and frameworks. PTC supports a wide range of technologies, making it easier to manage translation files and maintain high-quality localization:

WordPress localization

Javascript localization

Ruby on Rails localization

Android localization

Step 1: Avoid Hard-Coding Text

You work with two types of content in software: user-facing text and the code that powers the functionality.

Hard-coding text directly into your code can cause issues when translating. For example, if you hard-code “Submit” into your HTML, you’ll need to search through the entire codebase to change it during translation. This can:

  • Slow down the translation process
  • Increase the chance of missing text
  • Introduce bugs

To avoid this, don’t hard-code any visible text. Instead, pull those strings into a separate file, often referred to as a resource file. 

This leads us to the next key step.

Step 2: Organize Text into Resource Files 

Resource files store all the user-facing text from your software—everything from button labels and error messages to prompts and notifications. This text is often referred to as “strings.” By organizing these strings into resource files, you keep them separate from your code, making it easier to manage translations and updates.

Different frameworks rely on various formats for resource files. Here’s a look at common formats and how they organize translatable text:

.po

PO (Portable Object)

Common in PHP-based projects like WordPress

Example of Resource File with Source Language Text:

po 

msgid "Welcome to our site!"
msgstr ""

msgid "Submit"
msgstr ""

.json

JSON (JavaScript Object Notation)

Used in JavaScript frameworks like React or Vue

Example of Resource File with Source Language Text:

Json

{
  "welcome_message": "Welcome to our site!",
  "submit_button": "Submit”
}

.yaml

YAML (YAML Ain’t Markup Language)

Common in Ruby on Rails

Example of Resource File with Source Language Text:

Yaml

en:
  welcome_message: "Welcome to our site!"
  submit_button: "Submit"

.strings

STRINGS

Used by iOS apps

Example of Resource File with Source Language Text:

Strings

"welcome_message" = "Welcome to our site!";
"submit_button" = "Submit";

.xml

XML (Extensible Markup Language)

Used in Android apps

Example of Resource File with Source Language Text:

Xml

<stringname="welcome_message">Welcome</string> <stringname="submit_button">Submit</string>

Most frameworks provide internationalization functions or libraries that help you identify text for translation and store it in resource files. These tools simplify the process by letting you mark user-facing text directly in the code, so you don’t need to manually organize the strings. For example:

  • In React and Vue, libraries like react-intl and vue-i18n provide you with a way to load and use translation files. The translations are then stored in the JSON files you generate.
  • Ruby on Rails includes the I18n module.
  • WordPress uses the __() function to mark strings for translation, which then get compiled into PO files.

PTC works with all localization resource file formats. From PO and JSON to YAML, STRINGS, and XML, PTC automatically handles translations and keeps them up-to-date with every code change.

Step 3: Use Placeholders to Handle Dynamic Content

Now that you’ve organized your translatable text into resource files, it’s time to handle dynamic content. Use placeholders for elements like usernames, dates, or other variable information to keep your translations accurate and working correctly.

Placeholders allow you to insert dynamic values at runtime. For instance, instead of writing “Hello, John!” directly, you’d use a placeholder for the person’s name, like this:

PO File:

msgid "Hello, %s!"
msgstr ""

JSON File:

{
  "greeting": "Hello, {name}!"
}

YAML File:

greeting: "Hello, %{name}!"

The exact format of placeholders depends on the library or framework you’re using, and it’s usually customizable. For example, in Rails, placeholders might look like %{name}, while in Android they appear as %1$s. The flexibility to define placeholder formats allows you to adapt them to your specific needs.

When you send your software for translation, placeholders remain untouched. PTC’s AI-powered translation system recognizes placeholders as markers for where dynamic content will go.

Step 4: Make Sure Your Software Knows How to Load Resource Files

With your translatable text organized into resource files and your placeholders set up, your software needs to know how to load the right resource files based on the user’s language. Here’s how it works in different environments:

  • React/Vue: Use libraries like react-intl or vue-i18n, which handle loading the correct files at runtime
  • Ruby on Rails: The I18n module loads YAML translation files automatically
  • WordPress: Automatically uses PO and MO files according to the language settings in the user’s admin panel

For mobile apps, platforms like Android and iOS load resource files differently:

  • Android: Stores translation files in the res/values directory, with subfolders for each language (e.g., res/values-fr for French). Android loads the correct language file based on the device’s system settings.
  • iOS: Uses .lproj directories for localized strings (e.g., en.lproj for English, fr.lproj for French). iOS loads the right language based on the device settings.

Step 5: Set the Default Language Based on Browser Settings

Making your software available in the user’s preferred language from the start improves their experience.

For mobile apps, the device automatically handles language settings based on the system preferences, so you don’t need to do anything. In web applications, you’ll need to identify the user’s preferred language. You can do this by detecting the user’s browser language and setting it as the default.

Here’s how you can set the default language based on the browser settings in different frameworks:

React/Vue

Use the i18next-browser-languagedetector library to automatically detect the browser language. This library checks the browser’s language settings and applies the appropriate language as the default.

Ruby on Rails

Detect the browser language using the HTTP_ACCEPT_LANGUAGE header and set the language with I18n.locale.

WordPress

WordPress relies on the language settings configured in the site’s backend. When users set their site to a specific language, WordPress will load the corresponding translation files for your theme or plugin’s UI.

Step 6: Add a Language Switcher (When Relevant)

After setting the default language, consider giving users the option to change it. Some users may prefer a language other than the one automatically selected by their system or browser. A language switcher, such as a dropdown or button, allows them to do this easily.

Implementation across different frameworks:

  • React or Vue: Use libraries like react-intl or vue-i18n to set the language. You’ll need to create the language switcher yourself (e.g., a dropdown or button) to reload the appropriate resource files based on the user’s selection.
  • Ruby on Rails: The I18n library lets you programmatically change the language, but you must design the language switcher interface. The app reloads the page with the correct YAML file once the user selects a language.
  • WordPress: Themes and plugins follow the language set in the backend. To translate user-generated content or provide a front-end language switcher, use a multilingual plugin like WPML.

Mobile apps typically default to the user’s system language. However, you can include a language switcher in the app’s settings, allowing users to:

  • Manually change the language
  • Override the system’s default language

You can use both methods—automatic system language and a manual switcher— in the same mobile app. The app can start with the system language but give users the option to switch languages if they want to. This combination offers both convenience and control for users.

Step 7: Translate Your Resource File with PTC

Once your resource file is ready for translation, you can use PTC to translate your files into multiple languages while integrating localization directly into your development workflow.

How translation with PTC works:

Set Up Your Project and Connect to Your Repository

Start by setting up your project in PTC and integrating it with your code repository. PTC automatically detects resource files. You’ll also select the languages you want to translate into during this step.

Receive AI-Powered Translations

PTC uses advanced AI and proprietary technology to provide Better Than Human Translations tailored to your project’s context.

Translations Delivered via Merge Requests

Once translations are complete, PTC sends them to your repository as a merge request. You can review the changes and merge them into your project when ready.

Continuous Localization

PTC monitors your repository for updates. When you modify your resource files, PTC automatically translates the new or updated content and sends a new merge request, keeping your project localized.

Ready to Translate Your Software?

Preparing your software for translation makes it accessible to users worldwide. By organizing your text, handling dynamic content, and avoiding hard-coded strings, you can support multiple languages effectively.

With PTC, translating your resource files is quick and accurate. PTC’s AI-powered translations integrate directly into your workflow, saving you time and effort while delivering high-quality results.

Start your free 30-day trial of PTC today and see how easy it is to translate your software.

Start your free PTC trial
Developer Guides

Start typing and press enter to search

Scroll to Top