Translating your WordPress website into multiple languages is a great way to reach a broader audience from around the world, improve engagement, and build trust. But how difficult is it to achieve? In this post, you'll discover how to easily translate WordPress using one of the most popular WordPress multilingual plugins. Additionally, you’ll learn about the main benefits and challenges of such translation, along with practical tips that can help you make the translation process easier.

WordPress translation plugins

Plugins are a cornerstone of the WordPress ecosystem. They empower users with flexibility, enable easy customization without the need for coding, and provide modularity by allowing you to add only the features you truly need. When it comes to making a WordPress site multilingual, plugins play an essential role. The WordPress community has developed a range of powerful plugins that simplify website translation and automate many tedious localization tasks. Among the most popular translation plugins are WPML and Polylang. In the following sections, we’ll focus on Polylang, as it is widely used and offers core translation features completely free of charge.

Polylang as a multilingual content manager

Before we start installing and configuring the Polylang plugin, it is worth being aware of a few important details about how Polylang handles translation. Polylang acts as a multilingual content manager, meaning it maps translated pages, posts, and categories behind the scenes and displays the appropriate page variant based on the selected language.

However, this approach is quite different from traditional software localization, where translatable text within the code is replaced at runtime by a localization library with the appropriate translation. Instead of extracting translatable strings into localization files, Polylang works by duplicating content and creating separate versions of pages and posts for each language.

This method is easier for users who are not familiar with coding, since duplicating and translating pages is straightforward and intuitive. However, it comes at the cost of duplicating all content for each language and requiring manual updates on every page, which can sometimes be time-consuming and somewhat annoying.

Setting up Polylang on your WordPress site

In the following sections, you will learn how to install and run WordPress locally on your computer, install the Polylang plugin, configure your theme and permalinks for user-friendly URLs, set up Polylang, translate your content, and much more.

Setting Up WordPress locally with MAMP

Setting up WordPress on your local machine is a straightforward process. At its core, it involves downloading the WordPress package, setting up a local web server and database, and running the WordPress installation script in your web browser. For our local server environment, we'll use MAMP, a free tool that bundles Apache, PHP, and MySQL together for easy local development.

MAMP is just one option for local development. If you prefer XAMPP, WAMP, or another method to run WordPress locally, that's perfectly fine.

Detailed guidelines for installing WordPress can be found in the official WordPress documentation.

Adding a theme

To keep this guide as simple as possible and avoid any confusion later on, we’re going to install a theme for our WordPress website. From the WordPress admin dashboard, go to Appearance > Themes and click on Add Theme. On that page, search for Twenty Twenty-One, then install and activate it.

We’re choosing this theme because it works well with the Polylang plugin, which we’ll install later, and it allows us to easily add a language switcher to our website. Additionally, it’s simple and sufficient for the purpose of this guide.

Some themes do not support the easy addition of a language switcher from the Polylang plugin and may require some programming to achieve this.

Configuring permalinks in WordPress

Permalinks in WordPress are the permanent URLs used for pages and posts on your website. By default, WordPress uses a custom permalink structure that is neither very intuitive nor easy to remember. To make your URL structure more user-friendly and straightforward, let’s update it to use just the post name. This configuration will also align with the URL modifications from the Polylang plugin, which we will configure later, allowing for intuitive URL paths for pages in multiple languages.

This step is optional but will make your WordPress URLs clearer and more user-friendly.

To change the default permalink behavior, navigate to the admin dashboard, go to Settings > Permalinks, set the Permalink structure to Post name, and save the changes.

Changing the permalinks configuration to Post name will also require updating the Apache configuration in MAMP. So, let's ensure that the mod_rewrite module is enabled in the httpd.conf file (i.e., the corresponding line is not commented out with a #). On macOS, this file is most likely located in the /Applications/MAMP/conf/apache/ directory.

The httpd.conf file:

...
LoadModule rewrite_module modules/mod_rewrite.so
...

Installing the Polylang plugin

Installing the Polylang plugin is similar to installing any other WordPress plugin. From the WordPress admin dashboard, go to Plugins > Add Plugin and search for "Polylang". Once you find the Polylang plugin in the search results, click Install Now and then Activate to enable it on your site.

Once you have activated the Polylang plugin on your WordPress website, you should notice a new Languages menu item in the left sidebar of the admin dashboard.

Adding initial pages

Before we begin configuring the Polylang plugin and translating content, let's first add a few pages to our WordPress website. Below is the structure of the pages we will be adding:

Home
Contact
Blog
  ∟ Welcome Post

We will create three pages, Home, Contact, and Blog, and one post, titled "Welcome Post".

Once these pages and the post have been added, let's update the WordPress settings to designate the homepage and posts page. To do this, navigate to Settings > Reading. Under Reading Settings, set the Homepage and Posts page accordingly, then save your changes.

This configuration will set the homepage to our Home page and set the Blog page to display our posts, or in our case, the post titled "Welcome Post".

To keep this already lengthy post simple, we will omit entering data on these pages for now. However, feel free to add some text if you’d like, as we will be translating all of these pages in one of the following steps.

Configuring Polylang

Finally, we can configure the Polylang plugin and add the initial languages to our WordPress site. As mentioned earlier, after activation, the Polylang plugin adds a Languages menu item to the left sidebar of the admin dashboard. Now it's time to use it.

By going to Languages > Setup, Polylang will display a guide where you can easily enter the basic configuration settings. Here, you can add the languages you plan to use on your WordPress website and configure some initial settings.

Once you've completed the Polylang setup, you can return to the admin dashboard and notice that Polylang has added those languages, updated the Languages > Settings section, and created a new menu item, the Languages > Translations.

On the Languages > Translations page, we can see some texts such as the app title and formatting options for the languages we've added. Let’s populate them with appropriate values.

On the Languages > Settings page, we can review the Polylang configuration and update any settings if needed.

For now, the most important section is URL modifications. Below, you can see how this section looks.

Translating content

Now that we’ve prepared everything and configured Polylang, let’s translate our pages and posts. This process should be straightforward. Next to each page and post, you’ll see the languages your WordPress site supports, along with buttons to edit existing translations or add missing ones.

The free version of the Polylang plugin does not allow you to use the same URL slugs for posts or terms across different languages. According to the Polylang documentation, this feature is only available in the paid version of the plugin.

Adding language switcher

Since we have added pages and posts and translated all content, we want to add a language switcher so our users can easily change the language on our WordPress website. For this reason, we initially installed the Twenty Twenty-One theme, as it allows us to add a language switcher easily.

To set this up, navigate to Appearance > Menus in the admin dashboard and create a menu for each language, one for English and one for French, in our case. Here, we will also add the Language Switcher provided by Polylang. Below, you can see an example of the menu for the English language.

If you can't see the Language Switcher on the Menus page, check if "Language switcher" is checked under the Screen Options in the top right corner.

If you don't see the menu on your pages, make sure it is configured correctly and that your pages include it.

That’s it! You should now have a fully functional multilingual WordPress site.

Detecting browser language

In software localization, it is common practice to detect the user's preferred language and display the page accordingly in the most appropriate language. The Polylang plugin also supports this feature. Under Languages > Settings, you can enable the Detect browser language option if you require this functionality.

This detection works by examining the Accept-Language header in the request and, if necessary, redirecting the user to a page in a more suitable language. You can test this behavior by changing your browser’s language to French and then visiting your multilingual WordPress website.

This detection should work only for users who are visiting your WordPress site for the first time. If the detection does not work as intended, try deleting the pll_language cookie and test again.

Translate WordPress effectively

When translating WordPress sites, it’s important to keep the following points in mind:

• Ensure that links between pages work as expected on your multilingual WordPress site.
• Make sure you have also translated all meta data.
• Add hreflang tags so that search engines better understand your pages and the relationships between them. Check hreflang generator and checker tools.
• Remember that some images may contain text, which also needs to be translated.
• Users appreciate being able to change the language; ensure that at least one language switcher is available on your website.
• When using the Polylang plugin, duplicating pages and re-entering all the content can be tedious. A faster workflow is to open your pages in WordPress using the Code Editor instead of the Visual Editor, copy the content, paste it into the new page, and then translate it.
• If you already use other plugins, check if Polylang is compatible with them. For example, elements of Contact Form 7 can also be translated using Polylang by installing the Contact Form 7 Polylang Module and the Smart Grid-Layout Design for Contact Form 7.
• Some languages require more space. Make sure that buttons or text are displaying and wrapping properly, especially on smaller screens.
• Keep in mind that date and number formatting may differ between languages.

Conclusion

In this post, we shared how to translate WordPress site into multiple languages using the Polylang plugin. We also included useful tips to help you save time and streamline the translation process.

But what if you need to translate a WordPress theme or plugin and work with localization files? How can you seamlessly collaborate with your translators and the rest of your team? That’s where the Localizely platform comes in. With Localizely, you can quickly upload your PO localization files, translate them efficiently, and integrate them back into your codebase with ease. The platform offers a host of valuable features, including machine translation, translation memory, glossaries, intuitive team collaboration tools, and much more.

Try Localizely for free.

Tired of spending hours translating Excel files for localization, or worse, struggling with hidden formatting errors and inconsistent translations? You're not alone. This guide walks you through smart, efficient techniques for translating Excel files, helps you steer clear of common localization pitfalls, and shows how specialized tools can streamline your workflow while maintaining high quality. Ready to translate faster and with confidence? Let’s dive in!

Understanding Excel files

Before diving into the nuances of translating Excel files and discussing best practices, it’s important to understand what they are and why their translation plays a crucial role in developing multilingual applications.

Excel is a widely used file format across various industries due to its flexibility and user-friendliness, especially for non-technical users. One of its key applications is software localization, where Excel files serve as a convenient medium for exchanging translated text between developers and translators. Although localization libraries offer limited native support for Excel, many third-party tools can convert other localization file formats (such as PO or JSON) into Excel, and vice versa.

The primary advantage of using Excel files in software localization is their ability to simplify collaboration between technical and non-technical teams. By providing a straightforward way to organize and manage localization content, Excel bridges the gap between developers and translators, ensuring smoother workflows.

The role of localization files in software development

A core principle in software localization is storing translations in dedicated files, keeping textual content separate from the codebase. This practice has been a standard since the early days of programming, as it significantly simplifies maintenance and future updates.

For example, if an application needs to support a new language, developers can simply add a new localization file containing the translated text, without making extensive changes to the core code. This approach not only streamlines the addition of new languages but also ensures the application remains easy to update without compromising multilingual support.

By maintaining text in separate files, developers can focus on code and content independently, improving both development efficiency and the localization process.

Learn more about Excel file.

Different approaches for translating Excel files

When translating Excel files, two primary methods are commonly used. The first relies on standard spreadsheet editors like Microsoft Excel, LibreOffice Calc, or Apple Numbers. These tools are versatile for handling Excel and similar formats and may already be part of your workflow. The second approach involves specialized translation tools designed for localization, offering features tailored specifically for these types of files.

Using Excel editors

While spreadsheet editors allow direct file modifications, they lack advanced localization features and safeguards against common errors in software localization. To use this method effectively, you need a solid understanding of Excel’s structure to ensure you translate the correct sections without disrupting functionality.

Using specialized translation tools

Specialized translation tools, on the other hand, are built specifically for handling localization files like Excel. They help identify which sections require translation, minimizing errors and omissions. These tools often include useful features such as:

• Screenshot previews for better context
• Translation memory to reuse previous translations
• Glossary management for consistency
• Collaboration support, allowing team members to comment and share feedback

By leveraging these tools, the translation process becomes more efficient, user-friendly, and likely to yield high-quality results.

Common mistakes in Excel file translation for localization

This section outlines the key challenges of manually translating Excel files for software localization:

• Invalid file structure: Excel files depend on precise column and row formatting, which can lead to errors, especially for those unfamiliar with manual editing. Common issues include structural mistakes, missing or extra columns/rows, misaligned data, and formatting inconsistencies.

• Improper placeholder handling: Placeholders must remain unchanged during translation. Modifying or mistranslating them can cause runtime errors or application failures.

• Incorrect pluralization handling: Different languages have different pluralization rules. Applying the wrong rules (e.g., using English conventions for languages like Arabic, which has multiple plural forms) results in grammatically incorrect or confusing translations.

Dedicated localization tools for Excel files help mitigate these risks by automating file generation and formatting, validating placeholders to prevent errors, and applying locale-specific pluralization rules. By adopting these tools, teams can significantly improve translation accuracy while streamlining the localization process, resulting in greater efficiency and fewer errors.

Automate Excel file translations for faster, smarter workflows

Manual Excel translations slow you down—automation accelerates them. By integrating modern localization tools into your workflow, you can cut translation time, reduce errors, and keep projects moving at the speed of development.

Collaborate seamlessly across teams

Localization platforms break down silos by bringing managers, developers, designers, and translators together in one workspace. Assign tasks, track progress, and maintain clarity on responsibilities, all while minimizing manual errors and keeping translations aligned with project goals.

Example of task assignment in Localizely:

Speed up translations with AI-powered Machine Translation

Why start from scratch when AI can help? Machine Translation (MT) instantly generates draft translations for your Excel files in multiple languages. Use it as a baseline, refine with human expertise, and deliver high-quality translations in record time.

See how Machine Translation works in Localizely:

On-demand professional translations

For mission-critical projects, nothing beats professional human translation. Upload your Excel files, select target languages and tone (formal or casual), and receive polished, deadline-ready translations—every time.

How to order professional translations in Localizely:

Automating Excel translations isn’t just about speed, it’s about efficiency, accuracy, and scalability. With the right tools, you can streamline workflows, maintain consistency, and free your team to focus on other important tasks and building great products.

Choosing the right Excel translator tool for your project

Selecting the most appropriate Excel translator tool for your project can sometimes be challenging. Your decision depends on factors such as your project’s requirements, your development workflow, the size of your team, and other related considerations. A simple guideline can help here. If you are working on your own, feel comfortable handling Excel files, and only need to make minor updates or adjust a few translations, a basic spreadsheet editor will likely be enough. However, if your project calls for more advanced features like built-in machine translation, translation memory, glossary support, collaboration with other team members, and tools that help you keep everything organized and consistent across multiple languages, a specialized Excel translator tool is the better choice.

Conclusion

In this guide, we’ve explored two common methods for translating Excel localization files. We’ve also discussed the challenges of manual translation and shared practical strategies to improve efficiency using specialized localization tools.

Localizely is a reliable localization platform designed specifically for translating Excel files. With powerful features, it streamlines the software localization process. The best part? It offers a free plan (no credit card required), making it perfect for small projects, and it’s completely free for open-source projects.

Try Localizely for free today.

Tired of wasting hours translating CSV files for localization, or worse, dealing with hidden formatting errors and inconsistent translations? You're not alone. This guide walks you through smart techniques to translate CSV files efficiently, helps you avoid common pitfalls in software localization, and shows how specialized tools can speed up your workflow while ensuring high quality. Ready to translate with confidence? Let’s go!

Understanding CSV files

Before exploring the nuances of translating CSV files and discussing best practices, it’s essential to understand what they are and why their translation is crucial for developing multilingual applications.

CSV (Comma-Separated Values) is a widely used file format across various fields. It is a highly flexible and user-friendly format, especially for non-technical users. One of its key applications is software localization, where CSV files facilitate the easy exchange of translated text between developers and translators. While some localization libraries support this format, its primary advantage lies in simplifying collaboration between technical and non-technical teams by providing a straightforward way to manage localization content.

A fundamental principle in software localization is storing translations in dedicated files, keeping textual content separate from the codebase. This approach has been a standard practice since the early days of programming and significantly simplifies maintenance and future updates. For example, if an application’s interface needs to support a new language, developers can simply add a new localization file containing the translated text without extensive modifications to the core code. This method not only streamlines the addition of new languages but also ensures the application remains easy to update without compromising multilingual support. By maintaining text in separate files, developers can focus on code and content independently, improving both development efficiency and the localization process.

Learn more about CSV file.

Different approaches for translating CSV files

When translating CSV files, two main approaches are commonly used. The first relies on basic text editors like Notepad, Notepad++, or TextEdit. These tools are versatile for handling text-based files and may already be part of your workflow. The second approach involves specialized translation tools designed for localization, offering features specifically optimized for CSV files.

Using basic text editors

Basic text editors allow you to edit various file types, including CSV files. However, they lack advanced localization features and safeguards against common CSV-related errors. To use this method effectively, you need a solid understanding of CSV file structure. This ensures you translate the correct sections while avoiding mistakes that could disrupt functionality.

Using specialized translation tools

Specialized translation tools, on the other hand, are designed specifically for handling localization files like CSV. They help identify which sections require translation, minimizing errors and omissions. These tools often include useful features such as:

• Screenshot previews for better context
• Translation memory to reuse previous translations
• Glossary management for consistency
• Collaboration support, enabling team members to comment and share feedback

By leveraging these tools, the translation process becomes more efficient, user-friendly, and likely to produce high-quality results.

Common mistakes in CSV file translation

This section highlights the key challenges faced when manually translating CSV files for software localization:

• Invalid file structure: CSV files rely on comma-based formatting, which can easily lead to errors, especially for those unfamiliar with manual CSV editing. Common issues include structural mistakes, missing or extra commas, column misalignment, and similar formatting errors.

• Improper placeholder handling: Placeholders must remain unchanged during translation. Altering or mistranslating them can cause runtime errors or application failures.

• Incorrect pluralization handling: Different languages follow different pluralization rules. Applying the wrong rules (e.g., using English conventions for languages like Arabic, which has multiple plural forms) can result in grammatically incorrect or confusing translations.

Using specialized translation tools for CSV files helps avoid these issues. Such tools automate file generation, validate placeholders, and ensure locale-specific pluralization, reducing risks and improving accuracy. Adopting them is a strategic way to achieve seamless localization.

Automating CSV file translation

Automating parts of the CSV file translation process can greatly enhance efficiency, a game-changer in today’s fast-paced development workflows. This section explores strategies to accelerate translations using modern localization tools.

Improving translations through team collaboration

Localization platforms streamline teamwork by letting you invite managers, developers, designers, and translators, then assign tasks with clear responsibilities. This approach helps your team handle translations efficiently, freeing you to focus on other critical project tasks. Additionally, these tools minimize manual errors, ensuring a smoother and faster development cycle.

Example of task assignment in Localizely:

Speeding up translations with Machine Translation

Many localization tools now integrate Machine Translation (MT), providing instant translations for CSV files in multiple languages. Using MT for a first draft, followed by careful human review, can drastically cut translation time without compromising quality.

See Machine Translation in action on Localizely:

Getting professional translations on demand

For top-quality results, professional translation services are the best choice. Simply upload your CSV files, specify the target languages and preferred tone (formal or casual), and let experts deliver polished translations within a set timeframe.

How to request translations on Localizely:

By automating parts of the CSV translation process, you save time, reduce errors, and keep projects moving forward. These specialized tools help organize tasks, track progress, and maintain consistency, enhancing both translation speed and quality.

Selecting the right CSV translator tool for your project

Choosing the most suitable CSV translator for your project can be challenging. Your decision will depend on various factors, such as the specific requirements of your project, your development workflow, team size, and similar considerations. As a general guideline, if you’re working alone, comfortable with the technical side of CSV files, and only need to make small changes or update a handful of translations, a simple text editor should suffice. On the other hand, if your needs are more complex, such as requiring advanced features like integrated machine translation, translation memory, glossary support, team collaboration, and tools to ensure consistency and organization across multiple languages, a specialized CSV translator tool is likely a better option.

Conclusion

In this guide, we’ve covered two common methods for translating CSV localization files, along with the challenges of manual translation. We’ve also shared practical strategies to boost efficiency using specialized localization tools.

Localizely is a reliable localization platform tailored for translating CSV files. Packed with powerful features, it simplifies the software localization process. Best of all, it offers a free plan (no credit card required), making it ideal for small projects, and it’s completely free for open-source projects.

Try Localizely for free today.

Are you tired of spending too much time translating Android XML files for localization? This guide is here to help! We’ll walk you through common translation techniques to efficiently translate Android XML, highlight potential roadblocks that could slow you down, and show how specialized tools can speed up your workflow while improving translation quality. Ready to elevate your translation process? Let’s dive in!

Understanding Android XML files

Before delving into the nuances of translating Android XML files and discussing best practices, it's essential to first grasp what these files are and why their translation is crucial for developing multilingual applications.

Android XML files, also known as Android Resources files, play a pivotal role in the localization of Android apps. A fundamental principle in software localization involves storing translations in dedicated files, thus keeping textual content separate from the codebase. This approach has been a standard practice since the early days of programming and significantly simplifies maintenance and future updates.

For instance, if an app's interface needs to support a new language, developers can easily add a new Android XML file containing the translated text without making extensive changes to the core code.

This method not only facilitates the addition of new languages but also ensures that the app remains easy to update or modify without compromising multilingual support. By keeping text in separate files, developers can focus on code and content independently, thereby improving both development efficiency and the localization process.

Learn more about Android XML file.

Different approaches for translating Android XML files

When it comes to translating Android XML files, there are primarily two approaches that are widely adopted. The first involves the use of basic text editors such as Notepad, Notepad++, or TextEdit. These applications are versatile for managing text-based files and might already be integrated into your workflow. The second approach utilizes specialized translation tools specifically designed for localization, featuring functionalities tailored to the needs of Android XML files.

Using basic text editors

Basic text editors offer the flexibility to edit a variety of file types. However, they fall short in providing advanced localization features, including safeguards against common errors encountered in Android XML files. To effectively use this method, a thorough understanding of the Android XML file structure is crucial. You should know precisely which sections to translate while steering clear of errors that could compromise functionality.

Using specialized translation tools

On the other hand, specialized tools are fine-tuned for handling Android XML files. They guide users through the sections that need translation, significantly reducing the likelihood of errors or omissions. These tools often come equipped with valuable features such as screenshot previews for enhanced context, translation memory for reusing previous translations, glossary management to ensure consistency, and collaboration support. The latter allows team members to contribute comments and share insights. By taking advantage of these tools, the translation process becomes more streamlined, user-friendly, and is more likely to yield high-quality outcomes.

Common mistakes in Android XML file translation

This section outlines the common challenges encountered when manually translating Android strings for software localization:

• Invalid file syntax: Android XML files demand precise formatting, which can lead to errors, particularly for those not well-versed in XML. Frequent issues encompass structural errors, missing closing tags, malformed keys or values, and other standard XML editing mistakes.

• Improper placeholder handling: During translation, placeholders must remain unaltered. Modifying or mistranslating them can result in runtime errors or app malfunctions.

• Incorrect pluralization handling: Different languages adhere to distinct pluralization rules. Applying incorrect forms (for instance, using English rules for languages like Arabic, which has multiple plural forms) can produce grammatically inaccurate or confusing text.

Utilizing specialized translation tools for Android XML files can mitigate these issues. These tools streamline file generation, validate placeholders, and guarantee correct locale-specific pluralization, thereby minimizing risks and enhancing accuracy. Their adoption is a strategic approach to achieving flawless localization.

Automating the translation of Android XML files

Automating specific aspects of translating Android XML files can significantly boost efficiency, marking a crucial shift in today's fast-paced development workflows. This section explores various strategies to speed up the translation process using modern localization tools.

Enhancing translation through team collaboration

Localization platforms enhance teamwork by allowing you to invite managers, developers, designers, and translators, and then assign tasks with clear responsibilities. This method enables your team to manage translations effectively, freeing you to focus on other vital aspects of your project. Furthermore, these tools reduce manual errors, ensuring a smooth and rapid development cycle.

Here's an example of task assignment on Localizely:

Accelerating translations with Machine Translation

Many localization tools now include Machine Translation, offering instant translations of Android XML files into various languages. Using Machine Translation for an initial draft, followed by thorough human review, can significantly shorten translation times without sacrificing quality.

See Machine Translation in action on Localizely:

Accessing professional translations on demand

For translations of a professional standard, turning to professional translators is a wise decision. Simply upload your Android XML files, specify the target languages and the desired tone (whether formal or casual), and rely on the expertise of professional translators to deliver high-quality translations within a predetermined timeframe.

Here's how to request translations on Localizely:

By automating specific aspects of translating Android XML files, you not only save time and reduce errors but also keep your projects moving forward. These specialized tools aid in organizing tasks, monitoring progress, and maintaining consistency, thus improving both the efficiency and quality of translations.

Selecting the right Android XML translator tool for your project

Identifying the best Android XML translator tool for your project can be challenging. The optimal choice depends on several key factors, such as your project requirements, the development workflow, team size, and similar considerations. As a general rule of thumb, if you are working independently, are familiar with the technical aspects of Android XML files, and only need to make minor tweaks or update a few translations, a basic text editor will likely be sufficient. On the other hand, if your project demands more robust features, like built-in machine translation, translation memory, a glossary, team collaboration capabilities, or tools to maintain consistency across multiple languages while keeping everything organized, a specialized Android XML translator tool will serve you much better.

Conclusion

In this post, we have provided a concise guide on how to translate Android strings, covering two prevalent methods. Additionally, we explored the challenges associated with manual translation and shared effective strategies for enhancing efficiency through the use of specialized localization tools.

Localizely stands out as a reliable localization platform, specifically designed to facilitate the translation of Android XML files. Equipped with a range of valuable features, it significantly streamlines the software localization process. Notably, the platform offers a free plan (no credit card required), making it an excellent choice for smaller projects. Furthermore, it is entirely free for open-source projects.

Try Localizely for free today.

Struggling to efficiently translate Java properties files for software localization? Fortunately, this guide is here to offer tips and best practices. We'll explore effective strategies for translating Java properties files, from manual methods to automated solutions. Additionally, we'll delve into the common pitfalls of manual translation and demonstrate how specialized tools can streamline the process and enhance accuracy. Ready to optimize your localization workflow? Let's get started!

Understanding Java properties files

Before delving into the intricacies of translating Java properties files and sharing insightful tips and best practices, it's crucial to first understand what these files are and recognize the importance of their translation in developing multilingual applications.

Java properties files are a file format widely used in the development of Java applications. They serve various purposes, from storing project configurations to containing translations for software localization. A fundamental practice in programming involves keeping translations in dedicated files, effectively separating an application’s textual content from its codebase. This methodology, dating back to the early days of computing, significantly facilitates maintenance and future updates. For example, if an application’s interface needs to be presented in a new language, developers can easily add a new Java properties file with the translated texts without having to make substantial changes to the application's core code.

This strategy not only makes the addition of new languages straightforward but also ensures that the application can be easily updated or modified without compromising its multilingual capabilities. By storing text in separate files, developers can focus on code and content independently, boosting the efficiency of both the development and localization processes.

Learn more about Java properties file.

Different approaches for translating Java properties files

When translating Java properties files, two primary approaches are commonly used. The first involves basic text editors such as Notepad, Notepad++, or TextEdit. These tools are versatile for handling text-based files and may already be part of your workflow. The second approach relies on specialized tools built specifically for translating Java properties files, offering features tailored to localization needs.

Comparing the two approaches

Using a basic text editor provides flexibility since the same tool can edit various file types. However, these editors lack advanced functionality for software localization, such as safeguards against common errors in Java properties files. To use this method effectively, you must have a strong grasp of the file structure, knowing exactly which parts to translate while avoiding mistakes that could disrupt functionality.

In contrast, specialized translation tools are optimized for Java properties files, guiding users through translatable sections and reducing the risk of errors or omissions. These tools often include additional helpful features, such as screenshot previews, translation memory for reusing past translations, glossary management, and collaboration support, enabling team members to add comments, share insights, and better understand context. By leveraging these tools, the translation process becomes more efficient, user-friendly, and likely to yield higher-quality results.

Common mistakes in Java properties file translation

This section explores the typical challenges encountered when manually translating Java properties files for software localization:

• Invalid file syntax: Java properties files require strict formatting rules, which can be error-prone for those unfamiliar with the syntax. Common issues include malformed keys or values, incorrect escaping, or misplaced delimiters.
• Incorrect file encoding: Java properties files are typically encoded in UTF-8 or Latin-1. Using the wrong encoding when opening or saving these files can corrupt special characters and cause display errors.
• Improper placeholder handling: Placeholders must remain unchanged during translation. Modifying or mistranslating them can lead to runtime errors or broken functionality in the application.
• Incorrect pluralization handling: Different languages have distinct pluralization rules. Applying the wrong plural forms (e.g., using English rules for a language with multiple plural forms like Arabic) can result in grammatically incorrect or misleading text.

Using specialized translation tools for Java properties files can help mitigate these issues. Such tools automate file generation, ensure proper encoding, validate placeholders, and support locale-specific pluralization, reducing risks and improving translation accuracy. Adopting these tools is a proactive approach to achieving error-free localization.

Automating Java properties file translation

Automating Java properties file translation can dramatically improve efficiency, a game-changer in today's fast-moving development workflows. This section covers some strategies that can help you speed up the translation process using modern localization tools.

Simplify translation with team collaboration

Localization platforms make teamwork seamless by allowing you to invite managers, developers, and translators, and then assign tasks with clear responsibilities. While your team efficiently handles translations, you can focus on other important project tasks. Additionally, these tools reduce manual errors, keeping your development cycle smooth and fast.

Below is an example of task assignment in Localizely.

Speed up translations with Machine Translation

Many localization tools support Machine Translation, instantly translating Java properties files into multiple languages. Use Machine Translation for a quick first draft, then refine with human review to cut translation time without sacrificing quality.

See how Machine Translation works in Localizely:

Get expert translations on demand

Need professional-quality translations? Outsourcing to translation professionals is an excellent option. Simply submit your files, select the target languages and desired tone (formal, casual, etc.), and let skilled translators deliver the completed translations within a predetermined timeframe.

Here’s how to order translations in Localizely:

By automating Java properties file translation, you save time, reduce errors, and keep projects moving faster. Specialized tools help organize tasks, track progress, and ensure consistency, boosting both efficiency and translation quality.

Selecting the right Java properties translator tool for your project

Identifying the most suitable Java properties translator tool for your needs can be challenging. The decision largely hinges on factors such as your project’s requirements, your team’s workflow, team size, and related considerations. As a general rule, if you are working independently, feel comfortable handling Java properties files, and only need to make small updates or minor corrections to translations, a simple text editor should suffice. On the other hand, if your project demands more advanced capabilities from your Java properties translator, for example, integrated machine translation, translation memory, a glossary, support for team collaboration, and features to maintain consistency and organization across multiple languages, a specialized Java properties translator tool is the better option.

Conclusion

In this post, we’ve provided a concise overview of how to translate Java properties files, covering two common approaches. We’ve also highlighted the challenges of manual translation and shared effective strategies to improve efficiency using specialized localization tools.

Localizely is a reliable localization platform designed to simplify translating Java properties files. With a range of useful features, it streamlines the software localization process. The platform offers a free plan (no credit card required), making it ideal for smaller projects, and it’s entirely free for open-source projects.

Try Localizely for free today.

YAML (YAML Ain't Markup Language) is a file format used in software localization for holding localization messages. It is valued for its flexibility and user-friendly design. However, manually editing YAML localization files can be challenging, especially for those without a technical background. To overcome these obstacles and improve translation quality, specialized YAML editors have been developed. These editors are equipped with sophisticated features designed to make the YAML editing process smoother and increase localization efficiency. This article explores the benefits of these editors, demonstrating how they simplify YAML editing tasks and enhance the efficiency of localization projects. Let's explore further.

The advantages of utilizing a dedicated YAML editor

In the swiftly changing digital world, sticking to manual processes that could be automated is far from the optimal way to work. Moreover, manual editing is prone to mistakes that can be expensive and prolong the workflow. To shed light on the benefits of using tools specifically crafted for editing YAML localization files, we provide some important insights below:

• Making editing accessible to everyone: YAML is known for being a flexible and user-friendly format. Despite its straightforward structure, it might seem daunting to those without a technical background. A dedicated YAML editor makes it easier for every team member to contribute without difficulties.

• Reducing the likelihood of errors: Editing YAML files manually can lead to various issues, such as syntax errors, incorrect indentation, or an invalid file structure. Using a dedicated YAML editor significantly reduces these risks.

• Simplifying search and update tasks: As YAML files become larger, locating and editing specific sections can become more challenging. Dedicated YAML editors simplify this process, enabling users to quickly find and modify text.

• Guaranteeing placeholder syntax accuracy: Dedicated YAML editors can check the syntax of placeholders in localization messages, greatly minimizing the chance of errors.

• Providing additional capabilities: Dedicated YAML editors come with a suite of extra features, such as Machine Translation, Translation Memory, Glossary, Screenshots, and others, that enhance the editing workflow.

Editing YAML files with Localizely

In this section, we'll guide you through a straightforward and efficient method for editing your YAML files using Localizely. By adopting this approach, you'll be able to fully leverage all the previously mentioned benefits.

Upload YAML file for editing

To upload your YAML file, navigate to the Upload page. Simply drag and drop your file into the designated area, then click the 'Upload' button.

Edit YAML file

Navigate to the Translations page to begin editing your YAML file. Update the content in the manner that best suits your needs: manually, via Machine Translation, or by assigning the task to team members or professional translators.

Additionally, you can easily access and update supplementary information related to your YAML file, including descriptions, examples, and related content.

Download edited YAML files

Once you have completed your editing, navigate to the Download page. Here, you can easily download your YAML files with just a single click.

Final thoughts

In this post, we've explained how leveraging a specialized tool like Localizely for editing YAML localization files can transform the editing process, drastically improving both the efficiency and quality of edits. We've also explored the important factors to consider when weighing manual editing against the use of specialized localization tools. Moreover, we've shown how you can effortlessly edit your YAML files with Localizely, highlighting the benefits of this method.

Localizely stands out as a comprehensive localization platform designed to streamline the editing of localization files such as YAML. It boasts an array of valuable features designed to ease software localization tasks. Additionally, Localizely offers a free plan (no credit card required) that is perfectly suited for smaller projects, and it is completely free for open-source projects.

Try Localizely for free today.

JSON (JavaScript Object Notation) is a file format widely used in software localization, mainly because of its flexibility and user-friendly nature when compared to other XML-based file formats. Despite its advantages, manually editing JSON localization files can present a significant challenge, particularly for individuals lacking a technical background. To address these difficulties and elevate the quality of translations, dedicated JSON editors have been created. These tools come equipped with advanced features aimed at streamlining the JSON editing process and boosting localization efficiency. This article delves into the advantages offered by these editors, illustrating how they simplify the task of JSON editing and enhance the overall efficiency of localization. Let's dive in.

The benefits of using a dedicated JSON editor

In today's rapidly evolving digital landscape, manually performing tasks that could be automated is not the most efficient approach to work. Additionally, manual editing can lead to costly mistakes and extend the duration of the work process. To better understand why tools specifically designed for editing JSON localization files are advantageous, we've outlined some key insights below:

• Making editing accessible to everyone: JSON is a flexible and user-friendly file format. Although its structure is not overly complex, it may appear challenging for individuals without a technical background. Using a dedicated JSON editor, all your team members can work without hassle.

• Reducing the likelihood of errors: Manual editing of JSON files can introduce several issues, including incorrect syntax, missing quotation marks, or an invalid file structure. Using a dedicated JSON editor can help you avoid such errors.

• Streamlining search and update functions: As JSON files grow in size, finding and modifying specific text segments can become challenging. User-friendly JSON file editors can assist in this, allowing you to more easily locate and update text.

• Ensuring placeholder syntax accuracy: Dedicated JSON file editors can perform syntax checks on placeholders within localization messages, thereby greatly reducing the risk of potential errors.

• Offering additional features: Dedicated JSON file editors are equipped with a range of additional features, including Machine Translation, Translation Memory, Glossary, Screenshots, and more, that can facilitate the editing process.

Editing JSON files with Localizely

In this section, we'll show you a simple and effective way to edit your JSON files with Localizely. By following this approach, you'll be able to maximize all the benefits mentioned earlier.

If you need to convert your JSON structure from nested to flat or vice versa, Localizely has a free online JSON Flattener tool created for that purpose.

Upload JSON file for editing

To upload your JSON files, navigate to the Upload page. Simply drag and drop your file into the designated area, and click the 'Upload' button.

Edit JSON file

Navigate to the Translations page to start editing your JSON file. Update the content in a way that best suits you: whether manually, through Machine Translation, or by delegating the task to team members or professional translators.

Additionally, you can seamlessly access and update extra information in your JSON files, such as descriptions, examples, and related content.

Download edited JSON files

Once you've finished editing, proceed to the Download page. On this page, you can easily download your JSON files with just one click.

Final thoughts

In this post, we have explained how using a specialized tool like Localizely for editing JSON localization files can revolutionize the editing process, significantly enhancing both the efficiency and quality of such edits. Moreover, we have discussed the crucial aspects that should be considered when comparing manual editing to the utilization of specialized localization tools. Furthermore, we have demonstrated how you can easily edit your JSON files with Localizely, and the advantages this approach offers.

Localizely is a comprehensive localization platform designed to facilitate the editing of localization files, including JSON. It offers a wide range of useful features tailored to simplify software localization tasks. Additionally, Localizely provides a free plan (no credit card required) that is well-suited for smaller projects, and it is completely free for open-source initiatives.

Try Localizely for free today.

Unsure about the best way to efficiently translate YAML files? You are in the right place! This blog post serves as a practical guide, explaining the most common methods for translating YAML files for software localization. Additionally, it highlights the common hurdles faced with manual YAML file translation and explains how specialized tools can make the translation process easier and enhance the translation quality. Shall we get started?

Understanding YAML files

Before we dive into the process of translating YAML files and share some useful tips and best practices, it's essential to first understand what YAML files are and the importance of their translation in developing multilingual applications.

YAML, which stands for YAML Ain't Markup Language, is a file format extensively utilized in various areas of software development. Its uses range from storing project configurations to containing translations necessary for software localization. The practice of keeping translations in special files is well-established, effectively separating the application's text from its code. This approach, adopted since the early days of computing, facilitates easier maintenance and future modifications within the application. Moreover, it streamlines the process of adding new languages to an application, requiring only the translation of necessary texts into a new language and making minimal code adjustments.

The YAML file format is quite flexible. However, a common method for storing translations in YAML files involves using a nested structure where related messages are grouped together.

Learn more about Ruby on Rails YAML file.

Different approaches for translating YAML files

When it comes to translating YAML files, two approaches are commonly used. The first approach involves using a basic text editor like Notepad, Notepad++, or TextEdit. These tools are widely utilized for working with text-based files, and you might already be familiar with them. The second approach is to use specialized tools specifically designed for translating YAML files.

Here's a closer look at how these approaches differ:

Using a basic text editor allows for the flexibility to edit various types of files with a single tool. However, these editors do not offer advanced features that are specifically designed for translating YAML files in software localization. To translate successfully using this method, you need a solid understanding of YAML files, including knowing which parts to translate and ensuring no errors are introduced.

On the other hand, specialized translation tools are designed specifically for translating YAML files. They guide you through the sections that need translation, minimizing the risk of overlooking important parts or introducing errors. These tools are equipped with additional helpful features, such as the ability to view screenshots, reuse previous translations, manage glossary terms, and facilitate collaboration within a team by allowing comments, sharing ideas, and gaining a deeper understanding of the context. Choosing these specialized tools can streamline the translation process, making it faster, easier, and generally improving the quality of your translations.

Common mistakes in YAML file translation

This section delves into the typical challenges encountered in the manual translation of YAML files for software localization purposes:

• Invalid file syntax: YAML files might be too complex for people not familiar with technical details. Common pitfalls include improper indentation, syntax errors, and inaccuracies in the formatting of keys or values.
• Invalid placeholders: Improper translation of placeholders can result in application errors. It is crucial to differentiate between text that needs translation and text that should remain unchanged.
• Improper handling of plural forms: Each language has its own set of rules for pluralization. Employing the wrong plural forms can cause inaccuracies in the application.

Utilizing specialized tools for translating YAML files can significantly reduce the common issues highlighted above. These tools not only facilitate the automatic creation of these files after translation but also assist in minimizing the associated risks. Adopting such tools embodies a proactive strategy for ensuring a flawless translation process.

Automating the translation of YAML files

By automating certain processes in translating YAML files, you can significantly boost efficiency, a critical aspect in today's fast-moving technological world. This section delves into strategies that can allow you to accelerate and streamline the translation process by utilizing advanced localization tools.

Streamlining translation tasks through collaboration

Localization platforms greatly enhance teamwork. They enable you to add team members like managers, developers, and translators, and give them specific translation tasks. This way, you can concentrate on other crucial parts of your project while your team works more efficiently. Additionally, these tools significantly reduce the common mistakes associated with manual translation, thereby accelerating the development process.

An example of an assigned translation task in Localizely is provided below.

Enhancing efficiency with Machine Translation

A wide array of localization tools is equipped with a Machine Translation feature, capable of translating YAML files in mere seconds. Beginning with Machine Translation and following up with a post-review can significantly speed up the process of translating your YAML files.

An example of Machine Translation usage in Localizely is shown below.

Opting for professional translation services

If you're considering delegating translation tasks to professionals, you can opt for professional translation services. This approach allows you to specify the texts, target languages, and desired tone (such as formal or casual). Subsequently, skilled translators will complete the work within a predetermined timeframe.

An example of placing a translation order on Localizely is illustrated below.

By automating certain processes involved in the translation of YAML files, you can significantly reduce the time spent on these activities. Specialized translation tools can also help you organize and monitor the translation process more effectively. This will not only boost efficiency but also elevate the quality of translations, encourage teamwork, and avoid the typical errors encountered in manual translation of YAML files.

Selecting the right YAML translator tool for your project

Finding the best YAML translator for your project can be challenging. The decision often hinges on your project requirements, team size, workflow, and other similar factors. As a general rule, if you’re working independently, have a good grasp of YAML, and only need to make occasional corrections or update a few translations, a basic text editor will likely meet your needs. On the other hand, if your project demands advanced capabilities from your YAML translator tool, such as integrated machine translation, translation memory, glossaries, collaborative features, maintenance of consistency and organization across multiple languages, a specialized YAML translator is the better option.

Conclusion

In this post, we've provided a concise overview of how to translate YAML files, showing two common approaches for achieving this. We've also highlighted the common hurdles faced during manual translation and shared effective strategies to enhance translation efficiency through the use of specialized localization tools.

Localizely is a reliable localization platform, specifically designed to simplify the translation of YAML files. Equipped with a variety of useful features, it streamlines the software localization process. Additionally, Localizely offers a free plan that doesn’t require a credit card, making it an excellent choice for smaller projects. Furthermore, it is completely free for open-source projects.

Try Localizely for free today.

Feeling confused about how to effectively translate JSON files? You've arrived at the right place! This blog post aims to illuminate the most common methods of translating JSON files in software localization. Additionally, it explains the typical pitfalls encountered when translating JSON files manually, the tools that can assist in overcoming these hurdles, and how to significantly enhance the quality of your translations, among much more. So, let's dive in!

Understanding JSON files

Before we delve into how to translate JSON files, along with sharing some helpful tips and best practices, it's crucial to first understand what JSON files are and why their translation plays a vital role in creating multilingual applications.

JSON (JavaScript Object Notation) is a file format widely used across various fields in software development. Its applications range from holding configurations in projects, exchanging data between applications and servers, to persisting data in databases, among others. Moreover, this file format is also widely utilized in software localization to store translations. This separation between the app's text and the app's code is quite established and proves to be very handy, as it allows easier maintenance and future changes within the app. Furthermore, it simplifies the addition of new languages later on, requiring only minimal adjustments to the code.

The JSON file format is pretty flexible, and how translations are stored heavily depends on the localization library that is used. Two structures are primarily utilized for storing translations in JSON: flat and nested.

Learn more about Flat JSON file format.

Converting between these two JSON structures can be done easily. If you're looking to perform such a conversion, a JSON Flattener tool may be of help.

Different approaches for translating JSON files

When it comes to translating JSON files, there are two common methods you can choose from. The first method involves using a simple text editor, such as Notepad, Notepad++, or TextEdit. These are common tools for editing text-based files that you might already be familiar with. The second method is to use specialized tools designed specifically for translating JSON files used in software localization.

Here's a breakdown of how these methods differ:

Using a basic text editor offers flexibility since you can edit various types of files with one tool. However, these editors lack advanced features tailored for translating JSON files used in software localization. This means you need a good understanding of JSON files to translate them accurately. You need to know which parts of the file should be translated and be cautious not to introduce any errors.

Conversely, specialized translation tools are specifically created for this purpose. They help direct you to the sections of the file that need translation, reducing the chances of overlooking something or making mistakes. These tools also provide useful features such as the ability to view screenshots, reuse past translations, manage glossary terms, and even support teamwork by allowing you to comment, share ideas, understand context better, and more. Using these tools can make the translation process quicker, simpler, and even increase the quality of translations.

Common mistakes in JSON file translation

This section explores common challenges encountered during the manual translation of JSON files in software localization:

• Invalid file syntax: JSON files used in software localization can pose difficulties, particularly for those not versed in technical details. Frequent errors include missing quotes and commas, as well as mistakes in crucial keywords unique to these JSON files.
• Invalid placeholders: Incorrectly translating placeholders can lead to application errors. It is vital to distinguish between text that requires translation and text that must remain unchanged.
• Improper handling of plural forms: Different languages follow different rules for pluralization. Using incorrect plural forms can result in inaccuracies within the application.

Employing specialized tools for translating JSON files can greatly alleviate the common issues mentioned above. These tools not only support the automatic generation of these files upon translation but also help to minimize the associated risks. Leveraging such tools represents a proactive approach to achieving error-free translation.

Automating the translation of JSON files

By automating certain processes involved in translating JSON files, you can significantly enhance efficiency, a critical factor in today's fast-moving technological world. This section explores methods that can allow you to accelerate and streamline the translation process through the adoption of specialized localization tools.

Streamlining translation tasks through collaboration

Localization platforms are fantastic for improving teamwork. They allow you to invite team members, such as managers, developers, and translators, and assign them specific translation tasks. This means you can focus on other important aspects of your project while your team works more efficiently. These tools also reduce the mistakes that are common in manual translation, speeding up the development process.

An example of an assigned translation task in Localizely is provided below.

Enhancing efficiency with Machine Translation

Many localization tools come with a Machine Translation feature, which can translate JSON files in seconds. Starting with Machine Translation and then conducting a review can get your JSON files ready for use much faster.

An example of Machine Translation usage in Localizely is shown below.

Opting for professional translation services

If you're looking for high-quality translations, you can order professional translation services. This option lets you specify the texts, target languages, and the tone you want (like formal or casual). Then, experienced translators will do the work within a set timeframe.

An example of placing a translation order on Localizely is illustrated below.

By automating certain processes related to the translation of JSON files, you can save significant time. The specialized translation tools can help you to organize and monitor the translation process more effectively. This not only increases efficiency but also enhances the quality of translations, fosters collaboration, and reduces the common errors made during the manual translation of JSON files.

Choosing the right JSON translator tool for your project

Selecting the most suitable JSON translator tool for your project can be challenging. The decision often depends on your project requirements, development workflow, team size, and related considerations. As a general rule, if you’re working alone, feel comfortable with the technical aspects of JSON, and only need to make minor edits or update a handful of translations, a basic text editor may be all you need. On the other hand, if you require more advanced capabilities from a JSON translator, such as integrated machine translation, translation memory, glossaries, team collaboration features, and tools to maintain consistency across multiple languages while keeping everything organized and easy to manage, then opting for a specialized JSON translator tool is the better option.

Conclusion

In this post, we've provided a concise overview of how to translate JSON files. We also delved into two widely used methods for accomplishing this task, pointed out the common challenges associated with manual translation, and introduced strategies that can greatly improve translation efficiency with the aid of specialized localization tools.

Localizely stands out as a comprehensive localization platform, specifically designed to facilitate the translation of JSON files. It offers a large set of features, each specifically designed to ease the complexities associated with software localization. Moreover, Localizely offers a free plan that does not require a credit card, making it an excellent option for smaller-scale projects. It is also completely free for open-source projects.

Try Localizely for free today.

Struggling with how to translate RESX files and unsure of the best strategy for this task? You've come to the right place! This post is designed to help you by outlining the most common approaches to translating RESX files. It also shines a light on the common pitfalls of manual translation and offers practical tips to streamline the translation process, making it both more efficient and straightforward. Ready to dive in?

Understanding RESX files

Before we dive into how to translate RESX (.NET Resources) files, and share some helpful tips and best practices, let's first understand what RESX files are and why translating them is crucial when creating apps that support multiple languages.

RESX is a file format utilized in software localization, predominantly within the .NET ecosystem. It is designed to keep the app's text translations separate from its core programming code. This separation facilitates easier maintenance and future changes within the app. Moreover, it streamlines the addition of new languages to the application, requiring only minimal adjustments to the code.

RESX is an XML-based file format that employs a special structure for storing translations. Essentially, it consists of translation blocks, each containing translation text and, optionally, some additional information related to that text.

Learn more about .NET Resources file format.

Different approaches for translating RESX files

Translating RESX files can be approached in two ways. The first way is to use a basic text editor like Notepad, Notepad++, or TextEdit. These are programs you might already use for editing text-based files. The second way is to use specialized tools explicitly developed for the translation of such files.

Here's how these two approaches are different:

Using a regular text editor is flexible because you can open and edit many kinds of files. However, these editors are pretty basic. They don't have special features for translating RESX files, which means you need to know a lot about RESX files to translate them correctly. You have to figure out which parts of the file to translate and be careful not to make mistakes.

On the other hand, specialized tools are built for this task. They guide you to the parts of the file that need translating, so you're less likely to miss anything or make errors. Plus, they come with helpful features like being able to see screenshots, reuse previous translations, manage glossary terms, and even collaborate with other teammates in order to exchange ideas, better understand context, and similar. These tools make translating faster, easier, and more accurate.

Common mistakes in RESX file translation

This section delves into the frequent pitfalls encountered during the translation of RESX files:

• Invalid file syntax: The unique structure of RESX files can be challenging, especially for people who aren't familiar with technical aspects. Common mistakes include omission of closing tags, missing quotes around the tag attribute value, placing tags within each other incorrectly, and making mistakes in essential keywords that are specific to RESX files.
• Invalid placeholders: Incorrectly translating placeholders may cause application errors. It's crucial to differentiate between text that needs translation and text that should remain unchanged.
• Handling plural forms incorrectly: Different languages have different rules for pluralization. Applying the wrong plural forms can lead to inaccuracies within the app.

Adopting specialized tools for translating RESX files can significantly reduce the common errors described above. These tools not only facilitate the generation of these files but also minimize the mentioned risks. Utilizing such tools is a proactive step towards error-free translation.

Automating the translation of RESX files

Automating certain processes in the translation of RESX files can significantly boost efficiency, a crucial factor in today's rapidly evolving technological landscape. Here, we will explore strategies to help us streamline and automate the translation process through the use of specialized localization tools.

Streamlining translation tasks through collaboration

Localization platforms enhance project collaboration, allowing for the creation of a localization project, the invitation of team members (including managers, developers, and translators), and the assignment of translation tasks. This approach enables you to concentrate on other critical aspects of your product while translators work efficiently. Moreover, these tools help prevent common errors associated with manual translation, thus accelerating the development cycle.

An example of an assigned translation task in Localizely is provided below.

Enhancing efficiency with Machine Translation

Most localization tools offer Machine Translation, enabling the rapid translation of RESX files, often within seconds. Utilizing Machine Translation followed by a post-translation review ensures RESX files are quickly prepared and ready for use.

An example of Machine Translation usage in Localizely is shown below.

Opting for professional translation services

For those seeking professional translation services, placing translation orders is an excellent option. This method allows for ordering translations for selected texts, target languages, and preferred tones (e.g., formal or friendly). Skilled professionals can then complete these translations within a predetermined timeline.

An example of placing a translation order on Localizely is illustrated below.

The methods mentioned above allow us to automate certain processes in the translation of RESX files, saving valuable time. By using a specialized translation tool, we can better organize the translation process, making it easier to manage and track. This will not only boost efficiency but also improve the quality of translation work, encourage teamwork, and help to prevent the common errors associated with manual translation of RESX files.

Selecting the right RESX translator tool for your project

Identifying the most suitable RESX translator for your needs isn’t always simple. The right choice depends on factors such as your project requirements, development workflow, the size of your team, and related considerations. As a general rule, if you’re working alone, comfortable handling RESX files directly, and only need to make occasional corrections or updates to some translations, a simple text editor will typically suffice. On the other hand, if your project demands more advanced capabilities, like integrated machine translation, translation memory, a glossary, support for team collaboration, and tools to maintain consistency across multiple languages while keeping all translations organized and easy to manage, a specialized RESX translator tool is the better option.

Conclusion

In this post, we've provided a concise overview of how to translate RESX files. Additionally, we explored two prevalent methods for this task, highlighted the common pitfalls associated with manual translation, and presented techniques that significantly enhance translation efficiency through the use of specialized localization tools.

Localizely stands out as a comprehensive localization platform designed to streamline the translation of RESX files. It offers a wide array of features specifically tailored to simplify the tasks involved in software localization. Furthermore, Localizely provides a free plan that does not require a credit card, making it an excellent choice for smaller-scale projects. It is also completely free for open-source projects.

Try Localizely for free today.

Reaching a global audience with your web application necessitates support for multiple languages. Fortunately, adding multilingual support is typically straightforward and offers numerous benefits, such as increased user engagement and enhanced accessibility. In this post, we'll delve into internationalizing (i18n) React web applications using the React Intl library, focusing on crucial aspects like message localization, formatting, language selection, and more.

The latest React documentation appears to favor the use of React-based frameworks such as Next.js, Remix, and Gatsby, when starting with React. However, in this post, our focus will be on the internationalization (i18n) of plain React applications developed using Vite and Create React App. For those interested in delving into internationalization within Next.js projects, we have a dedicated post on that topic.

Vite

All code samples used in this section are available on the GitHub repo.See an online demo.

Create a new React project

Beginning with the creation of a new React project seems like the natural first step. In this guide, we'll use Vite, a build tool that has quickly become popular within the JavaScript community for its efficiency and speed.

To create a new project, run the following command:

npm create vite@latest -- --template react

Since this command operates in interactive mode, enter react-intl-example when prompted for the project name.

Executing the command above for the first time will require installing Vite as a prerequisite for project creation.

Add the React Intl dependency

React Intl is part of Format.JS, a suite of JavaScript libraries designed for internationalization and formatting. This well-documented and maintained library supports the ICU Message syntax, offers a wide range of formatting options, and is compatible with major browsers.

To incorporate the React Intl library into your project, you need to add it as a dependency.

cd react-intl-example
npm i react-intl

Create localization files

The next step is to create the localization files for the required locales. It is good practice to keep all localization files in one place (e.g., src/lang). In this example, we will add three JSON files under the lang directory: ar.json, en.json, and es-MX.json. These files are going to hold translations for the Arabic, English, and Mexican Spanish languages, respectively.

Below, you can see how the project structure should look after you have added these files.

react-intl-example
|-- public
|-- src
|   |-- assets
|   |-- lang
|       |-- ar.json
|       |-- en.json
|       |-- es-MX.json
|   |-- App.jsx
|   |-- main.jsx
|   |-- ...
|-- ...
|-- package.json
|-- package-lock.json

As we will be using localization messages later, let's populate the files we've added with some data.

The ar.json file:

{
  "message.simple": "رسالة بسيطة.",
  "message.argument": "مرحبًا {name}! 👋",
  "message.plural": "{count, plural, zero {لا توجد عناصر} one {# بند} two {# بنود} few {# عناصر} many {# بندا} other {# قطعة}}",
  "message.select": "{gender, select, male {السيد} female {السيدة} other {المستعمل}}",
  "message.text-format": "مرحبًا <b>John</b>!",
  "message.number-format": "عدد مهيأ: {num, number, ::K}",
  "message.currency-format": "عملة منسقة: {amount, number, ::currency/USD}"
}

The en.json file:

{
  "message.simple": "A simple message.",
  "message.argument": "Hi, {name}! 👋",
  "message.plural": "{count, plural, one {# item} other {# items}}",
  "message.select": "{gender, select, male {Mr} female {Mrs} other {User}}",
  "message.text-format": "Hi, <b>John</b>!",
  "message.number-format": "Formatted number: {num, number, ::K}",
  "message.currency-format": "Formatted currency: {amount, number, ::currency/USD}"
}

The es-MX.json file:

{
  "message.simple": "Un mensaje sencillo.",
  "message.argument": "¡Hola, {name}! 👋",
  "message.plural": "{count, plural, one {# articulo} other {# artículos}}",
  "message.select": "{gender, select, male {Sr.} female {Sra.} other {Usuario}}",
  "message.text-format": "¡Hola, <b>John</b>!",
  "message.number-format": "Número formateado: {num, number, ::K}",
  "message.currency-format": "Moneda formateada: {amount, number, ::currency/USD}"
}

Adapt the main app file

While we have completed most of the necessary tasks, there is still a need to modify the main app file to support internationalization. To achieve this, our next step involves updating the App.jsx file. More concretely, this means wrapping the entire app with the IntlProvider, which will enable us to use localization features across all app subcomponents. Furthermore, we will incorporate a feature to detect the user's preferred language and optimize performance by loading only the necessary translations. Lastly, we will add a language switcher and configure the appropriate text direction settings.

Wrap the app with the IntlProvider

The react-intl library uses the provider pattern to pass the needed configuration through the tree of descendant nodes. This approach ensures that throughout the entire app, we can use localized messages and proper formatting. As you can see in the following example, the top-level app component is wrapped with the IntlProvider from react-intl. There, we pass two props to the IntlProvider, locale and messages. As their names suggest, the locale prop specifies the selected locale within the app, and the messages prop contains the messages corresponding to that locale.

The App.jsx file:

import React from "react";
import { IntlProvider } from "react-intl";
import messages from "./lang/en.json";

let locale = "en";

function LocalizationWrapper() {
  return (
    <IntlProvider locale={locale} messages={messages}>
      <App />
    </IntlProvider>
  );
}
export default LocalizationWrapper;

function App(props) {
  return <div>My App</div>;
}

Detect user's preferred language

By detecting the user’s preferred language (the language of the browser), we are going to set the initial locale of the app. If the user’s preferred language is not supported, the app will default to English. The locale resolution logic presented here is basic. In practice, a more comprehensive check would likely be implemented, possibly including region control as well.

The App.jsx file:

import React from "react";
import { IntlProvider } from "react-intl";
import messagesAr from "./lang/ar.json";
import messagesEn from "./lang/en.json";
import messagesEsMx from "./lang/es-MX.json";

let initLocale = "en";
if (navigator.language === "es-MX") {
  initLocale = "es-MX";
} else if (navigator.language === "ar") {
  initLocale = "ar";
}

function loadMessages(locale) {
  switch (locale) {
    case "ar":
      return messagesAr;
    case "en":
      return messagesEn;
    case "es-MX":
      return messagesEsMx;
    default:
      return messagesEn;
  }
}

function LocalizationWrapper() {
  return (
    <IntlProvider locale={initLocale} messages={loadMessages(initLocale)}>
      <App />
    </IntlProvider>
  );
}
export default LocalizationWrapper;

function App(props) { ... }

Load translations dynamically

Using dynamic imports, we load localization messages only when they are needed. Moreover, this approach improves app performance since only the necessary data is loaded. The example below contains a slightly updated loadMessages function, which returns localization messages as a Promise for the specified locale.

The App.jsx file:

import React, { useState, useEffect } from "react";
import { IntlProvider } from "react-intl";

let initLocale = "en";
if (navigator.language === "es-MX") {
  initLocale = "es-MX";
} else if (navigator.language === "ar") {
  initLocale = "ar";
}

function loadMessages(locale) {
  switch (locale) {
    case "ar":
      return import("./lang/ar.json");
    case "en":
      return import("./lang/en.json");
    case "es-MX":
      return import("./lang/es-MX.json");
    default:
      return import("./lang/en.json");
  }
}

function LocalizationWrapper() {
  const [locale, setLocale] = useState(initLocale);
  const [messages, setMessages] = useState(null);

  useEffect(() => {
    loadMessages(locale).then((data) => setMessages(data.default));
  }, [locale]);

  return messages ? (
    <IntlProvider locale={locale} messages={messages}>
      <App />
    </IntlProvider>
  ) : null;
}
export default LocalizationWrapper;

function App(props) { ... }

Set text direction

Since one of the added languages, Arabic, uses a non-default text direction (RTL), explicit handling of this is needed. For that reason, we will add the getDirection function, which will return the appropriate direction for the given locale. To demonstrate how this works in practice, we will adjust the dir attribute of the container element within the App component. Note that you can also set the dir attribute on the html element to adjust the content of the entire HTML page. However, for simplicity, we will not address that in this post.

If you need to manage a large number of languages on your website and are unsure about the text direction for each, consider using packages like rtl-detect for assistance.

The App.jsx file:

import React, { useState, useEffect } from "react";
import { IntlProvider } from "react-intl";

let initLocale = "en";
if (navigator.language === "es-MX") {
  initLocale = "es-MX";
} else if (navigator.language === "ar") {
  initLocale = "ar";
}

function loadMessages(locale) {
  switch (locale) {
    case "ar":
      return import("./lang/ar.json");
    case "en":
      return import("./lang/en.json");
    case "es-MX":
      return import("./lang/es-MX.json");
    default:
      return import("./lang/en.json");
  }
}

function getDirection(locale) {
  switch (locale) {
    case "ar":
      return "rtl";
    case "en":
      return "ltr";
    case "es-MX":
      return "ltr";
    default:
      return "ltr";
  }
}

function LocalizationWrapper() {
  const [locale, setLocale] = useState(initLocale);
  const [messages, setMessages] = useState(null);

  useEffect(() => {
    loadMessages(locale).then((data) => setMessages(data.default));
  }, [locale]);

  return messages ? (
    <IntlProvider locale={locale} messages={messages}>
      <App direction={getDirection(locale)} />
    </IntlProvider>
  ) : null;
}
export default LocalizationWrapper;

function App({ direction }) {
  return <div dir={direction}>My App</div>;
}

Add language switcher

While automatically setting the app's initial language based on the browser's settings is effective in most scenarios, offering a manual language selection option is also considered good practice. To achieve this, we will extend the LocalizationWrapper component to include the currently selected locale. This will enable us to update the entire app upon a language change. Additionally, we will add a basic language switcher within the App component and pass the necessary props to it to ensure seamless functionality.

In case you would like to place a language switcher somewhere deeper in a tree of components, you can use React Context to avoid prop drilling.

To enhance user experience, it is advisable to store the selected locale in a cookie or on the server side to ensure the proper language is automatically preselected on the next visit.

The App.jsx file:

import React, { useState, useEffect } from "react";
import { IntlProvider } from "react-intl";

let initLocale = "en";
if (navigator.language === "es-MX") {
  initLocale = "es-MX";
} else if (navigator.language === "ar") {
  initLocale = "ar";
}

function loadMessages(locale) { ... }

function getDirection(locale) { ... }

function LocalizationWrapper() {
  const [locale, setLocale] = useState(initLocale);
  const [messages, setMessages] = useState(null);

  useEffect(() => {
    loadMessages(locale).then((data) => setMessages(data.default));
  }, [locale]);

  return messages ? (
    <IntlProvider locale={locale} messages={messages}>
      <App
        locale={locale}
        direction={getDirection(locale)}
        onLocaleChange={(locale) => setLocale(locale)}
      />
    </IntlProvider>
  ) : null;
}
export default LocalizationWrapper;

function App({ locale, direction, onLocaleChange }) {
  return (
    <div>
      <div style={{ textAlign: "center" }}>
        <select value={locale} onChange={(e) => onLocaleChange(e.target.value)}>
          <option value="en">en</option>
          <option value="es-MX">es-MX</option>
          <option value="ar">ar</option>
        </select>
      </div>

      <div dir={direction}>My App</div>
    </div>
  );
}

Add localization messages

The final step in our app development process is to implement the localization messages we've earlier prepared and observe how our app functions afterward. With the help of the useIntl hook and the Formatted* components from the react-intl library, we can easily access these localization messages. The provided example demonstrates two different methods of access: an imperative and a declarative approach. In this section, we will demonstrate how to use these two methods to access the localization messages, with more details to be provided in the following section.

The App.jsx file:

import React, { useState, useEffect } from "react";
import {
  IntlProvider,
  FormattedMessage,
  FormattedList,
  useIntl,
} from "react-intl";

let initLocale = "en";
if (navigator.language === "es-MX") {
  initLocale = "es-MX";
} else if (navigator.language === "ar") {
  initLocale = "ar";
}

function loadMessages(locale) { ... }

function getDirection(locale) { ... }

function LocalizationWrapper() { ... }
export default LocalizationWrapper;

function App({ locale, direction, onLocaleChange }) {
  const intl = useIntl();

  return (
    <div>
      <div style={{ textAlign: "center" }}>
        <select value={locale} onChange={(e) => onLocaleChange(e.target.value)}>
          <option value="en">en</option>
          <option value="es-MX">es-MX</option>
          <option value="ar">ar</option>
        </select>
      </div>

      <div dir={direction} style={{ padding: 20 }} data-testid="examples">
        <h3>Declarative examples</h3>
        <FormattedMessage id="message.simple" />
        <br />
        <FormattedMessage id="message.argument" values={{ name: "John" }} />
        <br />
        <FormattedMessage id="message.plural" values={{ count: 6 }} />
        <br />
        <FormattedMessage id="message.select" values={{ gender: "female" }} />
        <br />
        <FormattedMessage id="message.text-format" values={{ b: (value) => <b>{value}</b> }} />
        <br />
        <FormattedMessage id="message.number-format" values={{ num: 7500 }} />
        <br />
        <FormattedMessage id="message.currency-format" values={{ amount: 7.5 }} />
        <br />
        <FormattedList type="conjunction" value={["foo", "bar", "baz"]} />

        <h3>Imperative examples</h3>
        {intl.formatMessage({ id: "message.simple" })}
        <br />
        {intl.formatMessage({ id: "message.argument" }, { name: "John" })}
        <br />
        {intl.formatMessage({ id: "message.plural" }, { count: 5 })}
        <br />
        {intl.formatMessage({ id: "message.select" }, { gender: "female" })}
        <br />
        {intl.formatMessage({ id: "message.text-format" }, { b: (value) => <b>{value}</b> })}
        <br />
        {intl.formatMessage({ id: "message.number-format" }, { num: 7500 })}
        <br />
        {intl.formatMessage({ id: "message.currency-format" }, { amount: 7.5 })}
        <br />
        {intl.formatList(["foo", "bar", "baz"], { type: "conjunction" })}
      </div>
    </div>
  );
}

Imperative vs Declarative usage of React Intl

Depending on your needs, you can format a message in either the imperative or the declarative way. In most cases, they should have the same capabilities. Here are some guidelines:

Use the imperative approach for:

• Setting text attributes (e.g., title, aria-label).
• Formatting messages in environments that do not support React components (e.g., Redux store).
• Achieving better performance (e.g., rendering large tables of data).

Use the declarative approach for:

• Seamlessly composing with other React components.
• Supporting rich-text formatting.
• Utilizing advanced features (e.g., formatted relative time that’s updating over time, etc.).

Imperative usage example:

intl.formatMessage({ id: "common.aria-label.confirm" })

Declarative usage example:

<FormattedMessage id="page.home.greeting" />

React Intl formatting options

Below are some examples of the most common formatting options.

Simple message example:

// "message.simple": "A simple message."
intl.formatMessage({ id: "message.simple" })
<FormattedMessage id="message.simple" />

Argument message example:

// "message.argument": "Hi, {name}! 👋"
intl.formatMessage({ id: "message.argument" }, { name: "John" })
<FormattedMessage id="message.argument" values={{ name: "John" }} />

Plural message example:

// "message.plural": "{count, plural, one {# item} other {# items}}"
intl.formatMessage({ id: "message.plural" }, { count: 5 })
<FormattedMessage id="message.plural" values={{ count: 5 }} />

Select message example:

// "message.select": "{gender, select, male {Mr} female {Mrs} other {User}}"
intl.formatMessage({ id: "message.select" }, { gender: "female" })
<FormattedMessage id="message.select" values={{ gender: "female" }} />

Text formatting example:

// "message.text-format": "Hi, <b>John</b>!"
intl.formatMessage({ id: "message.text-format" }, { b: (value) => <b>{value}</b> })
<FormattedMessage id="message.text-format" values={{ b: (value) => <b>{value}</b> }} />

Currency formatting example:

intl.formatNumber(7.5, { style: "currency", currency: "USD" })
<FormattedNumber value={7.5} style="currency" currency="USD" />

Date formatting example:

intl.formatDate(Date.now(), { year: "numeric", month: "long", day: "2-digit" })
<FormattedDate value={Date.now()} year="numeric" month="long" day="2-digit" />

Time formatting example:

<FormattedTime value={Date.now()} />
{intl.formatTime(Date.now())}

Relative time formatting example:

intl.formatRelativeTime(-5, "second", { style: "narrow" })
<FormattedRelativeTime value={0} numeric="auto" updateIntervalInSeconds={1} />

Message extraction

While it is beneficial to start with internationalization from the very beginning of app development, it is not always feasible. Various factors, such as shifting priorities, divergent planning, and user requirements, contribute to this. It's important to note, however, that extracting localization messages for React Intl is feasible using the @formatjs/cli package. Although this is a separate topic, being aware of it is beneficial. Generally, the process involves declaring messages in your React app, then using @formatjs/cli to extract these declared messages, translating them into other languages, and finally, integrating everything back together.

Conclusion

In this post, we explain how to internationalize React applications using the React Intl library. We delve into the two predominant methods for developing plain React applications, using Vite and Create React App tools. Additionally, we explain how to adapt your React project for internationalization, organize your localization files, load translations dynamically, detect the user's preferred language, and much more.

However, adapting your app for multiple languages involves not just technical adjustments but also the translation of all localization messages. This can complicate your development workflow. Fortunately, the Localizely platform streamlines software localization. It simplifies collaboration among developers, translators, designers, and project managers, offering features like machine translation, translation memory, glossary, AWS S3 integration for over-the-air updates, among other features. It offers a free plan (no credit card needed) suitable for smaller projects and is completely free for open-source projects.

Try Localizely.

Create React App

All code samples used in this section are available on the GitHub repo.See an online demo.

Create a new React project

Beginning with the creation of a new React project seems like the natural first step. In this guide, we'll use Create React App, a tool that has long been the go-to for most developers to scaffold React projects.

To create a new project, run the following command:

npx create-react-app react-intl-example

Add the React Intl dependency

React Intl is part of Format.JS, a suite of JavaScript libraries designed for internationalization and formatting. This well-documented and maintained library supports the ICU Message syntax, offers a wide range of formatting options, and is compatible with major browsers.

To incorporate the React Intl library into your project, you need to add it as a dependency.

cd react-intl-example
npm i react-intl

If installing the react-intl fails, remove package-lock.json and node_modules and try again.

Create localization files

The next step is to create the localization files for the required locales. It is good practice to keep all localization files in one place (e.g., src/lang). In this example, we will add three JSON files under the lang directory: ar.json, en.json, and es-MX.json. These files are going to hold translations for the Arabic, English, and Mexican Spanish languages, respectively.

Below, you can see how the project structure should look after you have added these files.

react-intl-example
|-- src
|   |-- lang
|       |-- ar.json
|       |-- en.json
|       |-- es-MX.json
|   |-- App.js
|   |-- App.test.js
|   |-- index.js
|   |-- ...
|-- ...
|-- package.json
|-- package-lock.json

As we will be using localization messages later, let's populate the files we've added with some data.

The ar.json file:

{
  "message.simple": "رسالة بسيطة.",
  "message.argument": "مرحبًا {name}! 👋",
  "message.plural": "{count, plural, zero {لا توجد عناصر} one {# بند} two {# بنود} few {# عناصر} many {# بندا} other {# قطعة}}",
  "message.select": "{gender, select, male {السيد} female {السيدة} other {المستعمل}}",
  "message.text-format": "مرحبًا <b>John</b>!",
  "message.number-format": "عدد مهيأ: {num, number, ::K}",
  "message.currency-format": "عملة منسقة: {amount, number, ::currency/USD}"
}

The en.json file:

{
  "message.simple": "A simple message.",
  "message.argument": "Hi, {name}! 👋",
  "message.plural": "{count, plural, one {# item} other {# items}}",
  "message.select": "{gender, select, male {Mr} female {Mrs} other {User}}",
  "message.text-format": "Hi, <b>John</b>!",
  "message.number-format": "Formatted number: {num, number, ::K}",
  "message.currency-format": "Formatted currency: {amount, number, ::currency/USD}"
}

The es-MX.json file:

{
  "message.simple": "Un mensaje sencillo.",
  "message.argument": "¡Hola, {name}! 👋",
  "message.plural": "{count, plural, one {# articulo} other {# artículos}}",
  "message.select": "{gender, select, male {Sr.} female {Sra.} other {Usuario}}",
  "message.text-format": "¡Hola, <b>John</b>!",
  "message.number-format": "Número formateado: {num, number, ::K}",
  "message.currency-format": "Moneda formateada: {amount, number, ::currency/USD}"
}

Adapt the main app file

While we have completed most of the necessary tasks, there is still a need to modify the main app file to support internationalization. To achieve this, our next step involves updating the App.jsx file. More concretely, this means wrapping the entire app with the IntlProvider, which will enable us to use localization features across all app subcomponents. Furthermore, we will incorporate a feature to detect the user's preferred language and optimize performance by loading only the necessary translations. Lastly, we will add a language switcher and configure the appropriate text direction settings.

Wrap the app with the IntlProvider

The react-intl library uses the provider pattern to pass the needed configuration through the tree of descendant nodes. This approach ensures that throughout the entire app, we can use localized messages and proper formatting. As you can see in the following example, the top-level app component is wrapped with the IntlProvider from react-intl. There, we pass two props to the IntlProvider, locale and messages. As their names suggest, the locale prop specifies the selected locale within the app, and the messages prop contains the messages corresponding to that locale.

The App.js file:

import React from "react";
import { IntlProvider } from "react-intl";
import messages from "./lang/en.json";

let locale = "en";

function LocalizationWrapper() {
  return (
    <IntlProvider locale={locale} messages={messages}>
      <App />
    </IntlProvider>
  );
}
export default LocalizationWrapper;

function App(props) {
  return <div>My App</div>;
}

Detect user's preferred language

By detecting the user’s preferred language (the language of the browser), we are going to set the initial locale of the app. If the user’s preferred language is not supported, the app will default to English. The locale resolution logic presented here is basic. In practice, a more comprehensive check would likely be implemented, possibly including region control as well.

The App.js file:

import React from "react";
import { IntlProvider } from "react-intl";
import messagesAr from "./lang/ar.json";
import messagesEn from "./lang/en.json";
import messagesEsMx from "./lang/es-MX.json";

let initLocale = "en";
if (navigator.language === "es-MX") {
  initLocale = "es-MX";
} else if (navigator.language === "ar") {
  initLocale = "ar";
}

function loadMessages(locale) {
  switch (locale) {
    case "ar":
      return messagesAr;
    case "en":
      return messagesEn;
    case "es-MX":
      return messagesEsMx;
    default:
      return messagesEn;
  }
}

function LocalizationWrapper() {
  return (
    <IntlProvider locale={initLocale} messages={loadMessages(initLocale)}>
      <App />
    </IntlProvider>
  );
}
export default LocalizationWrapper;

function App(props) { ... }

Load translations dynamically

Using dynamic imports, we load localization messages only when they are needed. Moreover, this approach improves app performance since only the necessary data is loaded. The example below contains a slightly updated loadMessages function, which returns localization messages as a Promise for the specified locale.

The App.js file:

import React, { useState, useEffect } from "react";
import { IntlProvider } from "react-intl";

let initLocale = "en";
if (navigator.language === "es-MX") {
  initLocale = "es-MX";
} else if (navigator.language === "ar") {
  initLocale = "ar";
}

function loadMessages(locale) {
  switch (locale) {
    case "ar":
      return import("./lang/ar.json");
    case "en":
      return import("./lang/en.json");
    case "es-MX":
      return import("./lang/es-MX.json");
    default:
      return import("./lang/en.json");
  }
}

function LocalizationWrapper() {
  const [locale, setLocale] = useState(initLocale);
  const [messages, setMessages] = useState(null);

  useEffect(() => { 
    loadMessages(locale).then(setMessages);
  }, [locale]);

  return messages ? (
    <IntlProvider locale={locale} messages={messages}>
      <App />
    </IntlProvider>
  ) : null;
}
export default LocalizationWrapper;

function App(props) { ... }

Set text direction

Since one of the added languages, Arabic, uses a non-default text direction (RTL), explicit handling of this is needed. For that reason, we will add the getDirection function, which will return the appropriate direction for the given locale. To demonstrate how this works in practice, we will adjust the dir attribute of the container element within the App component. Note that you can also set the dir attribute on the html element to adjust the content of the entire HTML page. However, for simplicity, we will not address that in this post.

If you need to manage a large number of languages on your website and are unsure about the text direction for each, consider using packages like rtl-detect for assistance.

The App.js file:

import React, { useState, useEffect } from "react";
import { IntlProvider } from "react-intl";

let initLocale = "en";
if (navigator.language === "es-MX") {
  initLocale = "es-MX";
} else if (navigator.language === "ar") {
  initLocale = "ar";
}

function loadMessages(locale) {
  switch (locale) {
    case "ar":
      return import("./lang/ar.json");
    case "en":
      return import("./lang/en.json");
    case "es-MX":
      return import("./lang/es-MX.json");
    default:
      return import("./lang/en.json");
  }
}

function getDirection(locale) {
  switch (locale) {
    case "ar":
      return "rtl";
    case "en":
      return "ltr";
    case "es-MX":
      return "ltr";
    default:
      return "ltr";
  }
}

function LocalizationWrapper() {
  const [locale, setLocale] = useState(initLocale);
  const [messages, setMessages] = useState(null);

  useEffect(() => { 
    loadMessages(locale).then(setMessages);
  }, [locale]);

  return messages ? (
    <IntlProvider locale={locale} messages={messages}>
      <App direction={getDirection(locale)} />
    </IntlProvider>
  ) : null;
}
export default LocalizationWrapper;

function App({ direction }) {
  return <div dir={direction}>My App</div>;
}

Add language switcher

While automatically setting the app's initial language based on the browser's settings is effective in most scenarios, offering a manual language selection option is also considered good practice. To achieve this, we will extend the LocalizationWrapper component to include the currently selected locale. This will enable us to update the entire app upon a language change. Additionally, we will add a basic language switcher within the App component and pass the necessary props to it to ensure seamless functionality.

In case you would like to place a language switcher somewhere deeper in a tree of components, you can use React Context to avoid prop drilling.

To enhance user experience, it is advisable to store the selected locale in a cookie or on the server side to ensure the proper language is automatically preselected on the next visit.

The App.js file:

import React, { useState, useEffect } from "react";
import { IntlProvider } from "react-intl";

let initLocale = "en";
if (navigator.language === "es-MX") {
  initLocale = "es-MX";
} else if (navigator.language === "ar") {
  initLocale = "ar";
}

function loadMessages(locale) { ... }

function getDirection(locale) { ... }

function LocalizationWrapper() {
  const [locale, setLocale] = useState(initLocale);
  const [messages, setMessages] = useState(null);

  useEffect(() => {
    loadMessages(locale).then(setMessages);
  }, [locale]);

  return messages ? (
    <IntlProvider locale={locale} messages={messages}>
      <App
        locale={locale}
        direction={getDirection(locale)}
        onLocaleChange={(locale) => setLocale(locale)}
      />
    </IntlProvider>
  ) : null;
}
export default LocalizationWrapper;

function App({ locale, direction, onLocaleChange }) {
  return (
    <div>
      <div style={{ textAlign: "center" }}>
        <select value={locale} onChange={(e) => onLocaleChange(e.target.value)}>
          <option value="en">en</option>
          <option value="es-MX">es-MX</option>
          <option value="ar">ar</option>
        </select>
      </div>

      <div dir={direction}>My App</div>
    </div>
  );
}

Add localization messages

The final step in our app development process is to implement the localization messages we've earlier prepared and observe how our app functions afterward. With the help of the useIntl hook and the Formatted* components from the react-intl library, we can easily access these localization messages. The provided example demonstrates two different methods of access: an imperative and a declarative approach. In this section, we will demonstrate how to use these two methods to access the localization messages, with more details to be provided in the following section.

The App.js file:

import React, { useState, useEffect } from "react";
import {
  IntlProvider,
  FormattedMessage,
  FormattedList,
  useIntl,
} from "react-intl";

let initLocale = "en";
if (navigator.language === "es-MX") {
  initLocale = "es-MX";
} else if (navigator.language === "ar") {
  initLocale = "ar";
}

function loadMessages(locale) { ... }

function getDirection(locale) { ... }

function LocalizationWrapper() { ... }
export default LocalizationWrapper;

function App({ locale, direction, onLocaleChange }) {
  const intl = useIntl();

  return (
    <div>
      <div style={{ textAlign: "center" }}>
        <select value={locale} onChange={(e) => onLocaleChange(e.target.value)}>
          <option value="en">en</option>
          <option value="es-MX">es-MX</option>
          <option value="ar">ar</option>
        </select>
      </div>

      <div dir={direction} style={{ padding: 20 }} data-testid="examples">
        <h3>Declarative examples</h3>
        <FormattedMessage id="message.simple" />
        <br />
        <FormattedMessage id="message.argument" values={{ name: "John" }} />
        <br />
        <FormattedMessage id="message.plural" values={{ count: 6 }} />
        <br />
        <FormattedMessage id="message.select" values={{ gender: "female" }} />
        <br />
        <FormattedMessage id="message.text-format" values={{ b: (value) => <b>{value}</b> }} />
        <br />
        <FormattedMessage id="message.number-format" values={{ num: 7500 }} />
        <br />
        <FormattedMessage id="message.currency-format" values={{ amount: 7.5 }} />
        <br />
        <FormattedList type="conjunction" value={["foo", "bar", "baz"]} />

        <h3>Imperative examples</h3>
        {intl.formatMessage({ id: "message.simple" })}
        <br />
        {intl.formatMessage({ id: "message.argument" }, { name: "John" })}
        <br />
        {intl.formatMessage({ id: "message.plural" }, { count: 5 })}
        <br />
        {intl.formatMessage({ id: "message.select" }, { gender: "female" })}
        <br />
        {intl.formatMessage({ id: "message.text-format" }, { b: (value) => <b>{value}</b> })}
        <br />
        {intl.formatMessage({ id: "message.number-format" }, { num: 7500 })}
        <br />
        {intl.formatMessage({ id: "message.currency-format" }, { amount: 7.5 })}
        <br />
        {intl.formatList(["foo", "bar", "baz"], { type: "conjunction" })}
      </div>
    </div>
  );
}

Imperative vs Declarative usage of React Intl

Depending on your needs, you can format a message in either the imperative or the declarative way. In most cases, they should have the same capabilities. Here are some guidelines:

Use the imperative approach for:

• Setting text attributes (e.g., title, aria-label).
• Formatting messages in environments that do not support React components (e.g., Redux store).
• Achieving better performance (e.g., rendering large tables of data).

Use the declarative approach for:

• Seamlessly composing with other React components.
• Supporting rich-text formatting.
• Utilizing advanced features (e.g., formatted relative time that’s updating over time, etc.).

Imperative usage example:

intl.formatMessage({ id: "common.aria-label.confirm" })

Declarative usage example:

<FormattedMessage id="page.home.greeting" />

React Intl formatting options

Below are some examples of the most common formatting options.

Simple message example:

// "message.simple": "A simple message."
intl.formatMessage({ id: "message.simple" })
<FormattedMessage id="message.simple" />

Argument message example:

// "message.argument": "Hi, {name}! 👋"
intl.formatMessage({ id: "message.argument" }, { name: "John" })
<FormattedMessage id="message.argument" values={{ name: "John" }} />

Plural message example:

// "message.plural": "{count, plural, one {# item} other {# items}}"
intl.formatMessage({ id: "message.plural" }, { count: 5 })
<FormattedMessage id="message.plural" values={{ count: 5 }} />

Select message example:

// "message.select": "{gender, select, male {Mr} female {Mrs} other {User}}"
intl.formatMessage({ id: "message.select" }, { gender: "female" })
<FormattedMessage id="message.select" values={{ gender: "female" }} />

Text formatting example:

// "message.text-format": "Hi, <b>John</b>!"
intl.formatMessage({ id: "message.text-format" }, { b: (value) => <b>{value}</b> })
<FormattedMessage id="message.text-format" values={{ b: (value) => <b>{value}</b> }} />

Currency formatting example:

intl.formatNumber(7.5, { style: "currency", currency: "USD" })
<FormattedNumber value={7.5} style="currency" currency="USD" />

Date formatting example:

intl.formatDate(Date.now(), { year: "numeric", month: "long", day: "2-digit" })
<FormattedDate value={Date.now()} year="numeric" month="long" day="2-digit" />

Time formatting example:

<FormattedTime value={Date.now()} />
{intl.formatTime(Date.now())}

Relative time formatting example:

intl.formatRelativeTime(-5, "second", { style: "narrow" })
<FormattedRelativeTime value={0} numeric="auto" updateIntervalInSeconds={1} />

Message extraction

While it is beneficial to start with internationalization from the very beginning of app development, it is not always feasible. Various factors, such as shifting priorities, divergent planning, and user requirements, contribute to this. It's important to note, however, that extracting localization messages for React Intl is feasible using the @formatjs/cli package. Although this is a separate topic, being aware of it is beneficial. Generally, the process involves declaring messages in your React app, then using @formatjs/cli to extract these declared messages, translating them into other languages, and finally, integrating everything back together.

Conclusion

In this post, we explain how to internationalize React applications using the React Intl library. We delve into the two predominant methods for developing plain React applications, using Vite and Create React App tools. Additionally, we explain how to adapt your React project for internationalization, organize your localization files, load translations dynamically, detect the user's preferred language, and much more.

However, adapting your app for multiple languages involves not just technical adjustments but also the translation of all localization messages. This can complicate your development workflow. Fortunately, the Localizely platform streamlines software localization. It simplifies collaboration among developers, translators, designers, and project managers, offering features like machine translation, translation memory, glossary, AWS S3 integration for over-the-air updates, among other features. It offers a free plan (no credit card needed) suitable for smaller projects and is completely free for open-source projects.

Try Localizely.

In today's globalized world, the success of a software product often depends on its ability to cater to diverse audiences with varying linguistic and cultural backgrounds. Understanding the key differences between language and locale is essential for creating products that resonate with your target users, regardless of their location. This is where the concept of software localization comes into play, a process that goes beyond mere translation to adapting a product's interface, content, and overall user experience to meet the specific needs of different regions.

In this blog post, we will delve into the intricacies of language and locale, two terms that are often used interchangeably but have distinct meanings and implications in the world of software development.

What is language?

Language is a complex system of communication that allows individuals to convey ideas, thoughts, and emotions through symbols, sounds, and gestures. It is an essential tool for human interaction, enabling people to collaborate, learn, and express themselves. Languages come in many forms, including spoken, written, and signed varieties.

There are several thousand languages spoken worldwide, each with its own unique vocabulary, grammar, and pronunciation. Some well-known examples include English, Spanish, Hindi, Arabic, Chinese, French, German, and Japanese. These languages vary greatly in the number of speakers, geographic distribution, and historical development.

To facilitate clear identification and classification of languages, international standards have been established, assigning unique codes to nearly all languages in use today. The most widely used system for language representation is the ISO 639 series of standards, which provide two- and three-letter codes for languages. ISO 639-1 is the most common, consisting of two-letter codes that represent languages in a concise and easily recognizable format. For instance, "en" stands for English, "es" for Spanish, and "zh" for Chinese. These codes are instrumental in various applications, such as software localization and international communication, allowing for a standardized way to reference languages across different platforms and systems.

What is locale?

A locale is a specific combination of language, region, script, and other cultural elements that together define the preferences and conventions for a particular user group or geographical area. It is an essential concept in software development, as it helps developers create applications that can be tailored to the specific needs of users from different cultural backgrounds, ensuring a more inclusive and user-friendly experience.

The components of a locale are:

• Language: The primary language spoken by the user group or in the geographical area, represented by a two-letter code according to the ISO 639-1 standard (e.g., "en" for English or "fr" for French).
• Region (optional): The country or region where the user group is located, represented by a two-letter code according to the ISO 3166-1 standard (e.g., "US" for the United States or "FR" for France).
• Script (optional): The writing system for the language, represented by a four-letter code according to the ISO 15924 standard. This is especially important for languages that use multiple scripts, such as "Latn" for Latin script or "Cyrl" for Cyrillic script.

Locale codes are usually created by combining the ISO 639-1 language code and the ISO 3166-1 region code, separated by either an underscore or a hyphen. For instance, "en_US" or "en-US" denotes English as spoken in the United States, whereas "fr_CA" or "fr-CA" indicates French as spoken in Canada.

Different programming languages and software systems may have varying approaches to defining locales and their components. While the core components—language, region, and sometimes script—are generally present across various systems, they might be named differently or have additional parameters. For instance, some systems may use the term "country" instead of "region", or include other elements.

Differences between language and locale

Language and locale are two distinct yet related concepts in software development. Language refers to a system of communication, such as English, Spanish, or Mandarin, while locale encompasses not only the language but also the region and other cultural elements that define the preferences and conventions of a specific user group or geographical area, such as date formats, time formats, and currency symbols.

In software development, understanding the difference between language and locale is crucial for creating applications that cater to users from various cultural backgrounds. While language broadly identifies the mode of communication, locale allows developers to customize the application's behavior and appearance according to the specific linguistic and cultural needs of the target audience, ensuring a more inclusive and user-friendly experience.

The following examples showcase British English ("en-GB") and American English ("en-US"), highlighting the language variations when English is spoken in different countries. Although it's the same language, cultural differences and factors like distinct currencies lead to adaptations in the text.

• "Nice colour!" – "Nice color!"
• "I like biscuits." – "I like cookies."
• "Rent a flat." – "Rent an apartment."
• "Admission is £8.04." – "Admission is $10."

Usage of locales in software localization

In software localization, using locales instead of just languages offers a more comprehensive approach to catering to diverse user preferences. Locales take into account not only the language but also regional variations and other cultural aspects, such as date and time formats, currency symbols, and metric systems. This additional information enables a more tailored and accurate representation of user preferences.

By leveraging localization libraries, developers can automatically adapt these formatting conventions based on the specified locale, without the need to manually consider every detail during the software localization phase. This streamlines the development process, saves time, and ensures a more consistent and user-friendly experience for users from different cultural backgrounds.

Dashes and underscores in locale representation

Dashes and underscores are both used in locale representation, resulting in two different formats: "en-US" (with a dash) and "en_US" (with an underscore). The existence of these two formats can be attributed to varying conventions and requirements across programming languages, libraries, and software systems.

The compatibility and conversion between dashes and underscores are essential for maintaining consistency and avoiding potential issues when working with different systems or localization libraries. Some libraries strictly rely on one representation, and using the incorrect format may lead to bugs or unexpected behavior in the software. Consequently, developers must be cautious and adapt the representation to match the specific requirements of the localization library or framework they are using.

Fallback mechanisms in software localization

Software localization often overlooks one crucial feature: the fallback mechanism. This becomes especially important for websites that support the auto-detection of a user's language preference. Typically, a website identifies a user's preferred language during their first visit, aiming to present the web page in the most suitable language.

Let's explore an example to understand the significance of the auto-detection feature and a fallback mechanism better. Imagine a user visiting our website for the first time with their browser set to Simplified Chinese as spoken in Hong Kong ("zh-Hans-HK"). When they make a request, we gather their language preference in an attempt to serve the page in the most appropriate language. Suppose our website supports English ("en") and Traditional Chinese as spoken in Taiwan ("zh-Hant-TW"). The question arises: In which language should we serve the page? If we choose English (assuming it's our default language), there's a risk the visitor won't understand the content if they're not proficient in English. On the other hand, if we serve the page in Traditional Chinese as spoken in Taiwan, the user is likely to comprehend most of the webpage's content.

Such scenarios underscore the importance of supporting a generic variation of a language alongside its specific variations. In the example above, this means it would be great to also support generic Chinese ("zh") language when supporting Traditional Chinese as spoken in Taiwan ("zh-Hant-TW"). This approach ensures we can always fallback to serve the page in generic language when visitors prefer specific variations of that language, which is not yet supported on our website.

Conclusion

Understanding the key differences between language and locale is crucial for effective software localization. While language refers to a system of communication, locale encompasses the language, region, and other cultural elements that define the preferences and conventions of a specific user group or geographical area. By acknowledging these distinctions, developers can create more inclusive and user-friendly applications that cater to diverse linguistic and cultural needs.

Embracing the power of locales in software localization allows developers to automatically adapt formatting conventions, such as dates, times, currencies, and metrics, with the help of localization libraries. This streamlined approach not only saves time but also ensures a consistent user experience across different cultural backgrounds.

If you're considering localizing your website or application and are wondering about the most effective way to handle localization messages for your specific locale codes, Localizely might be the solution you're looking for. Designed to foster seamless collaboration among project managers, developers, translators, and other stakeholders, Localizely offers a user-friendly platform that simplifies the localization process. It offers a free plan that is sufficient for smaller projects, and it's completely free for open-source projects.

Try Localizely today.

In today's digital era, where technology seamlessly bridges distances between people and cultures often with just a few clicks, opting to make your website multilingual seems to be a very reasonable choice. This strategy not only opens doors to global markets but also attracts new clients, thereby significantly increasing the chances of success for your business.

In this post, we are going to show you how to internationalize (i18n) your Next.js website using one of the most popular localization libraries, React Intl. This post will demonstrate localization in both routing approaches: the App Router and Pages Router. It will also explain how to automatically detect a user's preferred language, how to add necessary hreflang tags for better SEO, how to determine text direction, and much more. So, let’s dive in and make your website globally friendly!

App Router

All code samples used in this section are available on the GitHub repo.

Create a new Next.js project

What better way to begin than with a fresh new project? To create a new Next.js project, we will use the create-next-app CLI tool. This tool is maintained by the creators of Next.js and will make the creation process easier for us. By running the command below, we will create a new Next.js project called nextjs-app-router-i18n-example in a directory with the same name.

npx create-next-app@latest nextjs-app-router-i18n-example

Since this command operates in interactive mode, we will opt for the default settings for the purposes of this tutorial.

Would you like to use TypeScript? [Yes]
Would you like to use ESLint? [Yes]
Would you like to use Tailwind CSS? [No]
Would you like to use `src/` directory? [Yes]
Would you like to use App Router? (recommended) [Yes]
Would you like to customize the default import alias (@/*)? [No]

Add React Intl dependency

Next.js is compatible with a wide range of i18n libraries, including react-intl, lingui, next-intl, among others. In this post, we've chosen to use React Intl because of its widespread adoption and advanced features, such as ICU syntax support. To incorporate it, let's navigate to the nextjs-app-router-i18n-example directory we previously created and install react-intl.

cd nextjs-app-router-i18n-example
npm i react-intl

Add config for internationalized routing

Configuring internationalized routing in apps based on App Router is not completely automated and requires a bit of manual work. To start, let's first create an i18n-config.ts file in the root of the project and fill it with our i18n configuration. The locales represent the list of locales we would like to support in our app, and the defaultLocale represents the default locale of the app, and the one that will be used when visiting non-locale-prefixed paths.

The i18n-config.ts file:

export const i18n = {
  locales: ["en", "ar", "fr", "nl-NL"],
  defaultLocale: "en",
};

export type I18nConfig = typeof i18n;
export type Locale = I18nConfig["locales"][number];

After creating the configuration file, the next step involves updating the app directory to support internationalized routing. To accomplish this, we need to put all page files within the [locale] directory. That way, app pages will have access to the currently used locale and be able to display appropriate localization messages.

nextjs-app-router-i18n-example
|-- public
|-- src
|   |-- app
|   |   |-- [locale]
|   |   |   |-- globals.css
|   |   |   |-- layout.tsx
|   |   |   |-- page.module.css
|   |   |   |-- page.tsx
|   |   |-- favicon.ico
|-- ...
|-- i18n-config.ts
|-- next.config.js
|-- package.json
|-- package-lock.json

Create localization files

When it comes to localization files, it's good practice to put them all in one place. That way, it would be easier later for us to search and update any translation. To do this, let's create a folder named lang inside the src folder of the project. Inside it, add four JSON files named ar.json, en.json, fr.json, and nl-NL.json. These files will contain the translations for Arabic, English, French, and Dutch (Netherlands), respectively.

After creating these files, proceed to populate the localization files with the messages that will be used later in the project.

The ar.json file:

{
  "common.footer": "دروس التدويل",
  "page.home.head.title": "مثال على Next.js i18n",
  "page.home.head.meta.description": "مثال Next.js i18n - عربي",
  "page.home.title": "مرحبًا بك في <b> البرنامج التعليمي Next.js i18n </b>",
  "page.home.description": "أنت الآن تستعرض الصفحة الرئيسية بالعربية 🚀"
}

The en.json file:

{
  "common.footer": "internationalization tutorial",
  "page.home.head.title": "Next.js i18n example",
  "page.home.head.meta.description": "Next.js i18n example - English",
  "page.home.title": "Welcome to <b>Next.js i18n tutorial</b>",
  "page.home.description": "You are currently viewing the homepage in English 🚀"
}

The fr.json file:

{
  "common.footer": "tutoriel d'internationalisation",
  "page.home.head.title": "Next.js i18n exemple",
  "page.home.head.meta.description": "Next.js i18n exemple - Français",
  "page.home.title": "Bienvenue à <b>Next.js i18n didacticiel</b>",
  "page.home.description": "Vous consultez actuellement la page d'accueil en Français 🚀"
}

The nl-NL.json file:

{
  "common.footer": "handleiding internationalisering",
  "page.home.head.title": "Next.js i18n voorbeeld",
  "page.home.head.meta.description": "Next.js i18n voorbeeld - Nederlands (Nederland)",
  "page.home.title": "Welkom bij <b>Next.js i18n zelfstudie</b>",
  "page.home.description": "U bekijkt momenteel de homepage in het Nederlands (Nederland) 🚀"
}

Configure react-intl in Next.js project

Configuring React Intl with Next.js largely depends on how localization messages are used and whether they need to be accessed on the server side or the client side. Knowing that Next.js is a highly flexible framework, and that typical usage mostly combines both server-side and client-side approaches, in the following sections we will cover both approaches in more detail.

Server components

The use of server components in Next.js offers several advantages, such as the ability to render UI components on the server, reduce the time needed to fetch data for rendering, enable caching, and perform other related tasks. However, these components differ from traditional client-side components because they lack access to certain React features, such as context providers and side effects.

When it comes to using the React Intl library for server-side rendering, an alternative method must be employed to access localization messages since this library relies on the provider pattern. To overcome this limitation, we will create a lib directory in the src directory of the project. Within this lib directory, we will create a file named intl.ts. In this file, we will define a function called getIntl that will utilize the core functionality of the React Intl library to access localization messages, allowing us to circumvent these limitations.

The intl.ts file:

import { createIntl } from "@formatjs/intl";
import type { Locale } from "../../i18n-config";

export async function getIntl(locale: Locale) {
  return createIntl({
    locale: locale,
    messages: (await import(`../lang/${locale}.json`)).default,
  });
}

To prevent unintended usage of server code in client components, we are going to add a server-only package. This package will trigger a build-time error if any client component accidentally imports a module intended to be run on the server. This safeguard is particularly useful for protecting sensitive data from leaking into client components.

npm install server-only

Once we have installed the server-only package, let's update the intl.ts file with the necessary import statement to protect our server code from accidental leakage into client components.

The intl.ts file:

import "server-only";

import { createIntl } from "@formatjs/intl";
import type { Locale } from "../../i18n-config";

export async function getIntl(locale: Locale) { ... }

Now that we have a way to access localization messages in server components, we can easily use them. We just need to invoke the async function getIntl and pass the locale for which we would like to access the localization messages.

Client components

Just as server components have their benefits, client components do too. They facilitate the development of interactive elements utilizing event handlers, states, effects, and similar functions, as well as the browser API.

In order to use the React Intl library in client components, we first need to set up the IntlProvider. For that purpose, we will add a components directory within the src directory. Inside the components directory, let's create a Footer directory, and add two files within it, namely Footer.tsx and FooterContent.tsx.

Below, you will find a Footer component that gets localization messages and pass them to the the FooterContent component.

The Footer.tsx file:

import FooterContent from "./FooterContent";

async function getMessages(locale: string) {
  return await import(`../../lang/${locale}.json`);
}

type Props = {
  locale: string;
};

export default async function Footer({ locale }: Props) {
  const messages = (await getMessages(locale)).default;

  return (
    <footer className="footer">
      <FooterContent locale={locale} messages={messages} />
    </footer>
  );
}

The FooterContent component, displayed below, is a client component that receives locale and messages props from the Footer component and sets up the IntlProvider. It also accesses localization messages declaratively using the FormattedMessage component.

The FooterContent.tsx file:

"use client";

import { IntlProvider, FormattedMessage } from "react-intl";

type Props = {
  locale: string;
  messages: Record<string, string>;
};

export default function FooterContent({ locale, messages }: Props) {
  return (
    <IntlProvider locale={locale} messages={messages}>
      <div>
        {/* eslint-disable-next-line */}
        <img src="/img/next.svg" width={60} height={12} alt="NextJS" />
      </div>
      <div>
        <FormattedMessage tagName="p" id="common.footer" />
      </div>
    </IntlProvider>
  );
}

Adapt pages for i18n

Now when we have created a way to access localization messages on the server side and on the client side, let's merge these pieces together in our Home page.

First, let's update the RootLayout component to properly set the lang attribute on the html element and to include the Footer component below the content of the Home page.

The layout.tsx file:

import Footer from "../../components/Footer/Footer";
import "./globals.css";

type Props = {
  params: { locale: string };
  children: React.ReactNode;
};

export default function RootLayout({ params, children }: Props) {
  const { locale } = params;

  return (
    <html lang={locale}>
      <body>
        {children}
        <Footer locale={locale} />
      </body>
    </html>
  );
}

Next, let's update Home page content so it also shows two localization messages.

The page.tsx file:

import { getIntl } from "../../lib/intl";
import styles from "./page.module.css";

type HomeProps = {
  params: { locale: string };
};

export default async function Home({ params: { locale } }: HomeProps) {
  const intl = await getIntl(locale);

  return (
    <div className={styles.container}>
      <main className={styles.main}>
        <h1 className={styles.title}>
          {intl.formatMessage(
            { id: "page.home.title" },
            { b: (chunks) => <b key="bold">{chunks}</b> }
          )}
        </h1>

        <p className={styles.description}>
          {intl.formatMessage({ id: "page.home.description" })}
        </p>
      </main>
    </div>
  );
}

Here, we utilize the getIntl method we defined earlier for server components to access localization messages.

Determine text direction

When it comes to text direction, languages can be ltr (Left-to-Right) or rtl (Right-to-Left). The default text direction in HTML is ltr. In most cases, you don't need to configure anything. However, when one of the languages is rtl, you need to set the proper text direction for your pages. In our case, Arabic is an rtl language, so we need to handle that. For that purpose, we extended the intl.ts file with the getDirection function. This function returns the text direction for the passed locale. Later in the code, we will use that function and apply its response to set the appropriate dir attribute for the html element.

The intl.ts file:

import "server-only";

import { createIntl } from "@formatjs/intl";
import type { Locale } from "../../i18n-config";

export async function getIntl(locale: Locale) { ... }

export function getDirection(locale: Locale) {
  switch (locale) {
    case "ar":
      return "rtl";
    case "en":
    case "fr":
    case "nl-NL":
      return "ltr";
  }
}

If you need to manage a large number of languages on your website and are unsure about the text direction for each, consider using packages like rtl-detect for assistance.

Now that we've added a function that returns the appropriate text direction for a locale, let's use it in our app. The easiest way to set the text direction is to set it on the html element, as the directionality set here will propagate to all child elements in the HTML tree that do not have an explicitly set text directionality. For that purpose, let's update our RootLayout component with text directionality.

The layout.tsx file:

import Footer from "../../components/Footer/Footer";
import { getDirection } from "../../lib/intl";
import "./globals.css";

type Props = {
  params: { locale: string };
  children: React.ReactNode;
};

export default function RootLayout({ params, children }: Props) {
  const { locale } = params;

  const dir = getDirection(locale);

  return (
    <html lang={locale} dir={dir}>
      <body>
        {children}
        <Footer locale={locale} />
      </body>
    </html>
  );
}

Add hreflang tags

The hreflang tag is a way to tell search engines which language you are using on a specific page, as well as the other language variants of that page. Doing so will help them present users with the most appropriate version of your page. In this post, we will not delve into the details of hreflang tags, but it should be noted that including them is a good practice for improved SEO. Also, ensure that href attribute values are updated to correspond with your domain. Additionally, for enhanced SEO and better keyword targeting, consider localizing the title and meta description of your page, as illustrated in the example below.

import { Metadata, ResolvingMetadata } from "next";

import { getIntl } from "../../lib/intl";
import styles from "./page.module.css";

type RouteProps = {
  params: { locale: string };
  searchParams: { [key: string]: string | string[] | undefined };
};

export async function generateMetadata(
  props: RouteProps,
  parent: ResolvingMetadata
): Promise<Metadata> {
  const intl = await getIntl(props.params.locale);

  return {
    title: intl.formatMessage({ id: "page.home.head.title" }),
    description: intl.formatMessage({ id: "page.home.head.meta.description" }),
    alternates: {
      canonical: "https://example.com",
      languages: {
        ar: "http://example.com/ar",
        en: "http://example.com",
        fr: "http://example.com/fr",
        "nl-NL": "http://example.com/nl-NL",
        "x-default": "http://example.com",
      },
    },
  };
}

type HomeProps = { ... };

export default async function Home({ params: { locale } }: HomeProps) { ... }

Add language switcher

Incorporating a feature that allows users to change the language on the app is essential if we offer multilingual support. The ability to switch languages enhances the user's experience and satisfaction.

In this blog post, we're going to implement a basic language switcher. To do this, we will create a new Header directory within the components directory. Within the Header directory, we will add a Header.tsx file, which will include the code for our basic language switching functionality.

The Header.tsx file:

import Link from "next/link";
import { i18n } from "../../../i18n-config";

function Header() {
  const { locales, defaultLocale } = i18n;

  return (
    <header>
      <div dir="ltr" className="languages">
        {[...locales].sort().map((locale) => (
          <Link
            key={locale}
            href={locale === defaultLocale ? "/" : `/${locale}`}
          >
            {locale}
          </Link>
        ))}
      </div>
    </header>
  );
}

export default Header;

Having created the language switcher, it's time to embed it into our application by updating the RootLayout to encompass the Header component that features the language switcher.

The layout.tsx file:

import Header from "../../components/Header/Header";
import Footer from "../../components/Footer/Footer";
import { getDirection } from "../../lib/intl";
import "./globals.css";

type Props = { ... };

export default function RootLayout({ params, children }: Props) {
  const { locale } = params;

  const dir = getDirection(locale);

  return (
    <html lang={locale} dir={dir}>
      <body>
        <Header />
        {children}
        <Footer locale={locale} />
      </body>
    </html>
  );
}

Now, when we've configured most of the things, we could run our Next.js app. Running the following command will allow us to see how our app looks on the localhost.

npm run dev

http://localhost:3000/ ➝ Not found (fixed in upcoming chapter)

http://localhost:3000/ar ➝ Arabic

http://localhost:3000/fr ➝ French

http://localhost:3000/nl-NL ➝ Dutch (Netherlands)

In the interest of simplicity, this post omits styling. For access to the full code, please visit the corresponding GitHub repo.

Automatic locale detection

The automatic locale detection is a handy feature. It enables us to easily identify the user's preferred language from the Accept-Language header. This kind of functionality is not only related to web apps but is also used in other areas like mobile app development where the app preselects the language that best aligns with the user's phone settings.

To easily extract the user's preferred languages from the Accept-Language header, we will use the Negotiator library.

npm i negotiator
npm i @types/negotiator --save-dev

Now that we've added the required dependencies, let's create a middleware.ts file within the src directory. This file will contain middleware that will detect the language from the Accept-Language header and route to the appropriate page variant. Additionally, we will enhance this middleware to identify the default locale, and in the case of a request for the default locale, instruct the middleware to redirect to a path without a locale prefix.

The middleware.ts file:

import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";

import { match } from "@formatjs/intl-localematcher";
import Negotiator from "negotiator";

import { i18n } from "../i18n-config";
import type { I18nConfig } from "../i18n-config";

function getLocale(request: NextRequest, i18nConfig: I18nConfig): string {
  const { locales, defaultLocale } = i18nConfig;

  const negotiatorHeaders: Record<string, string> = {};
  request.headers.forEach((value, key) => (negotiatorHeaders[key] = value));

  const languages = new Negotiator({ headers: negotiatorHeaders }).languages(
    locales
  );

  return match(languages, locales, defaultLocale);
}

export function middleware(request: NextRequest) {
  let response;
  let nextLocale;

  const { locales, defaultLocale } = i18n;

  const pathname = request.nextUrl.pathname;

  const pathLocale = locales.find(
    (locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`
  );

  if (pathLocale) {
    const isDefaultLocale = pathLocale === defaultLocale;
    if (isDefaultLocale) {
      let pathWithoutLocale = pathname.slice(`/${pathLocale}`.length) || "/";
      if (request.nextUrl.search) pathWithoutLocale += request.nextUrl.search;

      response = NextResponse.redirect(new URL(pathWithoutLocale, request.url));
    }

    nextLocale = pathLocale;
  } else {
    const isFirstVisit = !request.cookies.has("NEXT_LOCALE");

    const locale = isFirstVisit ? getLocale(request, i18n) : defaultLocale;

    let newPath = `${locale}${pathname}`;
    if (request.nextUrl.search) newPath += request.nextUrl.search;

    response =
      locale === defaultLocale
        ? NextResponse.rewrite(new URL(newPath, request.url))
        : NextResponse.redirect(new URL(newPath, request.url));
    nextLocale = locale;
  }

  if (!response) response = NextResponse.next();

  if (nextLocale) response.cookies.set("NEXT_LOCALE", nextLocale);

  return response;
}

export const config = {
  matcher: "/((?!api|_next/static|_next/image|img/|favicon.ico).*)",
};

To check how this works, let's run the Next.js app on the localhost and try to open it with different browser settings.

1. Run the app on the localhost

npm run dev

2. Update browser language to Arabic, English, French, or Dutch (Netherlands)

3. Open the app in browser

Whenever we change the browser language and open http://localhost:3000, we will be redirected to the appropriate page.

Arabic ➝ http://localhost:3000/ar

French ➝ http://localhost:3000/fr

Dutch (Netherlands) ➝ http://localhost:3000/nl-NL

Other langauges ➝ http://localhost:3000

Automatic locale detection will be performed only when a user visits the app's homepage for the first time. To test this feature for other app languages, clear the NEXT_LOCALE cookie first.

Keep selected language in cookie for future visits

It's important to acknowledge that Next.js simplifies the process of handling cookies within its middleware, providing a straightforward way to save the user's preferred language setting. This ensures that every subsequent request is informed of the user's language preference. While this tutorial has demonstrated how to save the preferred locale via cookies, we haven't explained how to redirect users to their preferred language pages based on cookie values. We'll bypass this aspect for now to maintain a simple tutorial structure.

Nevertheless, when deciding to leverage cookies for managing language settings, consider the following:

• Determine the optimal cookie duration for your scenario, whether it be for a session or a specified period such as a day or a month.
• Assess any complications that may arise with Next.js's caching mechanisms.
• Ensure your application can effectively determine the user's preferred language, particularly when there's a discrepancy between the locale indicated by the cookie and the one suggested by the Accept-Language header.

Static HTML export

Web apps don't always require databases or servers; many websites function optimally with only static files, which are simple to host and often cost little to nothing. In the end, it all depends on the purpose for which the website is used. The Next.js framework supports static exports. Below are two code snippets that would allow us to generate static HTML files in our Next.js project. It's important to recognize, though, that with these snippets, static HTML files are the only result; dynamic features like user redirection or detection of Accept-Language header aren't possible. While there are some solutions and workarounds to these limitations, this guide will not explore them in order to keep things simple and straightforward.

The next.conig.js file:

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: "export",
};

module.exports = nextConfig;

The page.tsx file:

import { Metadata, ResolvingMetadata } from "next";

import { getIntl } from "../../lib/intl";
import { i18n } from "../../../i18n-config";
import styles from "./page.module.css";

type RouteProps = { ... };

export async function generateMetadata( ... ): Promise<Metadata> { ... }

type HomeProps = { ... };

export default async function Home({ params: { locale } }: HomeProps) { ... }

export async function generateStaticParams() {
  const { locales } = i18n;

  return locales.map((locale) => ({
    locale: locale,
  }));
}

Pages Router

All code samples used in this section are available on the GitHub repo.

Create a new Next.js project

What better way to begin than with a fresh new project? To create a new Next.js project, we will use the create-next-app CLI tool. This tool is maintained by the creators of Next.js and will make the creation process easier for us. By running the command below, we will create a new Next.js project called nextjs-i18n-example in a directory with the same name.

npx create-next-app@latest nextjs-i18n-example

Since this command operates in interactive mode, we will go with the following settings for the purposes of this tutorial.

Would you like to use TypeScript? [No]
Would you like to use ESLint? [Yes]
Would you like to use Tailwind CSS? [No]
Would you like to use `src/` directory? [No]
Would you like to use App Router? (recommended) [No]
Would you like to customize the default import alias (@/*)? [No]

Add React Intl dependency

Next.js is compatible with a wide range of i18n libraries, including react-intl, lingui, next-intl, among others. In this post, we've chosen to use React Intl because of its widespread adoption and advanced features, such as ICU syntax support and various formatting options. To incorporate it, let's navigate to the nextjs-i18n-example directory we previously created and install react-intl.

cd nextjs-i18n-example
npm i react-intl

Add config for internationalized routing

Translations and routing are two main pillars of internationalization. The previously added react-intl library is going to handle translations and formatting. When it comes to routing, Next.js has built-in support for that. This built-in support offers two options, sub-path routing, and domain routing. As the names imply, sub-path routing uses the locale in the url path, whereas domain routing uses different domains for serving content for different locales. In our case, we will use sub-path routing as it is less complex and more common for average websites.

Sub-path routing examples

• /blog
• /fr/blog
• /nl-NL/blog

Domain routing examples

• example.com/blog
• example.fr/blog
• example.nl/blog

To use the built-in support for internationalized routing, we need to update the next.config.js file with the i18n config. The locales represents the list of locales we are going to support in our app. The defaultLocale represents the default locale of the app. That means that all pages for Arabic, French, and Dutch (Netherlands) will be prefixed with the ar, fr, and nl-NL in url path.

The next.config.js file:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  i18n: {
    // The locales you want to support in your app
    locales: ["ar", "en", "fr", "nl-NL"],
    // The default locale you want to be used when visiting a non-locale prefixed path e.g. `/hello`
    defaultLocale: "en",
  },
};

module.exports = nextConfig;

The internationalized routing is available since Next.js 10.

Automatic Locale Detection

The above-added config for the internationalized routing by default includes automatic locale detection. That means that Next.js will try to automatically detect which locale the user prefers based on the Accept-Language header. To check how this works, let's run the Next.js app on the localhost and try to open it with different browser settings.

1. Run the app on the localhost

npm run dev

2. Update browser language to Arabic, English, French, or Dutch (Netherlands)

3. Open the app in browser

Whenever we change the browser language and open http://localhost:3000, we will be redirected to the appropriate page.

Arabic ➝ http://localhost:3000/ar

French ➝ http://localhost:3000/fr

Dutch (Netherlands) ➝ http://localhost:3000/nl-NL

Other langauges ➝ http://localhost:3000

In some rare cases, you might want to disable automatic locale detection. To achieve that, you should set the localeDetection to false in the next.config.js file. After that, Next.js will no longer automatically redirect based on the user's preferred locale.

The next.config.js file:

...
const nextConfig = {
  ...
  i18n: {
    ...
    localeDetection: false
  },
};
...

Create localization files

The next important thing is to add localization files. For that purpose, let's create a lang directory. Within it, add four JSON files: ar.json, en.json, fr.json, and nl-NL.json. These files are going to hold translations for Arabic, English, French, and Dutch (Netherlands), respectively. Below, you can see the project structure after adding the mentioned files.

nextjs-i18n-example
|-- lang
|   |-- ar.json
|   |-- en.json
|   |-- fr.json
|   |-- nl-NL.json
|-- pages
|   |-- api
|   |-- _app.js
|   |-- index.js
|   |-- ...
|-- public
|-- ...
|-- package.json
|-- package-lock.json

Afterward, fill in localization files with messages that we will use later.

The ar.json file:

{
  "page.home.head.title": "مثال على Next.js i18n",
  "page.home.head.meta.description": "مثال Next.js i18n - عربي",
  "page.home.title": "مرحبًا بك في <b> البرنامج التعليمي Next.js i18n </b>",
  "page.home.description": "أنت الآن تستعرض الصفحة الرئيسية بالعربية 🚀"
}

The en.json file:

{
  "page.home.head.title": "Next.js i18n example",
  "page.home.head.meta.description": "Next.js i18n example - English",
  "page.home.title": "Welcome to <b>Next.js i18n tutorial</b>",
  "page.home.description": "You are currently viewing the homepage in English 🚀"
}

The fr.json file:

{
  "page.home.head.title": "Next.js i18n exemple",
  "page.home.head.meta.description": "Next.js i18n exemple - Français",
  "page.home.title": "Bienvenue à <b>Next.js i18n didacticiel</b>",
  "page.home.description": "Vous consultez actuellement la page d'accueil en Français 🚀"
}

The nl-NL.json file:

{
  "page.home.head.title": "Next.js i18n voorbeeld",
  "page.home.head.meta.description": "Next.js i18n voorbeeld - Nederlands (Nederland)",
  "page.home.title": "Welkom bij <b>Next.js i18n zelfstudie</b>",
  "page.home.description": "U bekijkt momenteel de homepage in het Nederlands (Nederland) 🚀"
}

Configure react-intl in Next.js project

Internationalized routing and localization files are just the first part of the task. The second part is setting up the react-intl library. Below, you can see what changes have been made in the _app.js file.

Wrap the app with the IntlProvider

The react-intl uses the provider pattern for passing the i18n context to a tree of components. Therefore, we will need to wrap the app's root with the IntlProvider. Using the useRouter hook, we can access the locale information and pass appropriate localization messages to the IntlProvider.

Determine text direction

When it comes to the text direction, languages can be ltr (left-to-right) or rtl (right-to-left). The default text direction in HTML is ltr. In most cases, you don't need to configure anything. However, when one of the languages is rtl, you might need to handle text direction explicitly. In our case, Arabic is the rtl, so we need to handle that as well. For that purpose, we added the getDirection function. It returns the text direction for the passed locale. Later in the code, we will use that function and pass its response as dir prop to all pages in our app.

Note that this is not the only way for setting the text direction in Next.js apps. Alternatively, you could handle that in the _document.js file by updating the dir attribute of the html element or in your Layout component. For the sake of simplicity, we put that logic inside the _app.js file. However, you should use the approach that works best for you.

The _app.js file:

import { useRouter } from "next/router";
import { IntlProvider } from "react-intl";

import ar from "../lang/ar.json";
import en from "../lang/en.json";
import fr from "../lang/fr.json";
import nl_NL from "../lang/nl-NL.json";

import "../styles/globals.css";

const messages = {
  ar,
  en,
  fr,
  "nl-NL": nl_NL,
};

function getDirection(locale) {
  if (locale === "ar") {
    return "rtl";
  }

  return "ltr";
}

function MyApp({ Component, pageProps }) {
  const { locale } = useRouter();

  return (
    <IntlProvider locale={locale} messages={messages[locale]}>
      <Component {...pageProps} dir={getDirection(locale)} />
    </IntlProvider>
  );
}

export default MyApp;

Adapt pages for i18n

We did most of the work. The last step is to put all this together. Therefore, we are going to update the index.js file under the pages directory. Below, you can find two approaches for accessing the localization messages, imperative and declarative. We've already covered these two ways of usage, formatting options, and similar in another post. Therefore, we will not spend more words on that. Instead, we are going to focus on the hreflang tag, language switcher, and other important things.

Add hreflang tags

The hreflang tag is a way to tell search engines which language you are using on a specific page. Doing so will help them to show users the most appropriate version of your page. In this post, we will not go into depth regarding hreflang, but it should be noted that it is good practice to include them for better SEO. Also, keep in mind that href attribute values need to be updated to correspond to your domain.

Add language switcher

When it comes to the language switcher, we've used the useRouter hook to retrieve locales information. Later, we've mapped each locale to a Link component. The Link component accepts the optional locale prop for transitioning to a different locale from the currently active one. If not provided, the locale prop will use the currently active locale.

Keep selected language in cookie for future visits

It is worth noting that Next.js allows you also to store selected locale in the NEXT_LOCALE cookie. That cookie can be used later for overriding the Accept-Language header (Automatic Locale Detection) by redirecting the user to the correct location. That is, the user that prefers the locale en in the Accept-Language header, but has a NEXT_LOCALE=fr cookie, will be redirected to a page that corresponds to fr locale. In this tutorial, we did not use this cookie. However, its implementation is not complicated. Whenever the user changes the language, the mentioned cookie should be updated.

Set text direction

As for the text direction, we just need to set the dir prop of the Home component to the container of our content. As we stated earlier, this is just one way to solve it. Feel free to use the method that works best for you.

The index.js file:

import Head from "next/head";
import Link from "next/link";
import { useRouter } from "next/router";
import { FormattedMessage, useIntl } from "react-intl";

import styles from "../styles/Home.module.css";

export default function Home({ dir }) {
  const { locales } = useRouter();

  const intl = useIntl();

  const title = intl.formatMessage({ id: "page.home.head.title" });
  const description = intl.formatMessage({ id: "page.home.head.meta.description" });

  return (
    <div className={styles.container}>
      <Head>
        <title>{title}</title>
        <meta name="description" content={description} />
        <link rel="icon" href="/favicon.ico" />

        {/* Add hreflang links */}
        <link rel="alternate" href="http://example.com" hrefLang="x-default" />
        <link rel="alternate" href="http://example.com" hrefLang="en" />
        <link rel="alternate" href="http://example.com/ar" hrefLang="ar" />
        <link rel="alternate" href="http://example.com/fr" hrefLang="fr" />
        <link rel="alternate" href="http://example.com/nl-NL" hrefLang="nl-NL" />
      </Head>

      <header>
        <div className={styles.languages}>
          {[...locales].sort().map((locale) => (
            <Link key={locale} href="/" locale={locale}>
              {locale}
            </Link>
          ))}
        </div>
      </header>

      <main dir={dir} className={styles.main}>
        <h1 className={styles.title}>
          <FormattedMessage id="page.home.title" values={{ b: (chunks) => <b>{chunks}</b> }} />
        </h1>

        <p className={styles.description}>
          <FormattedMessage id="page.home.description" />
        </p>
      </main>
    </div>
  );
}

Congratulations! 🎉 You have successfully set up internationalization in your Next.js project. If you have followed all the steps, your app should look like the one shown below.

What about static HTML export?

Currently, the biggest weakness of the internationalization of Next.js apps is the inability to export to static HTML. Running such command results in "Error: i18n support is not compatible with next export". This issue has already been reported and discussed. A potential workaround would be to use a regular Next.js deployment strategy or manual handling of i18n routing.

Managing your Next.js translations

Easy to manage a couple of strings in two languages? Sure. But as you add more features and expand to more markets, your app will grow to thousands of strings in a dozen of languages. Here’s how to streamline your app translation process:

Step 1: Create a project in Localizely

Once you sign up to Localizely, just go to My projects page and tap “+” button (or explore the Sample Project if you wish to get more familiar with Localizely features first). Give your project a name and set your main and other languages. You can change the main language later if needed.

Each project gets a unique ID (you can find it in My projects page), that is needed when using API.

Step 2: Upload your files

Import your main JSON file to Localizely. Go to Upload page, select the file, and confirm. Alternatively, you can start by adding string keys in Localizely first.

Step 3: Invite team members

Localization work is a team effort. Switch to the Contributors section by clicking the icon in the side menu and start adding teammates. Any user can be granted admin privileges, i.e. the same rights on the project as you. For non-admin contributors, you can specify per-language access to the project specifying some languages as reference (read-only) or contributable (read and update). Only admins have access to string key changes, importing, exporting, settings, etc.

Step 4: Translate

Localizely has an editor on Translations page that reminds of Excel tables commonly used for translations management. Feel free to explore the Sample project or just take a look at Getting started guide to grasp the basic concept and options.

Step 5: Download the files

The translation part is done. How to get the localization data out of Localizely and make it usable in your Next.js app?

There are 2 options:

• Option 1: Download manually

Click Download icon in your project side menu and select Key-Value JSON (.json) as the exporting format. Click Download to get the file. Then move downloaded .json file into your project replacing the existing localization, that’s all.

• Option 2: Download via API

Depending on your project deployment setup, you may want to use Localizely API – it gives you a simple way to automatically generate and download localization files.

Conclusion

In this post, we've demonstrated how to integrate the React Intl library with Next.js, utilizing both the App Router and Pages Router. Also, we showed how to automatically detect the user's preferred language, how to add hreflang tags for better SEO, how to determine text direction, and other similar things.

But what about translation? It is a more complex challenge, encompassing the entire lifecycle of the application. Imagine the difficulty of sharing localization files with non-technical team members via email, discussing translations, making changes, and then synchronizing everything. Fortunately, the Localizely platform offers a solution. It streamlines collaboration by facilitating translation tasks, providing a glossary, tracking the history of changes, and much more.

Try Localizely for free.

The idea of maintaining a single codebase for both Android and iOS applications is quite appealing. In the past, our efforts to realize this concept met with limited success. Nonetheless, Flutter is confronting this challenge with an innovative approach. Moreover, its adaptability extends beyond just mobile platforms, enabling the development of applications for the web, desktop, and even embedded systems, all from a single codebase.

The benefits of crafting multiple applications from a single codebase cannot be overstated. However, the question arises: How does this benefit translate when addressing global markets that demand support for multiple languages? Initially, localization tools around Flutter were fairly rudimentary, but they have evolved significantly since then. Today, there is a plethora of robust localization solutions available. In the upcoming chapters, we'll delve into some of the most popular and effective tools for Flutter localization in depth.

Using gen_l10n

Part 1: Setting up your Flutter app

Flutter has recently introduced a new localization approach with the gen_l10n tool. This tool seamlessly integrates into the development workflow, automatically generating all necessary localization files. This integration enables developers to concentrate solely on crafting localization messages and implementing them in the app, while the gen_l10n tool takes care of the otherwise tedious task of producing the required localization code. This automation not only speeds up development but also significantly enhances the developer experience. In the upcoming chapters, we will guide you on how to effectively leverage this powerful localization tool.

All code samples used in this section are available on the GitHub repo.

Step 1: Add dependencies

The first step towards supporting multiple languages in a Flutter application is to add the necessary dependencies into your Flutter project. Please run the commands provided below in your terminal to incorporate them:

flutter pub add flutter_localizations --sdk=flutter
flutter pub add intl:any

After adding them, ensure the pubspec.yaml file is updated to reflect these changes.
Your dependencies section should look something like this:

dependencies:
  # Other dependencies...
  flutter_localizations:
    sdk: flutter
  intl: any

Step 2: Enable generation of localization files

To enable automatic generation of localization files, please update the pubspec.yaml file by adding the following line to the flutter section.

flutter:
  generate: true
  # Other config...

Step 3: Configure localization tool

Create a new l10n.yaml file in the root of the Flutter project. This file will hold the configuration for the gen_l10n tool. You can find the full list of configuration options in this document. However, in this guide, we will use just a few of them:

• arb-dir – the path of the directory that contains the translation files.

• template-arb-file – the name of the template arb file that will be used as basis for generating the Dart localization files.

• output-localization-file – the name of the file for the output localization and localizations delegate classes.

Below, you can find the content of the l10n.yaml file used in this guide.

arb-dir: lib/l10n
template-arb-file: intl_en.arb
output-localization-file: app_localizations.dart

Step 4: Add translation files

Next, let's add the l10n directory with three ARB files: intl_ar.arb, intl_en.arb, and intl_es.arb. These files are going to hold translations for Arabic, English, and Spanish, respectively. Below, you can see the project structure after adding these files and their content.

FLUTTER_PROJECT
|-- ...
|-- android
|-- ios
|-- lib
|   |-- l10n
|       |-- intl_ar.arb
|       |-- intl_en.arb
|       |-- intl_es.arb
|   |-- main.dart
|-- pubspec.yaml
|-- ...

The intl_ar.arb file:

{
  "helloWorld": "مرحبا بالعالم!"
}

The intl_en.arb file:

{
  "helloWorld": "Hello World!"
}

This intl_es.arb file:

{
  "helloWorld": "¡Hola Mundo!"
}

More info about ARB localization files can be found in a dedicated guide.

If you're using VS Code, consider adding the ARB Editor extension. It enhances your ARB file editing experience with syntax highlighting, snippets, diagnostics, and quick fixes.

The Flutter ARB file allows ICU syntax in messages. However, the gen_l10n tool is still in the active-development phase and does not yet fully support the entire ICU syntax. Reported issues include: multiple/nested plurals and selects in messages; the generator ignores plural forms: zero, one, and two.

Localization in the iOS apps

According to the official documentation, for iOS apps, it is necessary to update the Info.plist file with the list of supported locales. However, there are some indications that automation of this process may be possible in the future. Until then, manually add the following snippet to support localization in iOS apps.

The ios/Runner/Info.plist file:

<key>CFBundleLocalizations</key>
<array>
  <string>ar</string>
  <string>en</string>
  <string>es</string>
</array>

Step 5: Run the app to trigger code generation

To trigger the generation of the localization files, you need to run your application. After that, you will be able to see the generated code in the .dart_tool folder.

FLUTTER_PROJECT
|-- .dart_tool
|   |-- ...
|   |-- flutter_gen
|       |-- gen_l10n
|           |-- app_localizations.dart
|           |-- app_localizations_ar.dart
|           |-- app_localizations_en.dart
|           |-- app_localizations_es.dart
|       |-- ...
|-- android
|-- ios
|-- lib
|-- ...

Each time you run flutter pub get or flutter run command, you will trigger code generation. For generating the same files independently of the application, you can use the flutter gen-l10n command as an alternative.

By default, the gen_l10n tool generates localization files as a synthetic package. Therefore, these files are not checked into the version control system (i.e., Git). However, if for some reason you want to track this code with the version control system, you will need to update your l10n.yaml file with synthetic-package and output-dir config parameters.

The l10n.yaml file:

# Other config...
synthetic-package: false
output-dir: lib/l10n

Step 6: Update the app

The next step involves updating the MaterialApp widget with the localizationsDelegates and supportedLocales properties. So, let's import the generated app_localizations.dart file and set the needed values.

The main.dart file:

import 'package:flutter/material.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // ...
      localizationsDelegates: AppLocalizations.localizationsDelegates,
      supportedLocales: AppLocalizations.supportedLocales,
      // ...
    );
  }
}

The AppLocalizations.localizationsDelegates represents the list of:

• generated localizations delegate – provides localized messages from ARB files.
• GlobalMaterialLocalizations.delegate – provides localized messages for the Material widgets.
• GlobalCupertinoLocalizations.delegate – provides localized messages for Cupertino widgets.
• GlobalWidgetsLocalizations.delegate – provides text direction for widgets.

These delegates allow us to use different languages throughout the app without much hassle. They also translate the interface of both Material and Cupertino widgets into around 115 languages (for instance, the Material date picker) and configure text directions within the app.

The AppLocalizations.supportedLocales represents the list of supported locales.

Finally, paste the snippet shown below somewhere in the code and hot-reload the app to see how everything works.

Text(AppLocalizations.of(context)!.helloWorld)

If you have followed all the steps from the beginning, you should be able to see the translated message. Note that whenever you change the language of the device to Arabic, English, or Spanish, the message will be updated.

Text direction: Left-to-Right and Right-to-Left

Although most languages are written Left-to-Right (LTR), it is important to be aware that there are also Right-to-Left (RTL) languages. In this guide, we have included Arabic, which is an RTL language. Whenever the app is opened in Arabic, the layout should change accordingly. Generally, the Flutter framework updates the text direction within the app to correspond to the selected locale. In most cases, no adjustments are necessary. However, if the layout is designed exclusively for LTR languages or uses some hard-coded values, there is a possibility it may not display correctly. Be aware that adding an RTL language like Arabic to your app might also necessitate changes to your layout.

Escaping syntax

Typically, the content of localization messages is straightforward. Nevertheless, on occasion, there is a need to incorporate messages with special characters, such as curly braces { and }. To prevent these tokens from being parsed, it is necessary to enable the use-escaping flag within the l10n.yaml file.

The l10n.yaml file:

use-escaping: true

Once escaping is enabled, utilize single quotes to escape special characters in your localization messages.

{
  "escapingExample": "In math, '{1, 2, 3}' denotes a set."
}

Avoid null checking

By default, getters in the generated localizations class are nullable. To eliminate the need for repeated null checks, you can turn off the nullable-getter option in the l10n.yaml file.

The l10n.yaml file:

nullable-getter: false

After disabling nullable getters, you will be able to access the localization messages as shown below.

AppLocalizations.of(context).yourMessage

Get the selected locale

To get the selected locale of the widget tree, use the snippet shown below.

Locale selectedLocale = Localizations.localeOf(context);

Override the locale

In some rare cases, you might want to override the locale of one part of the widget tree. For that purpose, you should use the Localizations.override factory constructor. Below, you can see an example where the helloWorld message is shown regularly and with an overridden locale.

@override
Widget build(BuildContext context) {
  return Column(
    children: [
      Text(AppLocalizations.of(context)!.helloWorld),
      Localizations.override(
        context: context,
        locale: const Locale('es'),
        // Using a Builder here to get the correct BuildContext.
        child: Builder(
          builder: (BuildContext context) {
            return Text(AppLocalizations.of(context)!.helloWorld);
          },
        ),
      ),
    ],
  );
}

Custom locale resolution logic

It's worth noting that Flutter supports custom locale resolution logic. If you need such thing for any reason, you simply need to provide a localeResolutionCallback to the MaterialApp. This callback will be called each time the Flutter app starts or when the user changes the language of the device.

MaterialApp(
  // ...
  localeResolutionCallback: (locale, supportedLocales) {
    // Add your custom resolution logic
    return locale;
  },
);

Change app language programmatically

We've observed how Flutter can identify the device's language settings, which is the user's preferred language, and tailor the app accordingly. We've also explored methods for overriding the language in specific areas of the app. What about incorporating a manual language switcher within the app, though? Fortunately, this isn't a complex task. It simply requires setting the selected language as a locale property to the MaterialApp widget. For more details, please refer to the provided example.

Part 2: Managing your Flutter localizations

Managing a couple of strings in two languages? Sure, that's easy. But as you add more features and expand into more markets, your app will grow to include thousands of strings across dozens of languages. Here's how to automate your Flutter localization:

Step 1: Create a project in Localizely

Once you sign up to Localizely, just go to the My projects page and tap the “+” button (or explore the Sample Project if you wish to get more familiar with Localizely features first). Give your project a name and set your main and other languages; you can change the main language later if needed.

Each project receives a unique ID, which can be found on the My projects page and is required when using the API.

Step 2: Upload your files

Import your main ARB file into Localizely by navigating to the Upload page. Select the file and click confirm. Alternatively, you can begin by adding string keys directly in Localizely.

Step 3: Invite team members

Localization work is a team effort. Click the icon in the side menu to switch to the Contributors section and add teammates. Any user can be granted admin privileges, i.e., the same rights on the project as you have. For non-admin contributors, you can specify access on a per-language basis. Assign some languages as reference (read-only) and others as contributable (read and update). Only admins have access to string key changes, importing, exporting, settings, and so on.

Step 4: Translate

Localizely has an editor on the Translations page that resembles Excel tables commonly used for translation management. Feel free to explore the Sample project or take a look at the Getting started guide to grasp the basic concepts and options.

Step 5: Download the files

The translation part is done. How to get the localization data out of Localizely and make it usable in your Flutter app?

There are 2 options:

• Option 1: Download manually

  Click the Download icon in your project's side menu and select Flutter ARB as the exporting format. Click the Download button to obtain the file. Then move the downloaded .arb file into your project, replacing the existing localization; that’s all.

  

• Option 2: Download via API

  Depending on your project deployment setup, you may want to use the Localizely API. It gives you a simple way to automatically generate and download localization files.

Automated using Flutter Intl

Part 1: Setting up your Flutter app

To support multiple languages in your Flutter application, you first need to set it up. In this section, you will learn how to accomplish this by using the Flutter Intl plugin. This plugin automatically generates localization code, simplifies the addition of new languages, extracts text for translation, and performs other related tasks.

All code samples used in this section are available on the GitHub repo.

Step 1: Install IDE plugin

Install the Flutter Intl plugin for the IDE you are using (Visual Studio Code or Android Studio).In this guide, we will explain how to do it in Android Studio. It should be fairly similar in Visual Studio Code, just follow the steps in the extension documentation.

There is also a CLI tool named intl_utils in case you need similar operations for continuous integration purposes.

Step 2: Initialize plugin for your project

Go to Tools | Flutter Intl and run Initialize for the Project.

By default en locale is added by auto-creating a file lib/l10n/intl_en.arb.

The plugin generates and maintains files within the lib/generated/ folder, which should not be edited manually. However, these files should be tracked in your project repository.

Step 3: Set up your app

Add dependency needed for localization to pubspec.yaml file:

dependencies:
  # Other dependencies... 
  flutter_localizations: 
    sdk: flutter
  intl: any

Next, run the following command from Terminal to download them:

flutter pub get

Set up your localizationsDelegates and your supportedLocales, which will allow access to the strings, localize Material's and Cupertino's widgets to support around 115 languages (e.g., Material's date picker), and set up text directionality within the app.

import 'package:flutter_localizations/flutter_localizations.dart';
import 'generated/l10n.dart';

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return new MaterialApp(
            localizationsDelegates: [
                S.delegate,
                GlobalMaterialLocalizations.delegate,
                GlobalWidgetsLocalizations.delegate,
                GlobalCupertinoLocalizations.delegate,
            ],
            supportedLocales: S.delegate.supportedLocales,
            title: 'Flutter Demo',
            home: new MyHomePage(title: 'Flutter Demo Home Page'),
        );
    }
}

Step 4: Add other locales

You probably want to localize your Flutter app into more than one locale.

You can add more locales by going to Tools | Flutter Intl and running Add locale command.

Step 5: Add string keys to main ARB file

Your main ARB file, by default, is lib/l10n/intl_en.arb. When you add new key-value pairs to it and save the file, those keys will become automatically available for auto-completion in your Dart code.

File content example:

{
  "title": "Hello world!"
}

In essence, an ARB file is a JSON file with some conventions.

Step 6: Reference the keys in Dart code

The ARB file’s keys now correspond to methods from the S class. For example:

Widget build(BuildContext context) {
  return Text(
      S.of(context).title
  );
}

As an alternative method, you can add a localizable text directly in the Dart code and then extract it to ARB files using intention actions in Android Studio or code actions in VS Code. This process will allow you to add the corresponding string key to all ARB files.

Part 2: Managing your translations

As your app grows with the number of string keys and the number of different languages for end-users, it gets more complicated to maintain translations.Here is how to streamline the localization workflow:

Step 1: Create a project in Localizely

Once you sign up to Localizely, just go to My projects page and tap “+” button (or explore the Sample Project if you wish to get more familiar with Localizely features first). Give your project a name, and set your main and other languages. You can change the main language later if needed.

Each project gets a unique ID (you can find it in My projects page), that is needed for the next step.

Step 2: Connect your IDE with Localizely

In your IDE go to Tools | Flutter Intl | Integrate with Localizely and run Connect command.

You will be asked for your personal API token which you can get from My Profile page, and project ID we mentioned in the previous step.

Enter the data and click connect.

Once connected, your personal API token will be stored inside the file <USER_HOME>/.localizely/credentials, and project ID will be added to pubspec.yaml file inside your project.Check out plugin documentation for additional but optional config parameters inside pubspec.yaml file.

Step 3: Upload main ARB file

During the development of the app, we constantly add new string keys that need to be translated later. A common practice is to add those new string keys only to the main locale during development.

Once planned features are implemented, you want to upload the main ARB file to Localizely, for your team to translate it.

In your IDE go to Tools | Flutter Intl | Integrate with Localizely and run Upload main ARB file command.

Alternatively you can always add new string keys in Localizely platform first, and then download them for development. It depends on what fits into your workflow better.

Step 4: Translate

Localizely has an editor on Translations page that reminds of Excel tables commonly used for translations management. Feel free to explore the Sample project or just take a look at Getting started guide to grasp the basic concept and options.

If you have previously invited your teammates to the Localizely project, you can assign them a task to translate newly added string keys.

Step 5: Download translated ARB files

The translation part is done.In your IDE go to Tools | Flutter Intl | Integrate with Localizely and run Download ARB files command.ARB files will be downloaded from Localizely platform and put in the proper place in your Flutter project.

Step 6: Publish your app

Your Flutter app now has ready translations for the next release.You are ready to do QA check and publish the app!

In case you are interested in instant updates of translations without the need for new releases, check out the Flutter Over-the-Air translation updates feature. It will let you correct typos, optimize text, and update translations on the fly.

Using intl_translation [old]

Part 1: Setting up your Flutter app

Flutter has good documentation on how to get started with a sample app, so we will not go into that here. We will describe how to introduce localization to your sample app. You can use Android Studio or Visual Studio Code as IDE, it is the same.

Step 1: Add dependencies

Start by defining these localization dependencies in your pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations: # added
    sdk: flutter # added

dev_dependencies:
  flutter_test:
    sdk: flutter
  intl_translation: # added

Install packages by running following command from Terminal:

flutter pub get

Step 2: Create localization classes

We can do this by creating AppLocalizations and AppLocalizationsDelegate classes in a separate lib/localizations.dart file.

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'l10n/messages_all.dart';

class AppLocalizations {
  AppLocalizations();
  
  static const AppLocalizationsDelegate delegate = AppLocalizationsDelegate();
  
  static Future<AppLocalizations> load(Locale locale) {
    final String name = locale.countryCode.isEmpty ? locale.languageCode : locale.toString();
    final String localeName = Intl.canonicalizedLocale(name);

    return initializeMessages(localeName).then((_) {
      Intl.defaultLocale = localeName;
      return AppLocalizations();
    });
  }

  static AppLocalizations of(BuildContext context) {
    return Localizations.of<AppLocalizations>(context, AppLocalizations);
  }
  
  
  // Your keys defined below
  String get title {
    return Intl.message(
      'Hello World',
      name: 'title',
      desc: 'Title for the Localized application',
    );
  }

  String welcome(String name) {
    return Intl.message(
      'Welcome {name}',
      name: 'welcome',
      desc: 'Welcome message',
      args: [name],
    );
  }
}

class AppLocalizationsDelegate extends LocalizationsDelegate<AppLocalizations> {
  const AppLocalizationsDelegate();
  
  // Override with your list of supported language codes
  List<Locale> get supportedLocales {
    return const <Locale>[
      Locale('en', ''), 
      Locale('de', ''),
    ];
  }

  @override
  bool isSupported(Locale locale) => _isSupported(locale);

  @override
  Future<AppLocalizations> load(Locale locale) => AppLocalizations.load(locale);

  @override
  bool shouldReload(AppLocalizationsDelegate old) => false;

  bool _isSupported(Locale locale) {
    if (locale != null) {
      for (Locale supportedLocale in supportedLocales) {
        if (supportedLocale.languageCode == locale.languageCode) {
          return true;
        }
      }
    }
    return false;
  }
}

At the end of AppLocalizations class we define all string keys we will use inside our app.AppLocalizationsDelegate class has a list of supportedLocales. We should put all locales we support for end-users into that list.

Step 3: Update app widgets

Now, that we have defined 2 string keys in AppLocalizations class, we can simply use them in our widgets.

In the following example, we use them to print the title on the top of the app page, and a simple welcome message with a placeholder.

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

import 'localizations.dart'; // your previous file 

class DemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(AppLocalizations.of(context).title),
        ),
        body: Text(AppLocalizations.of(context).welcome("John")));
  }
}

class Demo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        onGenerateTitle: (BuildContext context) =>
            AppLocalizations.of(context).title,
        localizationsDelegates: [
          AppLocalizations.delegate,
          GlobalMaterialLocalizations.delegate,
          GlobalWidgetsLocalizations.delegate,
        ],
        supportedLocales: AppLocalizations.delegate.supportedLocales,
        // Note: AppLocalizations.of()
        // will only find the app's Localizations widget if its
        // context is a child of the app.
        home: DemoApp());
  }
}

void main() {
  runApp(Demo());
}

When you want programmatically to change the current locale in your app, you can do it in the following way:

AppLocalizations.load(Locale('en', ''));

Step 4: Generate localization files

The code is now ready, but we miss localization files for languages we support. Flutter officially supports *.arb localization files.

Flutter offers a CLI tool that generates a default intl_messages.arb file by scanning your AppLocalizations class.Create lib/l10n folder and run the following command from the project root:

flutter pub pub run intl_translation:extract_to_arb --output-dir=lib/l10n lib/localizations.dart

That arb file contains all key-value pairs we use in our Widgets.Initially, we can copy the content of that file and put it into intl_de.arb file in the same directory, and just translate the values into the German language.

Once we are completed with translations, we should run the following command in order to generate *.dart files which our app will directly load:

flutter pub pub run intl_translation:generate_from_arb --output-dir=lib/l10n --no-use-deferred-loading lib/localizations.dart lib/l10n/intl_*.arb

Step 5: Run the app

You can now build and run your application.

Part 2: Managing your Flutter localizations

Managing a couple of strings in two languages? Sure, that's easy. But as you add more features and expand into more markets, your app will grow to include thousands of strings across dozens of languages. Here's how to automate your Flutter localization:

Step 1: Create a project in Localizely

Once you sign up to Localizely, just go to My projects page and tap “+” button (or explore the Sample Project if you wish to get more familiar with Localizely features first). Give your project a name, and set your main and other languages. You can change the main language later if needed.

Each project gets a unique ID (you can find it in My projects page), that is needed when using API.

Step 2: Upload your files

Import your main intl_messages.arb file to Localizely. Go to Upload page, select the file, and confirm. Alternatively, you can start by adding string keys in Localizely first.

Step 3: Invite team members

Localization work is a team effort. Switch to the Contributors section by clicking the icon in the side menu and start adding teammates. Any user can be granted admin privileges, i.e. the same rights on the project as you. For non-admin contributors, you can specify per-language access to the project specifying some languages as reference (read-only) or contributable (read and update). Only admins have access to string key changes, importing, exporting, settings, etc.

Step 4: Translate

Localizely has an editor on Translations page that reminds of Excel tables commonly used for translations management. Feel free to explore the Sample project or just take a look at Getting started guide to grasp the basic concept and options.

Step 5: Download the files

The translation part is done. How to get the localization data out of Localizely and make it usable in your Flutter app?

There are 2 options:

• Option 1: Download manually

  Click Download icon in your project side menu and select Flutter ARB as the exporting format. Click Download to get the file. Then move downloaded .arb file into your project replacing the existing localization, that’s all.

  

• Option 2: Download via API

  Depending on your project deployment setup, you may want to use Localizely API – it gives you a simple way to automatically generate and download localization files.

This workflow can be simplified further by using Flutter Intl plugin explained in this guide.

Are you finding it challenging to translate Apple Strings files? This guide is designed to help. In this post, we'll explore two common methods for translating Apple Strings files, highlight typical mistakes to avoid, and offer advice to streamline and enhance your translation workflow.

Understanding Apple Strings files

Before diving into the complexities of translating Apple Strings files, it's crucial to first understand their nature and significance in creating multilingual applications for iOS and macOS.

Apple Strings files, designed specifically for localization, store localization messages. This format allows the separation of an application's text translations from its source code, simplifying app maintenance and facilitating the seamless integration of additional languages later on. It requires only minor code adjustments and the translation of textual content for new languages.

Fundamentally, Apple Strings files consist of key-value pairs. Each pair comprises a unique message identifier and its corresponding translation, enclosed in quotation marks. The identifier and translation are separated by an "=" sign, and the pair is concluded with a semicolon. To aid in translation and provide additional context, comments may be inserted before these pairs. This structure allows for a clear and organized method of presenting text that needs translation.

Learn more about the Apple .strings file format.

Different approaches for translating Apple Strings files

Translating Apple Strings files can be tackled using two principal methods. The first method involves using editors that are compatible with the Apple Strings file format, such as Xcode or Notepad++. The second method employs specialized localization tools that are specifically designed for translation tasks.

The primary distinction between these methods lies in the features they offer for translating Apple Strings files. General-purpose editors are valued for their versatility and support for a wide range of file formats. However, due to their broad design, these editors do not offer customization options tailored to specific file types or translation-related tasks. When using such editors for the translation of Apple Strings files, it is essential to have a deep understanding of the file structure and to precisely identify the segments that require translation. This process requires considerable technical knowledge. On the other hand, specialized translation tools are crafted expressly for these purposes. They minimize errors by guiding users to the specific parts of the file that need attention and offer functionalities such as screenshot integration, translation memory, and glossary management. These sophisticated features not only increase efficiency but also ensure that translations are accurate and of superior quality.

Common mistakes in Apple Strings file translation

This section explores the typical errors encountered when translating Apple Strings files:

• Invalid file syntax: Apple Strings files have a unique structure, which can present challenges, particularly for those unfamiliar with technical details, such as translators. Common syntax errors include missing quotes, equal signs, and semicolons, all of which are crucial for the structure of Apple Strings files.
• Invalid placeholders: Translating placeholders can lead to application errors. It is crucial to differentiate between the text that needs translation and the placeholders that must remain unchanged.

Using specialized tools for translating Apple Strings files not only simplifies the creation of these files but also reduces the likelihood of errors commonly associated with manual translation efforts. Adopting such tools represents a proactive approach to avoiding the aforementioned mistakes.

Automating the translation of Apple Strings files

Automating the translation of Apple Strings files can significantly boost productivity, which is crucial in today's rapidly changing tech landscape. This section outlines methods for enhancing and automating the translation process through advanced localization tools.

Streamlining translation through teamwork

Localization platforms offer a collaborative environment for managing translation projects. They enable the setup of a localization project, invitation of team members (including managers, developers, and translators), and creation of translation tasks. This allows us to focus on other essential aspects of the product while translators can complete their tasks without any problems. Additionally, these platforms help mitigate the errors common in manual translations, thus accelerating the development process.

Below, you can find an example of a translation task assignment on Localizely.

Boosting efficiency with Machine Translation

Localization tools have embraced Machine Translation, enabling quick translations of Apple Strings files, sometimes in just a few seconds. Utilizing Machine Translation followed by human post-review ensures the files are promptly ready for usage.

Below is an example of Machine Translation on Localizely.

Employing professional translation services

For those preferring professional translation services, initiating translation orders is a viable option. This approach involves selecting texts for translation, choosing target languages, and specifying the desired tone (e.g., formal or friendly). Professional translators then undertake these orders, delivering high-quality translations within a predetermined timeline.

Below is an example of a translation order on Localizely.

These advancements not only automate the translation of Apple Strings files but also improve translation quality and efficiency.

Choosing the right Strings translator tool for your project

Selecting the right Strings translator tool for working with Apple Strings files can be challenging. The optimal choice depends on your project’s specific requirements, your team’s workflow, team size, and other key factors. As a rule of thumb, if you are an individual developer who is comfortable handling Apple Strings files and only needs to make minor changes or correct a few translations, a basic text editor will often suffice. On the other hand, if you require more advanced capabilities from your Strings translator tool, such as built-in machine translation, translation memory, glossary support, seamless collaboration, or features that help maintain consistency and organization across multiple languages, a specialized Strings translator tool is the better option.

Conclusion

In this post, we provided a concise overview of how Apple Strings files can be translated. We presented two common approaches for translating these files and introduced methods that can significantly improve the translation workflow by leveraging specialized localization tools.

Localizely emerges as a leading localization platform that simplifies the translation of Apple Strings files. It features an array of functionalities designed specifically to facilitate software localization tasks. Furthermore, Localizely provides a free plan that doesn't necessitate a credit card, offering an ideal solution for smaller projects. Moreover, it is completely free for open-source projects.

Try Localizely for free.

Facing difficulties in translating ARB files? This guide is designed to offer assistance. In this blog post, we will delve into two prevalent strategies for translating ARB files. We will also highlight common pitfalls to avoid and share tips to make your translation process smoother and more efficient.

Understanding ARB files

Before delving into the intricacies of translating ARB (Application Resource Bundle) files and sharing valuable tips and best practices, it's essential to first understand what ARB files are and why their translation plays an important role in the development of multilingual applications.

ARB is a localization file format, specifically designed to hold localization messages. Using it, it is possible to separate an app's text translations from the app's source code, making the app's maintenance easier and more efficient throughout its lifespan. Furthermore, adding new languages to the application at any later point is straightforward and requires only minimal modifications to the code and the translation of the app's text for those new languages.

ARB files employ a unique structure for storing localization messages, quite similar to JSON files, but with specific rules tailored for localization purposes. At their core, ARB files are composed of translation blocks, each consisting of a localization message and metadata relevant to that message. While the structure of ARB files is consistent, minor variations may occur based on the localization library, framework, or tool being used. These variations are minimal and infrequent, typically involving distinctions in which data are considered optional and which are mandatory.

Learn more about Flutter ARB file format.

Different approaches for translating ARB files

Translating ARB files can be approached in two primary ways. The first method involves using any text editor that is compatible with text-based formats, such as Notepad, Notepad++, or TextEdit. The second method involves using specialized tools specifically developed for translation files.

The key difference between these approaches lies in the functionalities they offer for translating ARB files. Text editors are appreciated for their flexibility and their ability to support various file formats. However, due to their general-purpose design, text editors lack customization for specific file types or translation tasks. When employing text editors for ARB file translation, it's crucial to have a thorough understanding of the file structure. Equally important is the need to accurately identify the sections that require translation, a process that demands a significant level of technical expertise. In contrast, specialized translation tools are designed specifically for these tasks. They aid in avoiding errors by directing you to the exact parts of the file that need translation and provide features like screenshot integration, translation memory, and glossary management. These advanced capabilities enhance efficiency and ensure translations are precise and of high quality.

Common mistakes in ARB file translation

This section delves into common pitfalls encountered during the manual translation of ARB files:

• Invalid file syntax: ARB files feature a distinctive structure, posing hurdles especially for those not versed in technical aspects, such as translators. Typical syntax errors include the omission of quotes, curly braces, and inaccuracies in essential keywords specific to the ARB file format.
• Invalid placeholders: The translation of placeholders may trigger application malfunctions. It's imperative to distinguish between the text that requires translation and the text that must remain unaltered.
• Handling plural forms incorrectly: Different languages have different rules for pluralization. Mistakes in applying the wrong plural forms in translations can result in inaccuracies within the application.

The adoption of specialized tools for translating ARB files not only facilitates the generation of these files but also minimizes the risk of common translation errors. Implementing such tools is a proactive step towards eliminating the errors described above.

Automating the translation of ARB files

Automating the translation of ARB files can significantly enhance efficiency, a vital consideration in today's fast-evolving technological environment. Here, we discuss strategies to expedite and automate the translation process using specialized localization tools.

Streamlining translation tasks through collaboration

Localization platforms facilitate project collaboration, enabling the creation of a localization project, invitation of team members (including managers, developers, and translators), and assignment of translation tasks. This approach allows you to focus on other critical aspects of your product while translators work efficiently. Moreover, these tools help avoid common errors associated with manual translation file edits, thereby speeding up the development cycle.

An example of an assigned translation task in Localizely is provided below.

Enhancing efficiency with Machine Translation

Localization tools now integrate Machine Translation, offering rapid translation of ARB files, often within seconds. Employing Machine Translation followed by a post-translation review ensures ARB files are quickly prepared for use.

An example of Machine Translation usage in Localizely is shown below.

Opting for professional translation services

For those seeking professional translation services, placing translation orders is an excellent choice. This method allows for the specification of texts for translation, target languages, and preferred tones (e.g., formal or friendly). Skilled professionals can then be tasked with completing these translations within a predetermined timeline.

An example of placing a translation order on Localizely is illustrated below.

These enhancements not only clarify the procedures involved in automating ARB file translations but also emphasize the importance of utilizing modern tools to improve translation quality and efficiency.

Selecting the right ARB translator tool for your project

Identifying the best ARB translator tool for your project can be challenging. The optimal choice will depend on factors like your project requirements, development workflow, team size, and similar considerations. As a general rule, if you’re working independently, comfortable with the technical nature of ARB files, and only need to make minor adjustments or update a few translations, a basic text editor will likely suffice. On the other hand, if your ARB translator needs go beyond the basics, requiring features like integrated machine translation, translation memory, glossaries, collaboration capabilities, and tools to maintain consistency across multiple languages while keeping everything organized, a specialized ARB translator tool is the preferable option.

Conclusion

In this post, we provided a concise overview of how ARB files can be translated. Furthermore, we explored two prevalent strategies for handling these files and presented techniques that can greatly enhance the efficiency of the translation process through the use of dedicated localization tools.

Localizely stands out as a comprehensive localization platform that streamlines the translation of ARB files. It boasts a wide range of features specifically tailored to ease the tasks associated with software localization. Additionally, Localizely offers a free plan that does not require a credit card, making it an excellent choice for smaller-scale projects. Moreover, it is entirely free for open-source projects.

Try Localizely for free.

Localizely conducted research focused on the state of software localization in 2023. The objective of this research was to identify current trends and practices in the software localization field and to recognize areas that need improvement. All the gathered data has been processed and is presented in this Localization Statistics 2023 report.

Survey respondents

The Localizely survey gathered responses from 2,516 participants from different occupational fields and hailing from various regions around the world.

Departments

In the survey, most of the participants were from the Marketing, Product, and Localization departments. Such a composition is not surprising and it closely reflects the usual involvement of these departments in the software localization process.

• Marketing
• Product
• Localization
• Engineering
• Management
• Other

Continents

In terms of regional representation, the majority of the survey's participants hailed from Europe, Asia, and North America.

• Europe - 47%
• Asia - 26%
• North America - 15%
• South America - 6%
• Australia / Oceania - 3%
• Africa - 3%

Survey results

Here are the results of the 2023 survey on localization.

Number of target languages

Over half of the survey participants (54%) indicated that their projects typically encompass 2 to 10 target languages.

The number of languages used in a project can be influenced by various criteria, including the targeted audiences, the project's nature, the available resources, and other factors. These survey findings are not unexpected, as they appear to be some kind of collective mean of these diverse determinants.

• 2 - 10 languages - 54%
• 11 - 20 languages - 25%
• 21 - 49 languages - 16%
• 50+ languages - 5%

Popular target languages

Below is a compiled list of the 10 most popular target languages, organized in a descending sequence of popularity. At the forefront is German, closely followed by Spanish and French.

• German (most popular)
• Spanish
• French
• Italian
• Arabic
• Portuguese
• Russian
• Dutch
• Chinese
• Japanese

Translating for regional languages

A majority of the respondents (62%) stated they mostly translate into standard language versions (e.g., English, Spanish) rather than regional language variations (such as English as spoken in the U.S. or Spanish as spoken in Mexico).

• Yes - 38%
• No - 62%

Translation tools

When asked about their preferred tools for translation, the vast majority (76%) reveal they utilize some kind of TMS.

• TMS - 76%
• Excel sheet or similar - 24%

Work with a language service provider

Working with language service providers is common among the participants, with 61% acknowledging this practice.

• Yes - 61%
• No - 39%

Machine Translation usage

Opinions on machine translation vary. Approximately 41% of surveyed participants do not utilize machine translation tools. On the other hand, the rest, who do use these tools, generally perform proofreading after the translation process.

• Yes, without proofreading - 22%
• Yes, but always with proofreading - 37%
• No - 41%

Localization priority

Regarding the prioritization of localization in their companies, a significant portion of the participants (66%) expressed the belief that it is adequately prioritized.

• Yes - 66%
• No - 34%

Localization improvement

When it comes to the aim of improving localization in 2024, respondents mostly expressed a preference for enhancing the simplicity of workflows through some form of automation, and for improving quality, level of scalability, and speed.

• Simplicity of workflows
• Quality (level, consistency, ...)
• Level of scalability
• Speed
• Efficiency
• Cost

Conclusion

The Localization Statistics 2023 report provides a comprehensive overview of the latest trends in software localization, including popular languages, tools, and practices. Moreover, it identifies key areas that need improvement. As we look ahead to 2024, we hope that the integration of AI in software localization will introduce new advancements and further enhance the localization process.

Struggling with XLIFF translation? This guide is here to help. In this blog post, we will explore the two most common approaches to translating XLIFF files. Additionally, we'll highlight common pitfalls in XLIFF file translation and offer practical tips to improve and streamline your translation process.

Exploring different ways to translate XLIFF files

There are two common approaches to translating XLIFF files. The first involves using general-purpose text editors that support the XLIFF format, such as Notepad, Notepad++, or TextEdit. The second approach uses specialized translation software, which is specifically designed for managing and processing translation files.

To better understand the differences between these options, consider the following:

Text editors are versatile tools that can modify a wide variety of file types. However, they are not tailored for any specific format or task, making them more suitable for users with technical expertise. While it is possible to translate XLIFF files with a text editor, this requires a solid understanding of the XLIFF structure and the ability to identify and edit the appropriate sections for translation.

Specialized translation software, on the other hand, is purpose-built for handling translation tasks. These tools offer features such as translation memory, glossary management, screenshot support, and more, enhancing translation efficiency, streamlining workflows, and reducing the likelihood of errors.

Common mistakes in XLIFF file translation

Here, we outline some of the most common errors encountered when manually translating XLIFF files:

• Invalid file syntax: Since XLIFF files are XML-based, editing them can be challenging for non-technical users, such as translators. Common syntax errors include missing closing tags, incorrectly nested elements, and other XML-related issues.
• Invalid placeholders: Translating placeholders can result in errors when the file is used in the application. It is crucial to distinguish between content that should be translated and content that must remain unchanged.
• Use of unsupported tags: There are two commonly used versions of the XLIFF file format: 1.2 and 2.0. Make sure you are only using tags that are supported in your XLIFF file version.

Using specialized translation tools helps prevent the errors mentioned above, as these tools automatically generate valid XLIFF files and include features that protect you from making accidental mistakes during translation.

Translate XLIFF files online

Online translation tools facilitate seamless collaboration between translators and other team members, significantly enhancing both the speed and quality of translations. Additionally, these tools support the automatic generation of XLIFF files, which effectively reduces errors typically associated with manual editing and file exchanges, thereby accelerating overall development.

Moreover, online translation tools offer multiple methods to streamline translation workflows. Below are some of the most commonly used techniques:

Delegating translation tasks

Online translation tools enable the creation and assignment of translation tasks to translators. This approach makes it easy to track translation progress, optimize workflows to meet specific needs, and allows team members to focus on other critical aspects of the product.

Below, you can see an example of an assigned translation task in Localizely.

Utilizing Machine Translation

Online translation tools support machine translation, enabling the rapid translation of XLIFF files, often within seconds. When machine translation is complemented by a quick post-translation review, it ensures that the translated XLIFF files are ready for use in a very short time.

Below is an example of utilizing machine translation in Localizely.

Placing translation orders

In some cases, you may require professional translation services. Online translation tools support this as well, allowing you to create translation orders and assign them to skilled professionals who can deliver translations of XLIFF files within specified timeframes.

Below is an example of placing a translation order in Localizely.

Selecting the right XLIFF translator tool for your project

Identifying the best XLIFF translator tool for your project can sometimes be challenging. The decision will mainly depend on factors like your project requirements, workflow, team size, and other similar considerations. As a general rule, if you’re working independently, are comfortable handling the technical aspects of XLIFF files, and only need to make small adjustments or update some translations, a simple text editor should suffice. On the other hand, if you require more advanced capabilities from your XLIFF translator tool, such as integrated machine translation, translation memory, a glossary, team collaboration features, and mechanisms to maintain consistency across multiple languages while keeping your work well organized, a specialized XLIFF translator tool would be the better option.

Conclusion

In this blog post, we provided a concise overview of XLIFF file translation. We discussed two common methods for translating these files and introduced techniques to enhance workflow efficiency using advanced localization tools.

Localizely stands out as a localization platform that streamlines XLIFF file translation and offers a variety of features specifically designed for software localization. Localizely also offers a free plan (no credit card required), which is ideal for smaller projects, and is completely free for open-source projects.

Try Localizely for free.

If you're struggling to understand how to translate PO files, this guide can help. In this blog post, we'll explore two common methods for translating PO files. We'll also highlight frequent mistakes to avoid and offer tips to streamline and improve your translation process.

Understanding PO, MO, and POT files

Working with PO files does not require knowledge of MO or POT files. However, having a basic understanding of all three formats can be beneficial, as it helps improve the management of translations in applications that utilize PO files.

So, what are the key differences between these data formats? PO, MO, and POT files are all used in software localization, but each serves a unique purpose at a different stage in the localization process:

• POT (Portable Object Template) files are generated by extracting localization messages from an application's source code using specialized localization tools. These files serve as templates for translation.
• PO (Portable Object) files are created by copying and renaming a POT file. Translators use these files to provide translations for the extracted messages. Each language requires a separate PO file.
• MO (Machine Object) files are binary files generated by compiling PO files. These are intended for use by the application at runtime, allowing for efficient loading of translations.

Different approaches to translating PO files

There are two common approaches to translating PO files. The first involves using a text editor that supports this file format, such as Notepad, Notepad++, or TextEdit. The second approach is to use specialized tools designed specifically for working with translation files.

If you're curious about the differences between text editors and specialized translation tools, here’s a breakdown:

Text editors are versatile programs that allow you to edit a variety of file formats. However, they are fairly generic and are not specifically optimized for translating PO files. Using a text editor to translate PO files requires a good understanding of the file structure and the ability to identify which sections need translation. Generally, text editors are best suited for users with some technical expertise.

In contrast, specialized translation tools are purpose-built for translation tasks and offer features such as translation memory, glossary management, screenshot integration, and other functionalities that enhance the translation experience. These tools not only streamline the translation process but also help reduce common errors, resulting in a more efficient and accurate workflow.

Common mistakes in PO file translation

Below, we'll explore some of the most common errors encountered during manual PO file translation:

• Invalid file syntax: PO files have a unique structure, which can present editing challenges, especially for non-technical individuals such as translators. Common syntax errors include missing quotes and typos in essential keywords like msgid and msgstr.
• Invalid placeholders: Accidentally translating placeholders can cause application errors. It is crucial to distinguish between text that needs translation and text that must remain unchanged.
• Improper handling of plural forms: Languages have different pluralization rules. Using incorrect plural forms in translations can result in displaying an inaccurate translation.

Utilizing specialized translation tools not only automates PO file generation but also helps prevent accidental translation errors. Using these tools can effectively mitigate the risks mentioned above.

Automating the translation of PO files

Automating routine tasks can bring significant benefits, especially in today’s rapidly advancing technological landscape. In this section, we will outline methods to help speed up and automate parts of the translation workflow by employing specialized localization tools.

Delegating translation tasks

Most localization tools support project collaboration. With these platforms, you can set up a localization project, invite team members (such as managers, developers, and translators), and create translation tasks. Effective delegation allows you to focus on other critical aspects of product development while translators work efficiently. In addition to fostering collaboration, these tools help prevent common errors associated with manual editing of translation files, thereby accelerating the development cycle.

Below, you can see an example of an assigned translation task on Localizely.

Utilizing Machine Translation

Localization tools often support machine translation, enabling fast translation of PO files, often within seconds. When combined with a post-translation review process, you can have ready-to-use translated PO files in a very short time.

Below is an example of utilizing machine translation on Localizely.

Placing translation orders

If you prefer professional translation services, placing translation orders is a valuable option. You can specify the texts for translation, target languages, and the required tone (such as formal or friendly). These tasks can then be assigned to skilled professionals, who will complete them within a specified timeframe.

Below is an example of placing a translation order on Localizely.

Choosing the right PO translator tool for your project

Finding the ideal tool for translating PO files isn’t always straightforward. The choice largely depends on your project’s needs, development workflow, team size, and similar factors. Generally, a simple guideline can be helpful. If you are working solo, are comfortable with the technical aspects of PO files, and just need to make minor corrections or update a few translations, a basic text editor is probably sufficient. However, if you need advanced features from your PO translator, such as built-in machine translation, translation memory, a glossary, the ability to collaborate with other team members, and ways to ensure consistency across multiple languages while keeping everything organized and easy to track, a specialized PO translator tool is a better choice.

Conclusion

In this post, we briefly explained the process of translating PO files. We also discussed two common approaches for working with these files and introduced methods to significantly automate and accelerate the translation workflow using specialized localization tools.

Localizely is a localization platform that simplifies the translation of PO files. It offers a range of features designed to facilitate software localization tasks. Localizely includes a free plan that doesn’t require a credit card, making it ideal for smaller projects, and it is completely free for open-source projects.

Try Localizely for free.

In today's digital world, internationalization (i18n) is a crucial aspect of developing sophisticated web applications that can reach a global audience. Angular stands out in this domain, not only as a comprehensive framework widely utilized for web application development but also for its solid support for internationalization. This blog post will focus on explaining the process of internationalizing a web application using the Angular framework. We will specifically walk you through the steps of using the @angular/localize package. This is the official and most popular method introduced in Angular 9 for making your Angular application globally accessible. Moreover, we will delve into a comprehensive process encompassing content preparation for localization, its extraction, translation, and ultimately, its seamless reintegration into your app. So let's begin this journey.

All code samples used in this post are available on the GitHub repo.

Create a new Angular project

Let's begin by creating a new Angular project using Angular CLI.

Install Angular CLI globally:

 npm install -g @angular/cli@17.0.1

Create a new Angular project:

ng new angular-i18n-example

This tutorial is based on the latest Angular version available, 17.0.4, as of the time of writing. To follow along without any hitches, it's best to use the same version.

Add the localize package

To use Angular's localization features, you will need to add the @angular/localize package to your project. For that, let's open the terminal in the root of the project and run the following command:

ng add @angular/localize

This command will add @angular/localize as a development dependency and update several other files in the project.

Adjust the content for localization

To localize content, we first need to add some. For that purpose, we are going to update the app component files.

The app.component.html file:

<div>
  <p i18n="Simple message example@@message.simple">A simple message.</p>

  <p i18n="Argument message example@@message.argument">Hi, {{ name }}! 👋</p>

  <p i18n="Plural message example@@message.plural">{count, plural, one {{{count}} item} other {{{count}} items}}</p>

  <p i18n="Gender message example@@message.gender">{gender, select, male {Mr {{ name }}} female {Mrs {{ name }}} other {Client {{ name }}}}</p>

  <p i18n="Formatted number message example@@message.number-format">Formatted number: {{ amount | number: ".2" }}</p>

  <p i18n="Formatted date message example@@message.date-format">Formatted date: {{ currentDate | date: "fullDate" }}</p>

  <div>
    <ng-container>{{ footerMessage }}</ng-container>
  </div>
</div>

By adding i18n attributes to the component template above, we mark the content for localization. i18n is a custom attribute recognized by Angular. Its value is optional and, if provided, should follow the order: meaning|description@@id. Each of these value parts is optional.

A concise overview of each part:

• meaning – Indicates the meaning or intent of a text message in a specific application context, providing essential guidance to translators for consistent and accurate interpretation of messages.
• description – Provides additional information for translators to ensure a more accurate translation.
• | – Acts as the separator, distinguishing meaning from description in the text.
• @@id – Denotes the user-defined ID of the message.

The posted example contains messages using the ICU Plural and ICU Select message syntax. If you are unfamiliar with ICU syntax, please refer to the dedicated post about ICU syntax for more details.

To display the above-defined template successfully, you will need to update the app.component.ts file as well. This file not only contains required data, but also showcases an example of localization in the component (see footerMessage). The direct utilization of the $localize function makes this localization possible. To incorporate optional parameters such as meaning, description, and @@id (as used in the template file), prepend them to the text message, wrapped with colons.

The app.component.ts file:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})
export class AppComponent {
  name: string = 'John';
  count: number = 5;
  gender: string = 'male';
  amount: number = 7.5;
  currentDate: number = Date.now();

  company: string = 'Localizely';
  footerMessage: string = $localize`:Component argument message example@@message.component-argument:Made with ❤️ by ${this.company}`;
}

Localizing content within the ng-container

The <ng-container> elements can also incorporate an i18n attribute. This enables seamless localization without the need to introduce additional DOM elements into the application.

<ng-container i18n>Your message</ng-container>

Localizing the value of element attribute

To localize values of element attributes, you can use i18n-<attribute> attributes. Here, <attribute> should correspond to the name of the attribute you want to localize. For example, i18n-title for the title attribute. These attributes accept the same optional value as the i18n attribute.

<p title="Your title" i18n-title>Your message</p>

Locale specific formatting with pipes

Pipes are simple functions designed to transform data from one form to another. In the context of software localization, they facilitate the usage of properly formatted data, ensuring alignment with the currently active locale on the page. Below are some of the most common use cases.

Format a date value using DatePipe:

{{ today | date }}

Example for American English: Nov 21, 2023
Example for French: 21 nov. 2023

Format a number into a currency string using CurrencyPipe:

{{ amount | currency }}

Example for American English: $123,456.00
Example for French: 123 456,00 $US

Format a number into a decimal number string using DecimalPipe:

{{ count | number }}

Example for American English: 123,456.78
Example for French: 123 456,78

Format a number into a percentage string using PercentPipe:

{{ value | percent }}

Example for American English: 76%
Example for French: 76 %

Custom message IDs

While message IDs are auto-generated during the extraction phase, there are situations where using custom or user-defined message IDs offers distinct benefits. Here, we delve into the advantages and drawbacks of opting for custom message IDs.

Pros:

• User-defined message IDs often carry inherent meaning and context, offering a stark contrast to their automatically generated counterparts. For example, page.home.title is more intuitive than a string like ba0cc104d3d69b....
• User-defined message IDs streamline the search and filtering process in translation tools, offering a clear advantage over automatically generated ones. For example, knowing a message's placement on the Home page allows for an efficient search using page.home.
• Altering the text of a source message doesn't necessitate the generation of a new message ID. This feature is particularly useful when using translation tools, as it prevents the accumulation of obsolete messages in your database.

Cons:

• A significant downside is the requirement to manually manage all message IDs, which can be labor-intensive.
• Employing the same message ID for distinct messages in different contexts can lead to confusion and errors, such as one message unintentionally overriding another. For instance, using common.back for both 'Back' and 'Go back' could lead to one of these messages being inadvertently overwritten.

Extract marked content for localization

To extract previously marked content, run the following CLI command from the project root:

ng extract-i18n --output-path src/locale

Note that it is good practice to keep all localization files in one place. For that purpose, we use the --output-path command option. If everything went well, you should find the messages.xlf file in the src/locale directory. This file serves as the source language file, which will be used as a basis for creating other XLIFF (XML Localization Interchange File Format) files.

Also, extract-i18n supports extraction in different file formats. In this tutorial, we use the default format, the xlf. You can find more information regarding extract-i18n on its doc page.

By default, Angular uses American English (en-US) as the source locale. To change this, you will need to update the project configuration (i18n option within the angular.json file).

Translate XLIFF files

Now that we have successfully extracted the source localization messages, we need to translate them into other languages for our app. In our case, this means French. To do this, we'll copy the messages.xlf file and rename it to messages.fr.xlf. This new file will contain the French translations. The procedure for adding any new language in the future will be the same. Additionally, keeping the locale code in the file name is a good practice. This approach simplifies project navigation and the implementation of future changes.

The messages.xlf file:

<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
  <file source-language="en-US" datatype="plaintext" original="ng2.template">
    <body>
      <trans-unit id="message.simple" datatype="html">
        <source>A simple message.</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/app.component.html</context>
          <context context-type="linenumber">2,4</context>
        </context-group>
        <note priority="1" from="description">Simple message example</note>
      </trans-unit>
      <trans-unit id="message.argument" datatype="html">
        <source>Hi, <x id="INTERPOLATION" equiv-text="{{ name }}"/>! 👋</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/app.component.html</context>
          <context context-type="linenumber">4,6</context>
        </context-group>
        <note priority="1" from="description">Argument message example</note>
      </trans-unit>
      <trans-unit id="message.plural" datatype="html">
        <source>{VAR_PLURAL, plural, one {<x id="INTERPOLATION"/> item} other {<x id="INTERPOLATION"/> items}}</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/app.component.html</context>
          <context context-type="linenumber">6,8</context>
        </context-group>
        <note priority="1" from="description">Plural message example</note>
      </trans-unit>
      <trans-unit id="message.gender" datatype="html">
        <source>{VAR_SELECT, select, male {Mr <x id="INTERPOLATION"/>} female {Mrs <x id="INTERPOLATION"/>} other {Client <x id="INTERPOLATION"/>}}</source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/app.component.html</context>
          <context context-type="linenumber">8,10</context>
        </context-group>
        <note priority="1" from="description">Gender message example</note>
      </trans-unit>
      <trans-unit id="message.number-format" datatype="html">
        <source>Formatted number: <x id="INTERPOLATION" equiv-text="{{ amount | number : &quot;.2&quot; }}"/></source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/app.component.html</context>
          <context context-type="linenumber">10,12</context>
        </context-group>
        <note priority="1" from="description">Formatted number message example</note>
      </trans-unit>
      <trans-unit id="message.date-format" datatype="html">
        <source>Formatted date: <x id="INTERPOLATION" equiv-text="{{ currentDate | date : &quot;fullDate&quot; }}"/></source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/app.component.html</context>
          <context context-type="linenumber">12,15</context>
        </context-group>
        <note priority="1" from="description">Formatted date message example</note>
      </trans-unit>
      <trans-unit id="message.component-argument" datatype="html">
        <source>Made with ❤️ by <x id="PH" equiv-text="this.company"/></source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/app.component.ts</context>
          <context context-type="linenumber">20</context>
        </context-group>
        <note priority="1" from="description">Component argument message example</note>
      </trans-unit>
    </body>
  </file>
</xliff>

Below, you can find the updated content of the messages.fr.xlf file. We've updated the file element with the target-language attribute, and extended each trans-unit element with the target element (translation).

The messages.fr.xlf file:

<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
  <file source-language="en-US" target-language="fr" datatype="plaintext" original="ng2.template">
    <body>
      <trans-unit id="message.simple" datatype="html">
        <source>A simple message.</source>
        <target>Un message simple.</target>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/app.component.html</context>
          <context context-type="linenumber">2,4</context>
        </context-group>
        <note priority="1" from="description">Simple message example</note>
      </trans-unit>
      <trans-unit id="message.argument" datatype="html">
        <source>Hi, <x id="INTERPOLATION" equiv-text="{{ name }}"/>! 👋</source>
        <target>Salut, <x id="INTERPOLATION" equiv-text="{{ name }}"/>! 👋</target>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/app.component.html</context>
          <context context-type="linenumber">4,6</context>
        </context-group>
        <note priority="1" from="description">Argument message example</note>
      </trans-unit>
      <trans-unit id="message.plural" datatype="html">
        <source>{VAR_PLURAL, plural, one {<x id="INTERPOLATION"/> item} other {<x id="INTERPOLATION"/> items}}</source>
        <target>{VAR_PLURAL, plural, one {<x id="INTERPOLATION"/> article} other {<x id="INTERPOLATION"/> articles}}</target>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/app.component.html</context>
          <context context-type="linenumber">6,8</context>
        </context-group>
        <note priority="1" from="description">Plural message example</note>
      </trans-unit>
      <trans-unit id="message.gender" datatype="html">
        <source>{VAR_SELECT, select, male {Mr <x id="INTERPOLATION"/>} female {Mrs <x id="INTERPOLATION"/>} other {Client <x id="INTERPOLATION"/>}}</source>
        <target>{VAR_SELECT, select, male {Monsieur <x id="INTERPOLATION"/>} female {Mme <x id="INTERPOLATION"/>} other {Cliente <x id="INTERPOLATION"/>}}</target>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/app.component.html</context>
          <context context-type="linenumber">8,10</context>
        </context-group>
        <note priority="1" from="description">Gender message example</note>
      </trans-unit>
      <trans-unit id="message.number-format" datatype="html">
        <source>Formatted number: <x id="INTERPOLATION" equiv-text="{{ amount | number : &quot;.2&quot; }}"/></source>
        <target>Numéro formaté: <x id="INTERPOLATION" equiv-text="{{ amount | number : &quot;.2&quot; }}"/></target>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/app.component.html</context>
          <context context-type="linenumber">10,12</context>
        </context-group>
        <note priority="1" from="description">Formatted number message example</note>
      </trans-unit>
      <trans-unit id="message.date-format" datatype="html">
        <source>Formatted date: <x id="INTERPOLATION" equiv-text="{{ currentDate | date : &quot;fullDate&quot; }}"/></source>
        <target>Date formatée: <x id="INTERPOLATION" equiv-text="{{ currentDate | date : &quot;fullDate&quot; }}"/></target>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/app.component.html</context>
          <context context-type="linenumber">12,15</context>
        </context-group>
        <note priority="1" from="description">Formatted date message example</note>
      </trans-unit>
      <trans-unit id="message.component-argument" datatype="html">
        <source>Made with ❤️ by <x id="PH" equiv-text="this.company"/></source>
        <target>Fabriqué avec ❤️ par <x id="PH" equiv-text="this.company"/></target>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/app.component.ts</context>
          <context context-type="linenumber">20</context>
        </context-group>
        <note priority="1" from="description">Component argument message example</note>
      </trans-unit>
    </body>
  </file>
</xliff>

Merge translations into the app

Once we’ve translated all localization messages, we should merge everything back into the app. In this example, we use an ahead-of-time (AOT) compilation that converts Angular HTML and TypeScript code into efficient JavaScript code. As of Angular 9, AOT is the default option for both development and production builds. To build a separate distributable copy of the app for each locale, we need to update the project configuration accordingly.

By setting the i18n project option, we define the locales of the project. In other words, we specify the source code's locale (sourceLocale) and the additional locales created by translating the initial XLIFF file (locales). The rest of the configuration pertains to the build and serve phases, which will help run the localized app.

The angular.json file:

{ 
  ... 
  "projects": { 
    "angular-i18n-example": { 
      ... 
      "i18n": {
        "sourceLocale": "en-US",
        "locales": {
          "fr": {
            "translation": "src/locale/messages.fr.xlf"
          }
        }
      },
      "architect": { 
        "build": { 
          ... 
          "options": {
            ...
            "localize": true
          }, 
          "configurations": { 
            ... 
            "en-US": { 
              "localize": ["en-US"] 
            }, 
            "fr": { 
              "localize": ["fr"] 
            } 
          }, 
          ... 
        }, 
        "serve": { 
          ... 
          "configurations": { 
            ... 
            "en-US": {
              "buildTarget": "angular-i18n-example:build:development,en-US"
            },
            "fr": {
              "buildTarget": "angular-i18n-example:build:development,fr"
            }
          }, 
          ... 
        }, 
        ... 
      } 
      ... 
    } 
    ... 
  } 
  ... 
}

Due to deployment complexity and the goal of reducing rebuild time, the development server permits only one locale to run at a time. To use the project in development mode, replace <LOCALE> with either en-US or fr.

ng serve --configuration=<LOCALE> --open

Add language switcher

Language selection in web applications can be managed through several methods. One approach is configuring the server to automatically redirect HTTP requests based on the Accept-Language HTTP header's value. Alternatively, the server can present the app in the default language initially, allowing users to select their preferred language. A hybrid approach combines elements of both automatic and user-driven language selection.

Below is a straightforward example demonstrating how users can switch languages after the app's initial load.

The app.component.html file:

<div>
  <div class="lang-picker">
    <div *ngFor="let locale of locales">
      <a href="/{{ locale.localeCode }}/">
        {{ locale.label }}
      </a>
    </div>
  </div>

  <p i18n="Simple message example@@message.simple">A simple message.</p>

  <p i18n="Argument message example@@message.argument">Hi, {{ name }}! 👋</p>

  <p i18n="Plural message example@@message.plural">{count, plural, one {{{count}} item} other {{{count}} items}}</p>

  <p i18n="Gender message example@@message.gender">{gender, select, male {Mr {{ name }}} female {Mrs {{ name }}} other {Client {{ name }}}}</p>

  <p i18n="Formatted number message example@@message.number-format">Formatted number: {{ amount | number : ".2" }}</p>

  <p i18n="Formatted date message example@@message.date-format">Formatted date: {{ currentDate | date : "fullDate" }}</p>

  <div>
    <ng-container>{{ footerMessage }}</ng-container>
  </div>
</div>

The app.component.ts file:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';

interface Locale {
  localeCode: string;
  label: string;
}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})
export class AppComponent {
  locales: Locale[] = [
    { localeCode: 'en-US', label: 'English' },
    { localeCode: 'fr', label: 'Français' },
  ];

  name: string = 'John';
  count: number = 5;
  gender: string = 'male';
  amount: number = 7.5;
  currentDate: number = Date.now();

  company: string = 'Localizely';
  footerMessage: string = $localize`:Component argument message example@@message.component-argument:Made with ❤️ by ${this.company}`;
}

The presented language selection is not operational in development mode because of limitations imposed by the development server.

Handle text directionality

Text directionality is a crucial aspect of software localization. While many languages adopt a Left-to-Right (LTR) orientation, which often doesn't require special handling, the significance of text direction becomes paramount for languages that use a Right-to-Left (RTL) orientation.

Angular proactively manages text directionality by setting the appropriate direction on the html element, depending on the language displayed on the page. Since HTML elements inherit directionality from their parent elements unless explicitly defined, this approach is mostly effective. Nevertheless, it is recommended to implement flexible layouts in your applications. This practice helps prevent layout issues that may arise due to changes in text directionality.

Access locale

Occasionally, you may encounter situations where it's necessary to implement logic specific to the locale currently active in your app. Fortunately, accessing this locale is straightforward — you can inject it directly into the component. The example below demonstrates how to do that.

import { Component, Inject, LOCALE_ID } from '@angular/core';

...
export class AppComponent {
  constructor(@Inject(LOCALE_ID) public locale: string) {}

  ...
}

Conclusion

In this post, we explore the @angular/localize package and demonstrate how to use it for internationalizing Angular applications. A significant challenge in this process often lies in translating XLIFF files. These files, packed with extensive data, can pose comprehension difficulties for translators. Moreover, given their nature as XML files, manual edits risk introducing issues such as invalid file syntax. Professional tools offer a robust solution to these challenges. Among these, the Localizely platform stands out for its support of various localization formats, including XLIFF. It simplifies the process of uploading and downloading translation files, enables seamless collaboration with team members, and facilitates setting up Over-the-air translation updates through S3 integration, among other features.

Try Localizely for free.

Multilingual fonts, also known as international or global fonts, are typefaces designed to support a broad spectrum of characters and scripts from various languages and cultures worldwide. They are a vital component of software development, especially in the era of globalization, as applications are commonly used by people speaking different languages.

Why is it important to use multilingual fonts?

Multilingual fonts play a crucial role in software development and localization as they allow for a seamless and accurate representation of text in multiple languages. In our globalized world, software applications are often used by people who speak various languages and use different writing scripts. Fonts supporting multiple languages ensure the correct display of all characters, including special characters and accents, thereby reducing misunderstandings and enhancing user experience.

Additionally, multilingual fonts help maintain consistent design across languages, contributing to a coherent brand image in the global market.

Investing in multilingual fonts is crucial for developing accessible and user-friendly software for a global audience. It helps avoid misinterpretation, enhances user experience, and upholds a consistent brand image.

What to consider when choosing a multilingual font

Selecting the right multilingual font is a complex yet vital task, as it involves balancing multiple factors to meet your project's specific needs. When choosing, consider these critical aspects:

• Language support: Opt for a font that covers the character sets of all the languages and scripts your project encompasses. While some fonts are limited to Latin characters, others extend to Cyrillic, Greek, Arabic, or various Asian scripts.

• Design consistency: Seek a font offering consistent design across diverse scripts. Such uniformity is essential for a unified appearance in your project. Verify that characters in different scripts share comparable weights, proportions, and style elements.

• Legibility and readability: Focus on fonts that offer clear readability across all targeted languages, considering the intricacies of character design and sizing. For example, fonts for Asian scripts may require larger sizes due to character complexity.

• Licensing and usage rights: Understand the licensing terms of your chosen font. Some are free for personal use but necessitate a commercial license for broader applications.

• Technical compatibility: Ensure your selected font is compatible with the software and platforms in your workflow. Note that some fonts may face rendering issues in certain web browsers or operating systems.

• Font styles and weights: Assess the range of styles (e.g., italic, bold) and weights (e.g., light, regular, bold) available in the font. A diverse selection can significantly enhance design versatility, especially in multilingual settings.

• Cultural appropriateness: Be conscious of the cultural implications and suitability of the font. Different styles can convey varied meanings across cultures.

• Aesthetic appeal: Choose a font that aligns with the aesthetic objectives of your project, ensuring it complements the overall design theme and tone.

To summarize, selecting a multilingual font demands a thorough evaluation of these key factors. This careful consideration will ensure the font not only fulfills your project’s requirements but also enriches the overall user experience. Invest time in exploring the available options to make a well-informed decision.

Best multilingual fonts

Here are some of the most popular multilingual fonts, along with brief details about each:

Google Noto

Google Noto is a collection of fonts created by Google and designed to be used in more than 1,000 languages and 150 writing systems. The name Noto is derived from the phrase “no tofu”, a reference to how the font avoids displaying the dreaded tofu symbols. The Google Noto fonts come in a variety of weights and styles and can be used for both personal and commercial purposes without any cost.

Gill Sans Nova

Gill Sans Nova is a paid typeface created by Monotype Studio as an expansion of the original Gill Sans typeface, which became popular among designers after its initial release in 1928. It is a sans serif font that contains 43 fonts and supports Latin, Greek, and Cyrillic characters.

Open Sans

Open Sans is a humanist sans serif typeface designed by Steve Matteson. It is available for free for personal and commercial projects. It contains 897 characters that can comfortably support the Latin, Greek, and Cyrillic alphabets.

Restora

Designed by Nasir Uddin, Restora is a remarkable multilingual typeface that is able to support Western European, Central/Eastern European, Baltic, Turkish, and Romanian languages. It includes more than 730 glyphs! This serif typeface features ligatures, small caps, stylish alternates, and other OpenType features to enhance the appearance of your website text. It is a paid typeface.

Misto

Taking inspiration from the city of Slavutych in Ukraine, it is no surprise that the typeface "Misto" means "city" in Ukrainian. Its wide font with reverse contrast draws reference from Slavutych’s low, wide buildings to create a distinctive look. Supporting both Latin and Cyrillic, Misto is a great choice for websites aiming to reach visitors who use these alphabets. Additionally, Misto is free to use for both personal and commercial purposes!

Dominicale

Dominicale, a typeface created by Altiplano, is inspired by the script found in medieval books and the rustic text of early printed works, as well as the details of woodcutting art. Its "crafty flavor" has made it a favorite among humanists. It supports more than 200 languages, including English, French, and German. It is a paid typeface.

Suisse

The Suisse font family is a utilitarian set made up of six collections and 55 styles that support Latin alphabets. If you need Cyrillic and Arabic alphabet support, the Suisse Int’l and Suisse Screen collections are your best bet. It is a paid typeface, but there is also a trial version, so you can try it for free.

Argesta

Atipo Foundry created Argesta, a serif typeface that is elegant and timeless. Taking inspiration from haute couture, Argesta adds a luxurious feel to websites. It offers a Latin Extended-A character set. You can download the regular style of Argesta for free, while the full family is available on a “pay what you want” basis.

Helvetica World

Helvetica is a well-known typeface around the world. Its newest version, Helvetica World, supports a large number of languages, including Romanian, Serbian, Polish, and Turkish. The package comes with four fonts - Regular, Italic, Bold, and Bold Italic, and the price varies depending on the license.

Grotte

Grotte is a perfect choice for adding an elegant touch to minimalist website designs. It comes in three styles - light, regular, and bold - and features geometric outlines and graceful curves. Despite its simple look, Grotte offers generous language support for several different languages, including Spanish, Portuguese, German, Danish, French (including Canadian French), and even the Cyrillic alphabet.

These are just a few examples of popular multilingual fonts. Each font offers different features and design elements, so it's important to choose the one that best fits your needs and project requirements.

Conclusion

In summary, the importance of multilingual fonts in software localization cannot be overstated, as they are essential for ensuring accurate text representation across diverse languages. This post has delved into the essence and importance of these fonts, also spotlighting several widely-used options. Armed with this knowledge, you can more effectively select the ideal font for your projects.

If you're looking to take your multilingual tasks to the next level, consider using the Localizely platform. It will help you to speed up localization, track progress, and ensure accuracy with tools like the glossary, translation memory, and real-time collaboration. Streamline your workflow and reach a global audience with high-quality multilingual content.

Try Localizely for free.

Have you ever bumped into the idea of multilingual digital content? If you're engaged in web development or content creation, I bet this has crossed your mind at some point in time. But what's the real story behind multilingual content? Are there any benefits? How difficult can it be to manage content in different languages? There are lots of questions to consider. In this post, we will try to answer some of them.

How do most websites handle digital content?

Digital content is one of the most important things when it comes to your business's presence on the internet. It comprises text, images, videos, and other multimedia elements that shape the user experience. However, managing such content is not easy. Not everyone possesses programming skills or has access to tech-savvy professionals. This is where a CMS (Content Management System) becomes invaluable. A CMS empowers users to create, edit, organize, and publish digital content on websites without delving into direct coding. Given these benefits, it's easy to see why so many businesses trust CMSs to power their websites.

What is a CMS?

A Content Management System (CMS) is software designed for the easy creation, management, and updating of digital content on websites. It allows users, often without technical expertise, to manage content and other aspects of a website such as its theme, layout, and the like. The CMS often includes intuitive editors that are similar to familiar word processing tools. Beyond this, CMSs support various roles, from admins to content editors, providing appropriate rights for each type of user. Moreover, most of them support plugins that allow you to extend their existing functionalities, thereby better meeting users' needs.

It's worth noting that in light of the growing popularity of mobile apps and single page applications (SPA), many CMSs have adapted their capabilities. While they continue to support the traditional content management approach with presentation layers, they have also embraced a 'headless' mode of operation. In this headless approach, CMSs focus exclusively on content management and, using APIs, allow content to be retrieved for various platforms like mobile apps, desktop apps, websites, and more.

What is a multilingual CMS?

Multilingual CMS can be viewed as an advanced version of a regular CMS, designed to handle content in multiple languages. Given this specialized function, the system should come equipped with:

• Language flexibility: There shouldn’t be any limitations on languages, fonts, or any elements that might prevent adding new languages.
• Website structure preservation: This means easily making changes like updating navigation, altering links, adding language-specific page identifiers, and integrating a language switcher without disrupting the site's overall layout.
• Language specific customizations: Since not all languages read from left to right, the CMS should cater to variations in text direction. Additionally, it should adjust date, time, and number displays based on the chosen language.
• SEO adaptabilities: The system should simplify the addition of multilingual SEO elements, such as hreflang tags and language-tailored meta descriptions.
• Integration with translation platforms: The CMS should allow seamless integration with specialized translation platforms for easier translation tasks.

Benefits of a multilingual content management system

Support for multiple languages on your website is quite important when you are targeting various markets with different languages. Below, we've listed some key benefits:

• Expanding market reach: By offering content in multiple languages, businesses can connect with a wider range of audiences. Potential customers from non-English speaking regions can access the website and understand its offerings, leading to a broader customer base and higher sales potential.

• Enhanced user experience: A multilanguage website shows cultural sensitivity and understanding. When visitors can engage with content in their native language, they are more likely to spend more time on the site, understand the messaging clearly, and have a positive user experience. This can boost trust and brand loyalty.

• Competitive advantage: Offering a multilanguage site can set a business apart from competitors who may only cater to English-speaking audiences. This not only signifies a global presence but can also be a decisive factor for users when choosing between similar services or products.

• Improved SEO and web traffic: Search engines value relevance and user experience. By catering to non-English search queries, you can rank higher in local search engine results, driving more organic traffic from diverse geographical regions.

• Increased sales and conversions: Users are more likely to make purchases or convert on calls-to-action when they are presented in their native language. Studies have shown that people prefer to buy products and services in their own language, even if they understand English. By catering to this preference, businesses can increase their conversion rates and overall revenue.

What are the best multilingual content management systems?

Compiling a list of the best multilingual content management systems can be challenging. Every CMS brings its own set of merits, be it unrivaled performance, effortless scalability, extensive plugins, user-friendly design, or unique functionalities. Yet, the widespread adoption of some CMSs suggests their aptitude in meeting user demands. Here are some of the most popular content management systems that facilitate effortless handling of multilingual content, either inherently or via plugins:

WordPress

WordPress is an open-source and powerful content management system that powers over one-third of the web. Initially developed as a blogging platform, it has since evolved to support a wide variety of web content. Thanks to its extensive library of plugins, users can tailor their sites to achieve almost any digital objective, making WordPress a preferred choice for both novices and expert web developers.

Joomla

Joomla is an open-source content management system that is both robust and flexible. Used globally to create and manage websites, it is renowned for its extensibility. It caters to both simple blogs and complex web applications alike. With a vast library of extensions and a vibrant community, Joomla continues to be a preferred choice for web developers and site owners.

Drupal

Drupal is an open-source content management system known for its flexibility, scalability, and robust security features. Favored by developers for its modular architecture, it allows for the creation of customized digital experiences. Renowned for powering complex websites, Drupal has become a top choice for enterprises, nonprofits, and governments around the world.

TYPO3

TYPO3 is a powerful and flexible open-source content management system popular in Europe and widely used for building and managing websites of varying scales. With its extensive feature set, user-friendly interface, and extensible architecture, TYPO3 offers both beginners and developers a robust platform to create customized web solutions. Its longevity in the market, active community, and commitment to security make it a trusted choice for enterprises and small businesses alike.

How to efficiently manage multilingual content on your website?

Different content management systems may have different practices when it comes to handling multilingual content. Also, different teams may have different workflows, and each website is a story in itself. However, some strategies are universal and work in every case:

• Structured localization messages: It's essential to organize your localization messages in an intuitive manner. Typically, these are stored in language-specific localization files, ensuring easy access and seamless modifications down the line.
• Start simple, then scale: If you're navigating the complexities of multilingual content for the first time, begin with a straightforward approach. Often, merely translating your localization messages and adapting imagery for different languages suffices. As your requirements evolve, you can incrementally tailor more pages for distinct languages. Adopting this phased approach ensures you don't add undue complexity to your CMS or codebase prematurely.
• Embrace automation: Streamline your process by automating repetitive and time-intensive tasks, allowing you to focus on optimizing content quality and reach.
• Integrate localization tools: To enhance your multilingual content management, consider integrating dedicated localization tools into your CMS or workflow. Such tools can drastically reduce errors associated with manual editing, accelerate translation processes, and foster a more collaborative environment with your translation team.

Conclusion

In this article, we've delved into the concept of a multilingual CMS, its advantages for targeting diverse markets, and the potential benefits and challenges of running such a website.

While digital content management is a key part of CMS-based websites, the complexity grows when introducing multiple languages. With tools like Localizely, you can ease common localization tasks, improve synergy with your translators, and enjoy even more features. Try it out for free.

Thinking about making your website multilingual? Wondering how it could affect your online business? Such decisions can indeed be daunting.

Fortunately, numerous studies have confirmed the benefits of multilingual websites, especially for global e-businesses. In general, multilingual websites remove language barriers, clarify communication, and, most importantly, they improve user experience. This typically results in more time spent on a website and consequently growth in revenue. Knowing this, it's no wonder so many successful global e-businesses have adopted multiple languages on their websites.

But what does it take to make a website multilingual? How does website translation work? Throughout the following sections, we'll explain these aspects and share helpful insights and tips to help you make your website multilingual. So, let's get started!

Why should you make your website multilingual?

Multilingual websites offer a plethora of advantages:

• Increased reach: Accessible to a wider audience.
• Business growth: Higher traffic boosts revenue.
• Improved user experience: Native language content is preferred.
• SEO benefits: Enhanced visibility for multi-language searches.
• Cultural inclusivity: Shows cultural awareness.
• Competitive advantage: Stands out from single-language competitors.
• Brand reputation: Reflects a global, progressive brand.
• Retention: Reduced bounce rates with familiar language content.
• Increased trust: Native language content is more credible.
• Localization: Beyond translation; align with local customs and values.

How does multilingual website translation work?

Website translation is more than just converting words; it's about preserving the message and cultural context in another language. Moreover, it requires website layout adjustments for varied text lengths, selecting compatible fonts for different languages, accommodating text directions (Left-to-Right and Right-to-Left) for various languages, and much more.

In simplified terms, the process of translating multilingual websites could be divided into three phases:

1. Content extraction for translation.
2. Content translation.
3. Reintegration of translated content.

Throughout the website's life, these three phases will recur each time there's new content to translate.

What factors can make the multilingual website translation difficult?

It's hard to pin down what makes translating a multilingual website challenging. However, certain factors have consistently made the process more difficult for multilingual websites. Some of these factors include:

• The absence of contextual information during translation.
• The manual adjustment of translation files.
• The manual performance of tasks that could be automated.
• The task of maintaining updates and synchronization across different language variants.
• The lack of team collaboration between developers, designers, and translators.

How can localization tools help you with multilingual website translation?

Software localization tools are designed to make translating multilingual websites easier. They help teams avoid common errors, automate repeated tasks, enhance teamwork, speed up translation, ease the review of translated content, provide context during translation, and offer many other benefits.

How can I select the best tool for my needs? Your choice should align with your specific needs. Some tools cater exclusively to certain localization file formats, while others prioritize specific localization workflows or integrations with code repositories. But if you're looking for a tool that does all this and more, consider Localizely, which caters to a multitude of localization formats and offers all the functionalities expected of a modern localization tool, and much more.

Still unsure? See what our users are saying in the reviews. Try Localizely for free!

Apple Strings files are commonly used in Apple's development ecosystem to store localization data. Their structure might be simple, yet manually editing these files can be challenging, especially for those with limited technical proficiency. Incorrect syntax or structure can easily occur. However, there are specialized tools designed to simplify the editing process, reducing errors and enhancing the quality of your work. This article highlights the advantages of using these tools.

Key benefits of using a Strings file editor

In today's dynamic digital world, doing tasks manually that could be automated can be a waste of time and often result in costly errors. Here are some compelling reasons to consider using tools specifically designed for editing Apple Strings files:

• Accessibility for all: Strings is a file format designed for localization. While not overly complex, it can be challenging for those unfamiliar with its structure. Fortunately, there are intuitive tools available to simplify the editing process, regardless of your tech-savvy.

• Error reduction: Manual editing can introduce a variety of issues, such as invalid syntax or missing quotation marks. Automated Strings file editing tools greatly mitigate these risks.

• Efficient search and update operations: Finding and updating specific text in large Strings files can be tedious. User-friendly Strings editors streamline this process, facilitating quicker text location and editing.

• Placeholder syntax validation: Syntax validation on placeholders in Strings file editors drastically reduces errors in localized messages.

• Additional features: Strings file editors come with extra features like Machine Translation, Translation Memory, Glossary, and Screenshots, optimizing the editing process.

Guide to editing Strings files with Localizely

This section demonstrates an easy way to edit your Strings files using Localizely, thereby maximizing the benefits listed above.

Upload Strings file for editing

Go to the Upload page and drag-and-drop your file into the marked area, then click 'Upload'.

Edit Strings file

To begin editing, navigate to the Translations page. Localizely offers various editing methods: manual editing, Machine Translation, or delegating the task to team members or professional translators.

Download edited Strings files

Upon completing your edits, head over to the Download page. Here, you can download your Strings files with a single click.

Closing thoughts

In summary, using a Strings file editor like Localizely can considerably enhance your editing efficiency. This article has emphasized key considerations when choosing between manual editing and dedicated tools, and illustrated the ease of editing your Strings files with Localizely.

If you're seeking an effective method to edit your Apple Strings files, consider Localizely. It's a comprehensive localization platform offering a wide array of features to aid in software localization. A free plan suitable for smaller projects is available (no credit card needed), and it's entirely free for open-source projects. Experience the benefits of Localizely today.

ARB (Application Resource Bundle) is a file format commonly used in the localization of Flutter applications. Although the structure of this file format is relatively simple, manually editing such files can pose challenges, particularly for non-technical individuals. Errors can easily happen, both in syntax and structure. Thankfully, there are tools designed to make the editing of ARB files easier, minimizing the likelihood of common mistakes and providing additional functionalities that can improve the quality of your work. This article will discuss the benefits of these tools. So, let's get started.

The benefits of using an ARB file editor

In today's rapidly evolving digital world, manually doing tasks that could be automated isn't the most efficient way to work. Furthermore, manual editing can result in costly mistakes and lengthen the work procedure. To better understand why tools specifically designed for editing Flutter ARB files are beneficial, we've outlined some key insights below:

• Making editing accessible to all: ARB is a file format specifically designed for localization purposes. Although it does not have a complex structure, it can seem complicated to people without a tech background. Fortunately, there are tools that can help you edit these files without any problems, regardless of your technical knowledge.

• Reducing the possibility of errors: Manual editing of ARB files can lead to various issues such as incorrect syntax, forgotten quotation marks, or invalid file structures. Automating this process with ARB file editing tools significantly lowers the probability of such errors.

• Simplified search and update functions: The growth in ARB file sizes can make it difficult to find and modify certain text pieces. User-friendly ARB file editors have been developed to simplify this process, enabling you to find and update text more directly and quickly.

• Verifying placeholder syntax: ARB file editors can execute syntax checks on placeholders in localization messages, significantly reducing the potential for errors.

• Additional capabilities: ARB file editors come equipped with a variety of additional tools, including Machine Translation, Translation Memory, Glossary, Screenshots, among others, to streamline the editing process.

Editing ARB files with Localizely

Here, we'll demonstrate an easy-to-follow procedure to edit your ARB files with Localizely. This approach will enable you to fully leverage all the benefits we've mentioned above.

Upload ARB file for editing

To upload your ARB files, go to the Upload page. Drop your file into the marked area, and hit the 'Upload' button.

Edit ARB file

Go to the Translations page to start editing your ARB file. Feel free to adjust your content as you like: manually, through Machine Translation, or by delegating the task to team members or professional translators.

Furthermore, you can easily access and update metadata from your ARB files. This includes descriptions, placeholders, examples, and other related items.

Download edited ARB files

Once editing is done, go to the Download page. Here, you'll be able to download your ARB files with just a single click.

Final thoughts

In this post, we've explained how using an ARB editing tool like Localizely can significantly improve your editing procedures. We've covered important factors to consider when comparing manual editing to using specialized tools. Plus, we've showcased how straightforward it is to edit your ARB files with Localizely, and the benefits it brings.

Localizely is a localization platform that helps you edit your Flutter ARB files. It offers a wide array of features for software localization tasks. Plus, Localizely offers a free plan (no credit card required) suitable for smaller projects and is entirely free for open-source projects. Try Localizely today and experience all the benefits it brings.

RESX (.NET Resources) is an XML-based file format used for storing localizable resources in .NET applications. Although the structure of these files is quite straightforward, manually editing them can be challenging if you aren't tech-savvy. Syntax errors, issues with closing tags, or mistakes in the file structure can easily occur. Thankfully, there are tools specifically designed to help us edit these RESX files and avoid these typical errors. In the upcoming sections, we'll explain how these tools can benefit us.

The benefits of utilizing a RESX file editor

In our fast-paced digital age, staying competitive often means adopting as much automation as possible, as manual work can be costly. Here, we have listed some of the advantages of using a RESX editor:

• Easy editing for everyone: RESX is an XML-based file format. Editing it can be challenging for those lacking technical skills. The good news is that specialized tools with intuitive interfaces are available today, making the editing process of RESX files simple for everyone.

• Error reduction: Manual modifications in RESX files can lead to various errors such as incorrect syntax, missing closing tags, or an invalid file structure. RESX editors can manage these updates for you, greatly reducing the risk of errors that typically occur with manual editing.

• User-friendly search and update: As RESX files get larger, searching and updating specific texts can be difficult. However, RESX editors with intuitive interfaces can simplify and expedite these tasks.

• Placeholder syntax validation: RESX editors conduct syntax analysis of placeholders, substantially reducing the risk of errors in localization messages.

• Additional features: RESX editors are equipped with many additional features to assist in editing, including Machine Translation, Translation Memory, Glossary, Screenshots, and others.

Editing RESX files with Localizely

Here, we will show you a straightforward approach for editing your RESX files using Localizely, enabling you to take advantage of all the benefits we've previously discussed.

Upload RESX file for editing

To upload your RESX files, go to the Upload page. Simply drop your file into the marked area and then click on the 'Upload' button.

Edit RESX file

Go to the Translations page and start editing your RESX file. You have a variety of options when it comes to editing your translations: manually, using Machine Translation, or delegating the task to your team members or professional translators.

Download edited RESX files

Once editing is completed, proceed to the Download page. Here, you can download your RESX files with a single click.

Final thoughts

In this post, we have explained how a RESX editing tool, such as Localizely, can significantly increase your efficiency and save precious time. We have also addressed the essential factors to consider when choosing between manual editing and utilizing specialized tools. Furthermore, we demonstrated the simplicity of editing your RESX files using Localizely, along with the benefits it offers.

Localizely is a localization platform that simplifies the editing of RESX files. It offers a plethora of features to enhance your software localization tasks. One of the great aspects of Localizely is its provision of a free plan (no credit card required), which is suitable for smaller projects. Furthermore, it is entirely free for open-source projects.

PO (Portable Object) is a file format commonly used in software localization. It's designed to make the exchange of localization data easier. Although simple in structure, these files can be tricky to edit manually, especially if you're not technically proficient. Mistakes can easily occur in terms of syntax and file structure. Thankfully, there are tools that are crafted to edit PO files and minimize errors common in manual editing. In the following sections, we'll discuss how these tools can be beneficial.

What are the benefits of using a PO file editor?

In today's fast-paced digital world, performing tasks manually that can be fully or partially automated is not exactly the best way to work. Also, manual editing often leads to costly mistakes and lengthens the work process. To better understand the benefits of specially designed tools for editing PO files, we have listed some considerations below:

• Easier editing for everyone: PO is a file format created specifically for localization purposes. Most people aren't familiar with its structure and syntax, which can make editing these files challenging for those without a tech background. However, there are user-friendly tools available that can help anyone edit PO files with ease.

• Reduction of errors: Editing PO files by hand can lead to a range of issues, such as incorrect syntax, forgotten quotation marks, or invalid file structure. Tools for editing PO files automate updates and creation of new files, significantly cutting down the chances of errors usually seen with manual editing.

• Easier searching and updating: As the size of PO files increases, it can be hard to locate and update specific pieces of text. PO editing tools have been designed with user-friendly interfaces to make the task of finding and updating necessary texts faster and more straightforward.

• Check for placeholder syntax: The PO editing tools also execute syntax checks on placeholders used in localization messages, substantially reducing the possibility of errors in such messages.

• Additional features: The PO editing tools offer various additional features to assist in editing. These tools include Machine Translation, Translation Memory, Glossary, Screenshots, and many other useful features.

Editing PO files with Localizely

Here, we're going to show you a really simple way to edit your PO files using Localizely. That way, you will be able to fully utilize all the advantages we've mentioned above.

Upload PO file for editing

To upload your PO files, navigate to the Upload page. Drop your file into the marked area, and hit the 'Upload' button.

Edit PO file

Navigate to the Translations page and start making changes to your PO file. You can edit your content as you wish: manually, with the help of Machine Translation, or by delegating the task to other members of your team or professional translators.

Download edited PO files

Once you've finished editing, navigate to the Download page. It only takes one click to download your PO files.

Final thoughts

In this post, we've explained how usage of a PO editing tool like Localizely can significantly increase your productivity and save you time. We've tackled critical points to think about when choosing between manual editing and using specialized tools. We've also shown how easy it is to edit your PO files with Localizely, as well as the advantages it brings.

Localizely is a localization platform that makes the editing of PO files easier. It is equipped with a wide range of features to enhance your software localization tasks. The best part is that it offers a free plan - no credit card required - which is adequate for smaller projects. Also, Localizely is completely free for open-source projects.

Are you considering to expand your business into new markets? There's no better way than presenting your products and services in the language your targeted audience understands best. In the digital world, this implies adapting your website to work in various languages. In this post, we're going to present 5 great examples of multilingual websites that can serve as useful guides and provide a solid foundation. Learn from their successful strategies and avoid common pitfalls. So, let's dive in!

Benefits of multilingual websites

Websites that support multiple languages provide numerous benefits, particularly for businesses that are targeting a global audience or aiming to penetrate a large number of markets. Let's explore these advantages in more detail:

• Expanding global reach: Multilingual websites break language barriers, connecting with more diverse global audiences.

• Boosting revenue: Multilingual websites reach a larger audience, which often results in increased sales and profits.

• Enhancing SEO: Providing content in multiple languages can improve a website's search engine ranking, driving more organic traffic.

• Improving user satisfaction: Users feel more comfortable interacting with a website in their native language, enhancing satisfaction and customer loyalty.

Multilingual website examples

In the upcoming sections, we're going to showcase 5 worldwide companies that have successfully implemented multiple languages on their websites. If you're seeking inspiration or guidance on how to include various languages on your site, these examples could be beneficial.

Airbnb

Airbnb is an American company that operates online, serving as a bridge between those who want to rent their homes and individuals seeking lodging in the same area. Recognized and used by travelers around the globe, this platform caters to a global audience by supporting more than 50 languages.

The website uses the user's preferred language configuration from the browser to determine the initial language. In other words, if your preferred language is set to English in the browser, the Airbnb website will default to the English version of the website as well. If it's French, the website will redirect to the French version of the website.

To adjust the language or currency settings on the website, you need to click on the 'globe' icon that is located in the top-right corner and in the footer. These switchers are always on display, so you can make adjustments whenever needed. The list of available languages is clearly presented, with country and language names displayed in their native form.

When you select Japanese (Japan) as the language, you will be redirected to a website with a 'ja' domain. This website is entirely in Japanese, and all prices are displayed in Japanese yen by default.

Selecting the Chinese (China) language option will redirect you to the Airbnb website with a 'cn' domain. The same applies here: content and currency are localized to suit the selected language.

Canva

Canva is an online design platform that enables people to effortlessly craft various types of visual content. It enjoys worldwide popularity, with users hailing from every corner of the globe. As for language support, the platform currently accommodates over 50 languages.

The default language displayed on the Canva website is determined from the user's preferred language setting. If English is set as the user's preferred language in the browser, the site will show content in English. Similarly, if French is the user's preferred language, the website content will be in French.

The Canva website features a language switcher in the footer, marked with a 'globe' icon and the language currently in use. When clicked, it opens a pop-up displaying all supported languages, along with a search option to make the finding process more efficient.

Clicking on 'Español (España)' in the language options will redirect you to the Spanish (Spain) version of the page. Correspondingly, the webpage URL will reflect this change by showing '/es_es/'.

The same process occurs if you choose 'Français (Canada)'. You'll be taken to the Canadian French version of the page, and the URL will also reflect this change.

Nike

The American sportswear company, Nike, serves as a great model for multilingual websites. Their website supports more than 20 languages and is customized for over 80 countries. Given its widespread popularity and global operations, it's not surprising that the company has made their site accessible in such a diverse range of languages.

The first time you access the Nike website, a helpful pop-up appears. It prompts you to pick your location and language. These options are well organized by regions, with localized country and language names for easy selection.

By opting for 'United States (English)', the content you see will be tailored specifically for that country and will be in English.

Similarly, selecting 'Canada (Français)' will redirect you to specifically designed page for Canada that is in French. The change in your selection will also be evident in the URL, which will contain '/ca/fr/' in path.

To change your location and language settings in the future, you can click on the link located in the footer. This will prompt the same initial pop-up, where you can select new preferences. Notably, this link is placed in the footer, a common area for users to seek such options. It's marked with a 'location' icon for easy identification, showing the currently selected location name.

De'Longhi

De'Longhi is a renowned Italian brand, specialized in the manufacture and sale of home appliances. They've earned a good reputation for their well-designed products, particularly their outstanding espresso machines. Aside from Italy, De'Longhi products enjoy wide recognition globally. Reflecting this international appeal, their website caters to a diverse audience, supporting over 30 languages and countries.

When you visit their website, you'll see the international version with content presented in English.

To view the website version tailored for a specific country and language, scroll to the bottom of the page and open the pop-up menu from the footer to select your desired country and language. In this pop-up, you'll see a list of countries and languages, organized by regions. Each country is represented with its flag, and next to it, there's a language code you can select. Moreover, the names of the countries are localized in the respective languages, making it easier to locate the one you're looking for.

Accessing the website's Italian version will present you with content in Italian. Correspondingly, the URL of the page will reflect this change as well, showing '/it-it' in the path.

In the same manner, when you view the Swiss version of the website in German, the content changes accordingly. The URL becomes '/de-ch', indicating this transition.

Ikea

Ikea is a Swedish company that specializes in designing and retailing ready-to-assemble furniture, home accessories, and various other items. As one of the world's largest furniture retailers, it has a significant global presence with numerous stores worldwide. Their online platform is also very accessible, supporting over 20 languages and customized to cater to customers from more than 50 countries.

When you access their website from your browser, the content will be displayed in English by default. You will also see a link to the online store for your country, which is most likely detected from your location and IP address.

In simpler terms, if you're visiting the Ikea website from the Netherlands, an option to open the Netherlands' online store in English will be readily available.

In the same way, if you access the Ikea website from Puerto Rico, it will preselect the relevant online store for you. Moreover, if the preselected online store doesn't meet your expectations, you can easily switch it using a straightforward searchable select input field.

Accessing the English variant of the Netherlands' online store presents English content and adjusts the URL to '/nl/en/'.

When you access the Puerto Rico (Spanish) version of the online store, the website will adjust its language to Spanish. It will also display products and promotions applicable to Puerto Rico. Furthermore, the URL will update to correspond to this specific regional online store.

To update your country and language settings, you can either click on the top menu or scroll to the bottom of the page. You will easily spot the inputs in both locations to make your changes, as they are properly marked and designed for ease of use.

Key aspects to think about when developing a multilingual website

It's apparent from looking at many multilingual websites that there's no 'one strategy fits all' approach that will assure success. Several elements, like your target audience, your company's aims, your budget, etc., play a role in the development of a multilingual website. To hit your target, it's crucial to understand your unique needs and study how successful businesses solve similar issues - there's much to be learned. Nonetheless, there are a few aspects of multilingual website development that are universally relevant:

• Language selection: Support only languages that can benefit your operations.

• Technology choice: Pick programming languages, frameworks, CMSs, and libraries that best cater to your needs, particularly in localization. For instance, if you frequently use ICU syntax in your localization messages, choose a localization library that has great support for it.

• Organization of localized pages: Go with a structure that works best for you, be it organizing localized pages under domains, subdomains, or language-specific URLs.

• Page linking: Make sure all links work properly across languages, as paths may vary.

• Consider adding hreflang tags: Use hreflang tags to help search engines better understand page variations and relations between them.

• Space considerations: Some languages take up more space than others, potentially affecting your layout. Always test localized pages before going live.

Conclusion

In this post, we've examined various examples of multilingual websites and delved into the benefits of incorporating multiple languages on your website, a crucial strategy for reaching a diverse, global audience. Furthermore, we've also explained the key factors to consider when developing a multilingual site.

While website localization aspects like picking an appropriate localization library, planning page routing, and maintaining connections between localized pages are not too complex, managing translation tasks can be quite a challenge. This involves working with translators and synchronizing code with translations. Luckily, there's Localizely. Localizely simplifies localization tasks, tracks translation history, facilitates team collaboration, offers professional translation services, and much more. Try Localizely for free and see all the benefits it can bring.

Ever wondered how to apply different fonts, colors, and other styles to match the language used on your webpage? That's where the CSS lang selector comes in. This pseudo-class allows you to customize the look and feel of your webpage based on the language that is used on it. So, stay with us and learn more about this CSS feature and how to employ it on your multilingual websites.

What is a CSS lang selector?

The CSS lang selector is a pseudo-class in CSS that allows you to select element(s) based on a unique condition, the language of the element. It consists of a colon (:), followed by the pseudo-class name (lang), and parentheses to outline the conditions.

The formal syntax of the CSS lang selector:

:lang(<language-code>) {
  /* ... */
}

When to use CSS lang selector?

If you're developing a website that needs to support multiple languages, the CSS lang selector can be incredibly helpful. This tool allows you to tailor your HTML element styles based on language. Imagine you want a certain font-family to be used only for a particular language - the CSS lang selector makes this possible. Similarly, it can also accommodate differences in the use of quotation marks across languages. Furthermore, it lets you adjust colors, letter spacing, layout styles, and other design aspects based on the language used on the page.

Differences between the :lang pseudo-class and the lang attribute selectors in CSS

The :lang pseudo-class and the lang attribute selectors in CSS both deal with language-specific styling, but there are key differences in how they function.

The :lang pseudo-class selects elements based on the language that is determined from the lang attribute, meta element, and HTTP headers. It also respects inheritance, applying styles not only to elements explicitly marked with the lang attribute but also to their child elements.

On the other hand, the lang attribute selectors only style elements where the lang attribute has been explicitly defined, ignoring inheritance. In other words, it only affects those specific elements and not their children.

Browser support for the CSS lang selector

The CSS lang selector is widely supported across all major web browsers, including Chrome, Firefox, Safari, Opera, and newer versions of the Internet Explorer. It's also supported in Edge, Microsoft's browser that replaced Internet Explorer.

However, be aware that not all lang selector features are equally supported in all browsers. For instance, some browsers might not fully support the use of comma-separated list of language codes or matching language codes with wildcards.

Conclusion

In this blog post, we have explained how to utilize the CSS :lang selector to enhance the aesthetics of your website based on the language of the document. We provided some examples that highlight the use of the CSS :lang selector and the advantages of using the :lang pseudo-class selector over the lang attribute selector in CSS for multilingual websites.

Adjusting styles according to language is just a small part of software localization. The more challenging tasks involve adapting the website to support multiple languages and translating the site's content. Thankfully, the Localizely platform can assist you with these localization tasks and automate some repetitive work. It offers a free plan (no credit card required), making it ideal for smaller projects. Additionally, it is completely free for open-source projects. Check it out today and discover all the benefits it has to offer.

It's well-known that users engage more with websites that create a sense of belonging. So, enhancing their user experience by personalizing your website can be a powerful strategy. This is particularly significant when you aim to expand into new markets.

Markets where Spanish is spoken are brimming with potential. Research indicates that the global population of Spanish speakers hovers around 500 million, a truly impressive figure indeed. By translating your website or app into Spanish, you can reach these markets more easily.

Keep on reading to learn how to successfully overcome language barriers and elevate the user experience on your website by translating it into Spanish.

Why translate your website into Spanish?

In our increasingly globalized world, accessibility is very important. Translating your website into Spanish could be the key to numerous opportunities. Let's explore why:

• Expanding your audience: Spanish is one of the most commonly spoken languages in the world, with nearly 500 million native speakers. Translating your website into Spanish can significantly expand your potential audience and market reach.

• Increasing user engagement: Websites and apps translated into a user's native language significantly improve user experience, engagement, and conversion rates.

• Cultural inclusion: Offering your content in multiple languages demonstrates respect and consideration for different cultures. This inclusivity fosters trust and strengthens your brand's reputation globally.

• Boosting SEO ranking: Multilingual websites have an advantage in terms of SEO, as they can rank in search results in different languages. This can lead to increased visibility and higher organic traffic.

• Business growth in untapped markets: Spanish-speaking countries, including those in Latin America, offer significant opportunities for growth. A Spanish website can pave the way for business expansion in these markets.

• Competitive advantage: Many businesses only cater to English-speaking customers. By translating your website into Spanish, you can differentiate yourself from the competition.

Key points to bear in mind when translating your website into Spanish

Consider these essential points to craft a website that ensures an easy and pleasant experience for your visitors:

• Choose the right variant of Spanish: Spanish has variations in vocabulary, grammar, and phrases across different countries. Decide whether you want a more universal, neutral Spanish or a specific variant like Mexican Spanish or Castilian Spanish.

• Understand the culture: Cultural context is as important as language. Understanding the nuances of Spanish-speaking cultures is essential for effectively communicating your messages.

• Professional translation: Use professional translation services whenever possible to ensure accuracy and cultural appropriateness. Machine translations often miss nuances and can even cause embarrassing mistakes.

• Quality and consistency: Maintain high-quality translation throughout your website. Consistency in language, tone, and style is key to ensuring a seamless user experience.

• Adapt SEO: Translate and localize your SEO keywords and update your hreflang tags. What works in English might not work in Spanish. It's important to understand what your Spanish-speaking audience is searching for.

• Proofreading: Always strive to proofread the translated content. This helps in identifying errors and inconsistencies. Hiring a native Spanish speaker for proofreading can be particularly beneficial.

• User interface and user experience: Translate all aspects of the user interface, including buttons, forms, error messages, etc. Ensure that your design accommodates longer Spanish texts.

• Multimedia translation: Don't forget about images, videos, and infographics. They may contain text that also needs to be translated. Consider using subtitles or dubbed voice-overs for video content.

• Regular updates: Try to keep the Spanish version of your website updated with any changes you make on the original site. This includes new blog posts, updated product descriptions, and any modifications in terms and conditions.

• Test and get feedback: Test the Spanish version of the website among a small group of your target audience. Their feedback can provide insights into any potential problems or areas for improvement.

How to translate your website into Spanish with Localizely

Using the Localizely platform to translate your website or app into Spanish is quite straightforward. Basically, you need to upload your localization files to Localizely, translate your localization messages into Spanish, and finally download these files to incorporate them back into your project. More in-depth instructions on these steps will be provided in the sections that follow.

Upload localization files

Your localization files can be easily uploaded on the Upload page. Drop your file into the marked zone and click on the 'Upload' button.

Translate the website into Spanish

After you've uploaded the localization files, the next step is to visit the Translations page where you can start translating your localization messages into Spanish. Select a translation approach that suits you: you can translate on your own, use Machine Translation, delegate to your team, or hire professional translators.

Download localization files

After the content of your website has been translated into Spanish, navigate to the Download page. Here, you can download your localization files and let your development team integrate them back into the project.

Final thoughts

In this post, we've provided a short guide on how to effortlessly translate your website or app into Spanish, one of the most popular languages globally. By doing so, you can easily tap into new markets with a Spanish-speaking audience and increase the accessibility of your products and services. Countries such as Mexico, Colombia, Argentina, Spain, the United States, and many others are markets with great potential. Why miss a good chance?

When it comes to translation and localization, Localizely can help you to ease these demanding tasks. It is a user-friendly platform filled with features that can make software localization easy. Plus, it has a free plan (no credit card required) that is ideal for smaller projects and is entirely free for open-source ones.

Ready to tap into new, prosperous markets with your business? Embarking on this venture may seem daunting, but a great starting point is tailoring your website to resonate with these new audiences. After all, speaking the language of your potential customers can break barriers like nothing else.

The Middle East and North Africa regions are booming business areas that global leaders like Apple, Tesla, Microsoft, and Toyota have already tapped into – a clear sign that these markets are brimming with potential.

The key to unlocking these markets? Translating your website into Arabic, the lingua franca of these regions. In this blog post, we'll guide you through the process of translating your website into Arabic, thereby making your products and services accessible to users from these emerging markets.

Why translate your website into Arabic?

In the age of globalization, accessibility matters more than ever before. Translating your website into Arabic can open a gateway to vast opportunities, and here's why:

• Expanding audience reach: Arabic is considered among the top 10 most spoken languages globally, with estimates suggesting it's spoken by more than 250 million people. By translating your website into Arabic, you potentially reach this broad and diverse audience, expanding your brand recognition and influence across multiple markets.

• Economic opportunities: Several Arabic-speaking nations, like the United Arab Emirates and Saudi Arabia, have thriving economies and high consumer purchasing power. Making your website accessible in Arabic could translate into significant business growth.

• Cultural inclusivity: A multilingual website demonstrates respect for different cultures. Providing content in Arabic can enhance the user experience for Arabic speakers, making them feel valued and respected.

• Increased engagement: Users are more likely to engage with a website presented in their native language, leading to increased time spent on the site, higher conversion rates, and ultimately, more loyal customers.

• Competitive edge: Despite the wide use of Arabic, it remains underrepresented on the internet relative to its number of speakers. This presents a unique opportunity to get ahead of competitors and stand out in the marketplace.

• SEO advantages: With the right SEO strategy, an Arabic version of your site can rank high on search engines in Arabic-speaking countries, driving more organic traffic to your website.

Crucial points to consider when translating your website to Arabic

Let's look at some important factors related to entering new markets, especially those that require adapting your website to the Arabic language. Here's a quick guide:

• Right-to-Left adaptation: Arabic is a Right-to-Left (RTL) language, meaning it is written and read from right to left. This necessitates a shift in your website layout to accommodate RTL text direction, including alignment of text, images, buttons, forms, and navigation elements.

• Start with Standard Arabic: Starting with Standard Arabic is a good initial approach when translating your website. It is widely understood across all Arabic-speaking regions, thus allowing you to reach a broad audience.

• Regional variations: While Standard Arabic is a good starting point, it's essential to understand that Arabic has many regional variations. Localizing your content for specific countries or regions can further enhance the user experience and increase engagement.

• Monitor traffic and analytics: Track the performance of your localized pages by analyzing metrics such as bounce rate, session duration, conversion rate, and more. This data can provide insights into how well your content is performing and highlight areas for improvement.

• Ask for feedback from users: Providing mechanisms for users to give feedback is crucial in understanding their needs and preferences. Encourage user interactions to learn more about what works and what doesn't in your localized content.

• Continuous improvement: Remember that localization is an ongoing process. Use data and feedback to make continual adjustments and improvements, making your website more appealing and accessible to your Arabic-speaking audience. This will help in creating a more personalized and enjoyable user experience, increasing your chances of success in the new market.

How to translate your website into Arabic with Localizely

Translating your website into Arabic with the Localizely platform is quite simple. In simple terms, the process includes uploading your localization files to Localizely, translating your messages into Arabic, and then downloading and re-integrating these files back into your project. The upcoming sections will provide a more detailed walk-through of these steps.

Upload localization files

You can easily upload your localization files on the Upload page. Simply drag and drop your file into the marked place, and hit the 'Upload' button.

Translate the website into Arabic

Once your localization files are uploaded, proceed to the Translations page to start translating your localization messages into Arabic. Choose the translation method that fits your needs best: self-translation, using Machine Translation, delegating to your team, or hiring expert translators.

Download localization files

Once your website's content has been translated into Arabic, go to the Download page. From this location, you can download the localization files your development team needs to embed into your project.

Conclusion

This article provides a brief introduction to the promising prospects within Arabic-speaking markets. By undertaking minimal steps such as translating your website into Arabic, you can penetrate these markets. We've only touched the surface in this article, but remember, understanding and addressing your customers' needs is a pathway to success.

When it comes to translation and localization, Localizely can help you with that. It's an intuitive platform packed with a wide range of features designed to ease software localization. Furthermore, it offers a free plan that is perfect for smaller projects and is completely free for open-source projects - no credit card required.

XLIFF, short for XML Localization Interchange File Format, is a file format widely used in software localization. It is designed to simplify the exchange of localization data during the translation process. Although the structure of this file format is quite simple, it can be difficult to manually edit these files if you're not tech-savvy. Errors related to syntax, closing tags, or file structure can easily creep in. Fortunately, there are tools designed to help us edit XLIFF files and prevent errors that typically arise during manual editing. In the sections that follow, we'll explain how the usage of such tools can help us.

Why using a tool for editing XLIFF files can be a game-changer?

In today's rapid digital age, time-consuming manual tasks could lead to costly mistakes and extend the work duration. To help you understand the advantages of using tools specifically created for editing XLIFF files, we've outlined some important considerations below:

• Simplification for all users: XLIFF is an XML-based file format, which can make manual editing difficult for those with no tech background. However, the tools for editing XLIFF files that have user-friendly interfaces make the editing process accessible to everyone.

• Reduction of mistakes: Manual alterations in XLIFF files can cause various errors, like faulty syntax, missing closing tags, or incorrect file structures. The tools for editing XLIFF files manage updates and generate XLIFF files automatically, thus significantly reducing the risk of errors usually associated with manual editing.

• Efficient search and update: As XLIFF files grow (exceeding 500 lines), locating and updating specific text can be difficult. XLIFF editing tools feature user-friendly interfaces that simplify the process of searching and updating needed texts and speed up the whole process.

• Syntax check for placeholders: Tools for editing XLIFF files also conduct syntax checks on placeholders used in localization messages, which significantly reduces the chance of errors.

• Additional translation features: XLIFF editing tools are packed with an array of extra features to facilitate translation. These include Machine Translation, Translation Memory, Glossary, Screenshots, and team collaboration features, among others.

Editing XLIFF files with Localizely

Here, we'll show you a simple process for editing your XLIFF files using Localizely. By doing so, you can fully utilize all the advantages we've mentioned above.

Create account

Getting started with Localizely is easy. The first thing you need to do to start using Localizely is create an account. This step is easy and only requires you to enter some basic information.

Create new project

The next step is to create a new project, determining the main language and any other languages you plan to use. This step is quick and straightforward, needing to be performed just once in the beginning and requiring only a few seconds.

Upload XLIFF file for translation

Once you have created an account and project, you can begin working on XLIFF files. To do so, drop your XLIFF file on the Upload page and hit the upload button.

Translate XLIFF file

Navigate to the Translations page and start editing your XLIFF file. Feel free to edit your translations in the way that suits you best: do it manually, leverage Machine Translation, or pass the job to other members of your team or to professional translators.

Furthermore, you can easily access and modify additional data stored in your XLIFF files. This includes information such as descriptions, the string key's location within a source code file, and other similar things.

Download translated XLIFF files

After you've completed your edits, navigate to the Download page. From there, you can retrieve your XLIFF files with just one click.

Final thoughts

This post sheds light on why using an XLIFF editing tool like Localizely can revolutionize your editing process. We've addressed important aspects to consider between manual editing and using specific tools. Also, we've demonstrated the simplicity of editing your XLIFF files with Localizely, along with the benefits you stand to gain.

Localizely serves as a user-friendly platform that simplifies the translation of XLIFF files, packed with a wide range of helpful features to optimize your software localization tasks. The best part? It offers a free plan (no credit card required) that is enough for smaller projects, and it's totally free for open-source projects.

Developing a multilingual website can provide significant benefits, especially when targeting a global audience. However, simply localizing your web pages doesn't guarantee global success. The visibility of your multilingual website on the internet is also crucial. This is closely tied to SEO, and how search engines like Google understand and index multilingual websites. These elements can influence your website's traffic volume, which, in turn, significantly impacts its global success. This is where the hreflang tag steps in. In this blog post, we'll explain what hreflang is, why it's crucial, and offer practical advice on using hreflangs effectively to increase the visibility of your multilingual website on the web. Ready to dive in? Let's get started!

What is hreflang?

In 2011, Google introduced the 'hreflang' attribute in order to help search engines in identifying the connections between web pages in various languages. It serves as a hint to search engines, suggesting that other localized versions of a page are available and can be displayed. However, it's key to understand that hreflang is a suggestion, not an instruction. So, while it offers direction, the ranking of these pages is still significantly affected by other SEO factors.

The best way to understand hreflang is through a real-life example. Let's take a look at the Google search results for the 'Adidas website' when searched from the Netherlands and Sweden. People from these two countries will see different results, and among them, the localized version of the official Adidas homepage that best suits them. That's the magic of hreflang tags. You don't see them, but they really work.

Why is hreflang important?

The hreflang tag plays a crucial role in optimizing your multilingual website for search engines. It's important primarily for two reasons: signaling search engines about localized versions of a page and preventing duplicate content issues, both of which can significantly affect your website's SEO and ranking.

Let's start with the first point. Consider that you have a website with content in English, Spanish, and French. Without the hreflang tags, a search engine like Google would have difficulty determining which version of your content to display to a user in Spain, France, or the United States. By using the hreflang tags, you can specify the language and geographical target of a webpage, guiding search engines to display the most suitable version based on a user's location or language preference. This can result in a better user experience and higher engagement rates.

The second point is about preventing duplicate content issues. Search engines strive to provide unique, relevant content to their users. If you have the same content in different languages on different pages without properly using the hreflang tags, search engines might perceive these pages as duplicate content. This can harm your SEO as search engines may not know which version to rank for query results. The hreflang tags help search engines understand that these are not duplicate content, but rather the same content in different languages, ensuring all your localized pages are appropriately indexed.

Guidelines for setting hreflangs

There are three recognized methods for indicating different language or locale versions of a webpage to search engines: HTML tags, HTTP headers, and Sitemap files.

Each method serves the same purpose, so you can choose the one that best fits your website's needs. While it's possible to implement all three simultaneously, it's worth noting that this could make management more complex, without providing any extra advantages in search results.

No matter the method you opt for, there are certain universal guidelines to follow:

• Each language version must list itself along with all other language versions.

• Alternate URLs must be fully-qualified (a complete internet address that includes the protocol like http or https, domain name, and specific path to a web resource, if any).

• If two pages don't both point to each other, their tags will be disregarded to prevent external sites from naming themselves as an alternative version of your page.

• Consider setting up a default fallback page for any languages that aren't identified, using the 'x-default' value. This could be particularly useful if you're dealing with country-specific selectors or automatically redirecting homepages.

• If your website caters to region-specific languages (such as 'en-US', 'en-CA'), you might consider adding a generic URL for speakers of the same language from unspecified regions (like 'en'). Alternatively, you can assign this role to one of your region-specific pages.

• There may be situations when maintaining bidirectional links for every language becomes daunting. In these cases, leaving out some is permissible, and search engines will still analyze the remaining mutual links. However, it's more valuable to form bidirectional links from new language pages to the original or more dominant languages, rather than linking country-specific pages amongst themselves.

Hreflang in HTML tags

To incorporate hreflang into HTML, you need to use the <link> element in the <head> section of your web page's HTML. The rel="alternate" attribute signifies that an alternative version of the document exists, while the hreflang="language_code" attribute specifies the language of the alternative version.

Here's a simple example:

<html>
<head>
  <link rel="alternate" hreflang="en" href="https://example.com/" />
  <link rel="alternate" hreflang="es" href="https://example.com/es" />
  <link rel="alternate" hreflang="es-ES" href="https://example.com/es-es" />
  <link rel="alternate" hreflang="es-MX" href="https://example.com/es-mx" />
  <link rel="alternate" hreflang="x-default" href="https://example.com/" />
</head>
<body>
  <!-- Your page content goes here -->
</body>
</html>

In this example, there are several hreflang configurations. The first hreflang indicates that the page on the address https://example.com/ is in English. The next three hreflangs signal that there are Spanish variants of the page. One for Spain (es-ES), one for Mexico (es-MX), and a generic Spanish (es) version for Spanish speakers from non-specified countries. Finally, the 'x-default' hreflang, which points to the same page as the English hreflang, suggests that this page can be used for all languages not specified above.

Hreflang in HTTP headers

HTTP headers offer an alternative method to implement hreflangs, which is particularly useful for non-HTML files such as PDFs.

Here's how you could match the previous example using HTTP headers:

Link: <https://example.com/>; rel="alternate"; hreflang="en",
<https://example.com/es>; rel="alternate"; hreflang="es",
<https://example.com/es-es>; rel="alternate"; hreflang="es-ES",
<https://example.com/es-mx>; rel="alternate"; hreflang="es-MX",
<https://example.com/>; rel="alternate"; hreflang="x-default"

Hreflang in Sitemap files

Using hreflang in sitemap files is another viable method. This approach can be particularly advantageous for larger websites with numerous pages because it avoids cluttering your HTML code with multiple hreflang tags.

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
  xmlns:xhtml="http://www.w3.org/1999/xhtml">
  <url>
    <loc>https://example.com/</loc>
    <xhtml:link rel="alternate" hreflang="en" href="https://example.com/" />
    <xhtml:link rel="alternate" hreflang="es" href="https://example.com/es" />
    <xhtml:link rel="alternate" hreflang="es-ES" href="https://example.com/es-es" />
    <xhtml:link rel="alternate" hreflang="es-MX" href="https://example.com/es-mx" />
    <xhtml:link rel="alternate" hreflang="x-default" href="https://example.com/" />
  </url>

  <url>
    <loc>https://example.com/es</loc>
    <xhtml:link rel="alternate" hreflang="en" href="https://example.com/" />
    <xhtml:link rel="alternate" hreflang="es" href="https://example.com/es" />
    <xhtml:link rel="alternate" hreflang="es-ES" href="https://example.com/es-es" />
    <xhtml:link rel="alternate" hreflang="es-MX" href="https://example.com/es-mx" />
    <xhtml:link rel="alternate" hreflang="x-default" href="https://example.com/" />
  </url>

  <url>
    <loc>https://example.com/es-es</loc>
    <xhtml:link rel="alternate" hreflang="en" href="https://example.com/" />
    <xhtml:link rel="alternate" hreflang="es" href="https://example.com/es" />
    <xhtml:link rel="alternate" hreflang="es-ES" href="https://example.com/es-es" />
    <xhtml:link rel="alternate" hreflang="es-MX" href="https://example.com/es-mx" />
    <xhtml:link rel="alternate" hreflang="x-default" href="https://example.com/" />
  </url>

  <url>
    <loc>https://example.com/es-mx</loc>
    <xhtml:link rel="alternate" hreflang="en" href="https://example.com/" />
    <xhtml:link rel="alternate" hreflang="es" href="https://example.com/es" />
    <xhtml:link rel="alternate" hreflang="es-ES" href="https://example.com/es-es" />
    <xhtml:link rel="alternate" hreflang="es-MX" href="https://example.com/es-mx" />
    <xhtml:link rel="alternate" hreflang="x-default" href="https://example.com/" />
  </url>
</urlset>

In this example, you can see how we've applied all of the above guidelines. Each page variation is listed alongside the other language variations, using fully-qualified alternate URLs. There's a universal Spanish version for speakers from regions not specified, and an 'x-default' fallback page for any languages not detailed.

Supported language and region codes in hreflang tags

The hreflang value is usually composed of one or two elements, divided by a dash. The primary element is the language code (ISO 639-1). There may also be an optional second element representing the country code (ISO 3166-1 Alpha-2). It's worth mentioning that an optional script code can also be included, but is rarely used. Examples of both valid and invalid hreflang values can be found below.

✔️   en – English

✔️   fr-FR – French in France

✔️   sr-Cyrl – Serbian (Cyrillic)

✔️   zh-Hans-CN – Simplified Chinese in China

❌   English – Invalid language code

❌   cn – Invalid language code

❌   zh-NN – Invalid country code

❌   zh-Simp – Invalid script code

The hreflang value isn't case sensitive, meaning search engines can understand it whether it's in upper or lower case. Usually, however, the language is written in lowercase, the first letter of the script is capitalized, and the country is presented in uppercase.

Troubleshooting hreflang tags: Dealing with common issues

Troubleshooting hreflangs is an important step to ensure that your configuration is set up correctly. One common issue is the missing reciprocal hreflang, where one page points to another but the second doesn't point back. Incorrect language codes can also cause confusion. To mitigate these issues, it's advised to thoroughly check and validate hreflang implementation prior to deploying to production. Using tools specifically designed for generating and debugging hreflangs can save you a lot of time and effort while ensuring accuracy.

Additional tips for effective SEO in multilingual websites

In this section, we'll show you some extra strategies that can improve search engine optimization for multi-language websites:

• International SEO is a potent strategy to expand your global business since there is a scarcity of content in languages other than English, despite the majority of people not speaking English. Tap into this opportunity to reach a wider audience.

• Consider adapting (localizing) the URLs of your localized pages to target specific regions or languages better. This can help optimize your SEO efforts by aligning with relevant keywords, resulting in increased traffic.

• Set up hreflangs to aid search engines like Google in understanding, indexing, and ranking your multilingual website. Hreflangs ensure that search engines recognize localized pages, eliminate duplicate content concerns, and enhance the visibility of your website in different languages. Note that hreflangs are not necessary if your website is not multilingual.

• Country-specific domains like .io, .me, .de, .fr can work harmoniously with hreflangs, further boosting your website's SEO performance.

• It is best practice to have a fallback or default option, even for unsupported languages. You can use the 'x-default' attribute value or provide a general language option when targeting country-specific languages. This ensures a seamless user experience and avoids potential pitfalls in SEO.

Conclusion

The hreflang is an essential tool for effective SEO in multilingual websites. It aids search engines in understanding your site's structure, ensuring that the correct language version is displayed and eliminating duplicate content issues. Using hreflang alongside other SEO strategies can greatly enhance your site's performance, increase user engagement, and help you reach a broader audience.

As illustrated in this article, implementing hreflang on your multilingual website is fairly straightforward. It's a 'set it and forget it' system unless new languages are introduced. Conversely, website localization is an ongoing task and can pose some difficulties. To assist with this, many helpful tools have been developed, such as Localizely. You can try Localizely for free to see how it can streamline your workflow, foster better team collaboration, and much more.

Have you ever wondered how international websites seem to know how to format numbers to match your local region? This isn't just a happy coincidence, it's the outcome of a process known as number localization. As our world becomes more interconnected, understanding and applying number localization becomes crucial, especially in software development. In this article, we'll dive into the intriguing topic of number localization and discuss its rising importance in our modern world.

Understanding the basics of number localization

Before we delve into number localization, it's crucial to know what number formatting is and how it connects to localization. We should also understand why correctly localizing numbers is essential in software products aiming for a global audience.

What is number formatting?

Number formatting is the process of converting raw numeric data into a human-readable format. This can involve decisions like adding thousands separators, determining the symbol for decimal points, and rounding to a specific number of decimal places. The goal of number formatting is to enhance clarity and readability, making numerical information easier to understand and interpret.

What is number localization?

Number localization is the adaptation of numeric data to match the conventions and standards of a specific region or language. It includes formatting numbers according to local practices, such as using the correct symbols for decimal points and thousands separators, and following regional formats for currencies, measurements, and more. The aim of number localization is to ensure that numerical information is presented in a way that is most familiar and understandable to the targeted audience or market.

How are number formatting and number localization different?

Number formatting and number localization are two terms related to how we present numbers, but they have different roles. Number formatting is all about making raw numeric data easy to read. It's a broad term that covers ways to display numbers in a clear, understandable manner.

On the other hand, number localization is more specialized. It's not just about making numbers easy to read, but also about making them fit into the rules and customs of a particular region or language. This means using the right symbols for things like decimal points and separators for thousands, and following local rules for showing currencies, measurements, and so on. In other words, number localization is about making numbers feel familiar and understandable to people from a specific place or culture.

Do numbers need to be localized?

Different countries read and interpret numbers in distinct ways, which can sometimes cause confusion. For instance, in the U.S., the number "1,234" is read as "one thousand two hundred and thirty-four". However, in some European countries, "1,234" might be interpreted as "one point two three four". Similarly, the grouping of digits varies globally. While the U.S. and many countries group digits by threes (like "1,000,000"), places like India have a different grouping system (such as "10,00,000").

This highlights the need for number localization in software development. Products that targeting the global audience must consider these regional and cultural differences to ensure clear communication and a user-friendly experience. Proper number localization enhances readability and comprehension, making content easier to understand.

Localizing different types of number formats

Numerical data takes many forms: inventory counts, item prices, product dimensions and weights, demand expressed in percentages, the number of views a YouTube video has, and so on. Each of these instances requires appropriate localization. In what follows, we'll examine how these diverse number formats are adapted for different languages.

Decimal formatting

Decimal formatting is a common method used worldwide to represent numbers. It's popular because it helps us read large numbers quickly and accurately. However, the exact formatting can vary based on the location or region, using different symbols for thousands and decimal separators.

Often, you'll see numbers grouped in sets of three digits (in the thousands), which is a common practice in many countries. However, some places first group the initial three digits together (thousands) and then group every subsequent pair of digits.

Currencies

Currency formatting is another crucial type of number formatting that varies significantly from one region or country to another. It typically includes the use of a currency symbol, decimal separators for cents (or similar smaller units), and thousand separators. The placement of the currency symbol, the specific symbols used as separators, and the number of digits after the decimal point can all differ based on the specific currency and country.

Measurement units

Measurement unit formatting is another vital aspect of number representation, especially in scientific, technical, and everyday contexts. The way we write measurements depends on the type of unit, the system of measurement being used (metric or imperial), and regional practices.

Percentages

Percentage formatting is a common type of number representation used in a variety of contexts, such as financial reports, statistical data, and everyday conversation. A percentage is a way of expressing a number as a fraction of 100. It is denoted using the percent sign (%).

While it might seem that percentages are universally written the same way, there can be variations in how they are formatted. The basic structure includes a number followed by the percent sign (%), such as 25%. However, the placement of the percent sign, the use of spaces, and the direction of reading can vary based on language and regional practices.

In many English-speaking areas, the number and percent sign are written without a space, like "25%". Yet, in other regions and languages, including French and German, a non-breaking space is used, as in "25 %". Additionally, the reading direction can affect the percent sign placement. For instance, in right-to-left languages like Arabic, the percent sign is on the right of the number.

Scientific notation

Scientific notation is a global mathematical tool used to represent extremely large or small numbers, often seen in fields like astronomy, physics, and chemistry. It expresses a number as a coefficient (between 1 and 10) and a power of ten, like: (number) × 10^(exponent). Positive exponents denote large numbers, while negative ones indicate small ones. For instance, the Earth-Sun distance, about 93 million miles, is shown as 9.3 × 10^7 miles in scientific notation.

Despite cultural and language differences, scientific notation's universal use ensures consistent data presentation in global scientific communication. Some localization may alter the presentation slightly, like using a comma for the decimal point, or different symbols for multiplication or exponentiation. However, the core concept remains globally consistent, emphasizing the essential role of scientific notation in global scientific dialogue.

Compact notation

Compact notation is a type of number formatting often used in digital platforms and social media to express large numbers in a more readable and compact way. This notation simplifies large numbers by using units such as K (thousand), M (million), B (billion), and so on. For example, a YouTube video with 1,000,000 views might be displayed as having "1M views". Similarly, a Twitter account with 2,000 followers would show as having "2K followers".

The use of compact notation can vary across regions and languages due to localization. While the basic concept of using abbreviations like K, M, and B is widely used, the specific abbreviations can differ based on the language.

Custom number format

Custom number formatting lets users create and implement their own unique formatting rules. This comes in handy when standard formatting options don't suit certain needs or preferences. However, localizing these custom formats can be challenging, so it's important to approach this with caution.

Tips and best practices for implementing number localization properly

• Understand your target audience: Before implementing number localization, it's crucial to understand the target audience, including their language, country, and cultural practices. This understanding will guide you in making accurate localization decisions.

• Use locale-specific formats: Different regions and languages have different conventions for number formatting. This includes variations in decimal and thousands separators, digit grouping, currencies, measurement units, and others. Make sure to use the correct representation of data for the locale you're targeting.

• Use proper fonts: When localizing numbers, it's important to choose a font that supports the target languages. This ensures that your content is accurately and effectively communicated, making it more accessible to your audience. Not doing so can lead to misunderstanding, poor user experience, and potential loss of trust in your content or product.

• Follow standard abbreviations: When using compact notation, make sure to follow the standard abbreviations used in the target locale. For example, while 'K', 'M', and 'B' are used for thousands, millions, and billions in English, other languages may use different abbreviations.

• Consider different numeral systems: Some languages may rely on different numeral systems. Be mindful of these differences when localizing numbers for these languages.

• Test your localization: Always test your number localization to ensure it works correctly and is accurately understood by users in the target locale. This can help catch any errors or misunderstandings before they reach the end users.

• Use localization tools and libraries: There are many tools and libraries available that can help with number localization, such as the internationalization (i18n) libraries in many programming languages. These tools can simplify the process and help ensure accuracy.

• Stay updated with changes: Language and cultural practices can evolve over time, and it's important to stay updated with these changes to ensure your number localization remains accurate and relevant.

Conclusion

The world of number localization is vast and fascinating. As our society becomes more global, the need for effective number localization becomes increasingly essential, especially in the realm of software development. Understanding the nuances of different regional and cultural number formats is key to ensuring clear communication and providing a user-friendly experience. From digit grouping and decimal point placement to currency symbols and scientific notation, number localization covers a wide array of formats and uses. Despite the challenges it may pose, the value it brings to global interactions is undeniable. Therefore, adopting the right strategies, staying aware of cultural nuances, and leveraging the right tools is crucial in achieving accurate number localization.

Number localization is a part of the larger software localization process. If you've previously worked on app localization, you're aware of its complexities. To make your work easier, why not try Localizely for free? It might just be the key to ease your workflow!

Ever wondered how software applications manage to tell the time accurately for users worldwide? The secret lies in mastering time zones within the software! As a developer, this skill is essential for ensuring your projects run smoothly, whether it's a travel app or a global collaboration tool.

In this all-in-one guide, we'll delve into the world of time zones, Universal Time Coordinated (UTC), and how they influence your software development. We'll cover the best techniques, clear up misconceptions, and offer practical examples to enhance your understanding of time zones. By the end of this guide, you'll be confident in tackling time-related challenges in your applications, ensuring a seamless experience for users across the globe.

Understanding time zones

A time zone, in simple terms, refers to a region or area on Earth where the local time is standardized and maintained uniformly for the sake of simplicity and coordination. Time zones are primarily based on the Earth's rotation around its axis, with each zone roughly representing one hour of the 24-hour day.

The concept of time zones was introduced in the late 19th century to address the confusion caused by differing local times, which arose as rail travel and communication technologies advanced. Before time zones, each city or town had its own local time, based on the position of the sun. This made scheduling and coordinating events across different locations challenging.

Time zones are generally centered around meridians of longitude, with each time zone spanning 15 degrees of longitude. The starting point for time zones is the Prime Meridian, which is 0 degrees longitude and runs through Greenwich, London, England. As you move eastward or westward from the Prime Meridian, time zones increase or decrease by one hour, respectively.

While time zones are theoretically based on strict longitudinal divisions, political boundaries and practical considerations often result in irregularly shaped zones. Some countries, such as China and India, have chosen to adopt a single time zone across their entire territory, despite spanning multiple theoretical time zones.

Here, you will find a recent time zone map that offers a visual representation of the numerous time zones covering our planet.

Standard Time vs. Daylight Saving Time

Standard Time and Daylight Saving Time are two different systems used worldwide to regulate timekeeping. Understanding their differences, as well as why they coexist, is essential for keeping track of time and adapting to changes in various regions.

Standard Time is the local time within a specific time zone that is based on the mean solar time of a particular longitudinal meridian. It is the default timekeeping system for most countries, ensuring consistency and simplicity in daily life. Standard Time does not undergo any adjustments throughout the year and is the basis for creating time zones worldwide.

In contrast, Daylight Saving Time (DST), or Summer Time as it's known in Europe, is a seasonal time adjustment practice that aims to extend the daylight hours in the evenings during the longer days of spring and summer. Typically, clocks are moved forward by one hour in the spring (usually referred to as "springing forward") and set back again by one hour in the fall ("falling back"). This practice is designed to make better use of daylight, potentially saving energy and allowing people to engage in outdoor activities for longer periods during the evening.

The use of Daylight Saving Time varies from country to country and sometimes even within a country. Many countries in North America and Europe, including the United States, Canada, and Germany, observe DST, while others like Japan, India, and China remain on Standard Time throughout the year. It is worth noting that the start and end dates of DST are not uniform across countries, and some countries may change their DST policies over time.

UTC: Universal Time Coordinated

Universal Time Coordinated (UTC) is the main time standard used around the world to keep time consistent across different places. It is the basis for everyday timekeeping and is widely used in computers, science, and communication. The main goal of UTC is to offer a single reference point for time synchronization, making sure timekeeping is accurate and the same everywhere.

In computer systems, UTC is very important for keeping timestamps accurate and consistent. It is usually the standard for saving date and time information, which allows computers to easily compare and sync time across different time zones. When showing local time to users, computers can add or subtract an offset to UTC based on the user's time zone. This ensures that the right local time is shown, no matter where the user is located.

UTC is often mentioned together with Greenwich Mean Time (GMT) and Zulu time. Although they are similar, there are small differences between these time standards. GMT is an older standard based on the average solar time at the Royal Observatory in Greenwich, London. UTC was created to account for small changes in Earth's rotation and is more accurate because it combines both solar time and atomic time. Zulu time is another name for UTC, mostly used in aviation and military contexts.

Handling time zones in computer systems

Dealing with time zones is crucial for keeping track of time accurately across different regions in computer systems. That's why computers use standardized time formats and methods, like UTC, to make it easier to convert and sync time data.

UTC serves as a consistent reference point, allowing computers to compare and sync time across numerous time zones. When displaying local time to users, computers apply an offset to UTC based on the user's location. For instance, if the UTC time is 12:00 PM, and a user is in New York (UTC-4), the computer shows the local time as 8:00 AM. Similarly, for a user in Paris (UTC+2), the local time displayed would be 2:00 PM. By using UTC, computer systems can operate with a single time zone, and the data shown to users is adapted according to their location and local time.

While you can store dates and times as strings, using timestamps is a more common and efficient way to handle time in computer systems. A timestamp is a unique number that represents a specific date and time, counting the seconds that have passed since the Unix epoch, which started on January 1, 1970, at 00:00:00 UTC.

Speaking of timestamps, it's worth mentioning the year 2038 problem. This potential issue could come up due to the limitations of 32-bit integer timestamps used in many computer systems. On January 19, 2038, these timestamps will exceed their maximum value, leading to incorrect date and time calculations. To fix this issue, developers are encouraged to switch to 64-bit timestamps, allowing computer systems to work properly for a much longer time.

Timezone example for developers

In this example, we'll use JavaScript to demonstrate how to manage dates. We'll show you how to convert a date into a timestamp, which calculates the milliseconds since midnight on January 1, 1970 (UTC), as well as how to format the date according to the user's language and location, like adjusting a UTC date for users in New York (UTC-4) and Paris (UTC+2).

Keep in mind that although we're using JavaScript here, other programming languages also offer ways to handle dates and times. To explore these features, refer to the documentation for each language.

const date = '2023-05-09T10:20:00.000Z';

const timestamp = new Date(date).getTime();
console.log(timestamp); // 1683627600000

const formattedNewYork = new Date(date).toLocaleString('en-US', { 
  timeZone: 'America/New_York' 
});
console.log(formattedNewYork); // 5/9/2023, 6:20:00 AM

const formattedParis = new Date(date).toLocaleString('fr-FR', { 
  timeZone: 'Europe/Paris' 
});
console.log(formattedParis); // 09/05/2023 12:20:00 

Common misconceptions about time zones

Time zones are an integral part of our daily lives and software development, but there are many misconceptions and myths surrounding them. In this text, we will dispel some common misunderstandings about time zones, GMT, UTC, Zulu time, and more.

• GMT, UTC, and Zulu time: Many people believe that GMT, UTC, and Zulu time are the same, but there are subtle differences. GMT (Greenwich Mean Time), UTC, and Zulu are time standards that share the Prime Meridian as a reference point and don't observe daylight saving time. GMT, based on Earth's rotation, was the first global time standard, while UTC, its modern successor, combines Earth's rotation with atomic time for higher precision. Zulu, another name for UTC, is used primarily in aviation and military contexts. Although GMT is still informally used, UTC has become the preferred global timekeeping standard.

• UTC offsets: A common misconception is that UTC offsets range only from -12 to +12 hours. In reality, there are also UTC +13 and UTC +14 time zones. These additional time zones, established to accommodate the unique geographic and political circumstances of certain regions, ensure that local times align more accurately with the natural day-night cycle. In some cases, these extended offsets are also employed to facilitate trade or communications with neighboring countries.

• Non-integer offsets: Time zones are not always offset from UTC by whole hours. Some countries use half-hour or even quarter-hour offsets, like Iran (UTC +3:30), India (UTC +5:30), Nepal (UTC +5:45), and New Zealand (UTC +12:45).

• DST variations: DST does not start or end at the same date and time for all countries.

• DST in the Southern Hemisphere: DST does not follow the same pattern worldwide. In countries located in the Southern Hemisphere, summer occurs during the opposite months, causing DST to start and end at different times.

• Partial state compliance with DST: In some cases, parts of a state may not follow the same DST rules as the rest of the state, such as the Navajo Nation in Arizona, USA.

• Time zone changes: Countries may change their time zones, which are often dictated by politics and regulations rather than natural requirements. Regularly checking and updating your code is crucial for applications that rely on precise time tracking.

• Time zone abbreviation confusion: Abbreviations like CST can represent multiple time zones (e.g., Central Standard Time and China Standard Time). Understanding the context surrounding the abbreviation is essential to avoid confusion.

• Single time zone for large countries: Some countries, like China, use a single time zone across their entire territory, even though they span multiple longitudinal divisions.

• Time zones for the poles: Time zones are rarely mentioned for the North and South Poles due to their inhospitable environments and lack of permanent human settlements.

Time zone best practices for software developers

Time zones play a crucial role in software development, particularly when creating applications for a global audience. To ensure accurate timekeeping, developers must follow best practices when working with dates and times. In this section, we'll discuss essential tips and strategies for handling time zones, daylight saving time changes, testing time-related code, generating UTC dates and times, localization of date and time formats, and more.

• Store dates and times in UTC: Storing date and time values in UTC provides a consistent reference point, simplifying calculations, comparisons, and conversions between time zones. When displaying local time to users, apply the appropriate offset based on their location.

• Generate UTC dates and times on the server-side: Whenever possible, generate UTC dates and times on the server-side to reduce errors and the risk of storing invalid data. However, in some cases, it may not be feasible to perform this on the server-side, and generating UTC on the client-side might be necessary. Be mindful of potential issues and validate user input thoroughly.

• Choose the appropriate format for date and time storage: The performance of operations such as sorting and querying can vary depending on the format used for storing date and time values. Timestamps are a common format used in software systems, but be cautious when designing your system and consider potential issues like the year 2038 problem. Evaluate your requirements and choose a format that best suits your needs.

• Convert time zones with care: Use reliable libraries or built-in functions provided by your programming language when converting between time zones. These tools account for time zone offsets, daylight saving time changes, and other factors, ensuring accurate conversions.

• Handle daylight saving time changes: Be aware of daylight saving time (DST) changes and use reliable libraries or built-in functions to account for them when converting time zones or performing calculations.

• Validate user input: Properly validate user input for dates and times to prevent errors and potential security issues. Consider using a standardized format, such as ISO 8601, to avoid ambiguity when accepting date and time values.

• Localization of date and time formats: When converting UTC dates and times to locale-specific formats, consider the importance of localization to accommodate different date representations across regions and countries. For example, May 9, 2023, would be displayed as "05/09/2023" for a user in the USA and "09/05/2023" for a user in France. Using appropriate localization ensures a better user experience and prevents potential confusion.

• Test time-related code thoroughly: Rigorous testing is essential to ensure the reliability of time-related code. Include tests for different time zones, DST changes, leap years, and edge cases to guarantee your application's smooth operation.

Conclusion

Managing time zones in software development is super important if you want to keep things running smoothly for users all around the world. By really digging into the nitty-gritty of time zones and UTC, you can confidently tackle time-related challenges and create a seamless experience for your users. Just remember to follow best practices like storing dates and times in UTC, using trustworthy libraries for time zone conversions, and testing thoroughly to make sure your software works perfectly across different time zones and adjusts for daylight saving time changes.

Speaking of user experience, localization is key to keeping users happy with your product. And as we've seen in this post, localizing dates and times is a crucial part of working with this kind of data. If you're working on localization and looking for a way to simplify your workflow, try Localizely for free. It might just be the tool you need to make your life a whole lot easier!

Ever wondered how websites know your language preferences without asking? It's all thanks to the Accept-Language header! In this blog post, we'll explore what the Accept-Language header is, its purpose, why it was created, and some additional information that will help you understand this often-overlooked aspect of web browsing. So sit back, relax, and let's dive into the world of the Accept-Language header together!

Understanding the Accept-Language header

The Accept-Language header is a part of the HTTP (Hypertext Transfer Protocol) requests that your web browser sends to a website's server when you access a webpage. Its primary function is to communicate your preferred language(s) for viewing content, enabling the server to deliver content in your chosen language if it's available. This clever feature was designed to enhance your web browsing experience by making it smoother and more personalized, ensuring content is presented in the language you're most comfortable with whenever possible.

The main aim of the Accept-Language header is to express a user's language preferences, but this information can be employed in different ways. Consider the following examples of the most frequent situations where the Accept-Language header is utilized:

• Content localization: By helping websites display content in the user's preferred language, the Accept-Language header fosters a more personalized and enjoyable browsing experience.

• Language-specific features: The header assists websites in offering language-specific features or promotions by determining which users should be exposed to such content.

• Analytics and statistics: The Accept-Language header is a valuable tool for website owners to analyze their users' linguistic preferences. This data can inform decisions about which languages to support and prioritize for translation or other business-related choices.

Accept-Language header structure

The Accept-Language header structure might seem a bit confusing at first, but fear not! After reading this chapter, you'll find that it's not as complex as it appears. All you need is a clear understanding of its structure. So let's dive right in!

The Accept-Language header is made up of one or more language tags. Each tag can be followed by an optional 'quality value' or 'q-value' (a value between 0 and 1), which signifies the user's preference level for a specific language – essentially, it serves as a weighting factor or language priority. When a q-value is provided, it is separated from the language tag by a semicolon. If the Accept-Language header includes multiple languages, they are separated by commas.

Accept-Language: en-US, en;q=0.9, es;q=0.8

When examining the Accept-Language headers sent from various browsers or clients to the server, you'll find that their structure remains quite consistent. While the structure of the Accept-Language header stays constant, the specific languages included in the header can differ. These variations are determined by the language preferences of the client initiating the HTTP request to the server.

To check this for yourself, simply set your preferred languages in your browser settings. Then, open some website and inspect the Accept-Language header your browser sends. You can find this information in the Network tab within the Developer Tools of your browser. The image below shows an example of the Accept-Language header sent when the browser's preferred languages are set to English (United States), English, and Spanish.

Accept-Language header examples

Let's take a closer look at several Accept-Language header examples and explore the details of each:

• Accept-Language: en - This indicates that the user prefers content in English.

• Accept-Language: en-US, en;q=0.9 - This suggests that the user prefers content in US English and English (in general). The server can use this information to prioritize providing content in US English, and if it's unavailable, it may choose the more general English form.

• Accept-Language: en-US, en;q=0.9, fr-FR;q=0.8, fr;q=0.7 - This implies that the user prefers content in a prioritized order of languages, starting with US English, followed by English in general (q=0.9), French from France (q=0.8), and lastly, French in general (q=0.7). The server can use this information to deliver content that best matches the user's language preferences, beginning with the highest priority option and moving down the list if the preferred language is unavailable.

• Accept-Language: * - This indicates that the user is open to receiving content in any language. The server can use this information to provide content in the default or most appropriate language based on its own criteria or the user's geographical location.

Remember, the server isn't obligated to strictly follow the Accept-Language header value. Instead, it serves as a helpful suggestion, guiding the server to better understand a user's language preferences and attempting to provide the most suitable content. Nevertheless, the server ultimately makes the final decision on which language version to deliver, considering factors like content availability, server configuration, or other constraints.

Language detection with the Accept-Language header

As we've mentioned earlier in this post, the primary purpose of the Accept-Language header is to communicate the user's preferred languages to the server. However, the final decision on which language version to deliver ultimately lies with the server, taking into account factors such as content availability, server configuration, and other considerations.

The Accept-Language header plays a significant role in software localization, making the use of software products more enjoyable by adapting content to the user's preferred languages. Moreover, since detecting user preferences is crucial for delivering appropriate content, we encourage you to explore another one of our blog posts that explains how to detect the navigator language to serve the most suitable version of the content.

Internationalizing REST APIs with the Accept-Language header

Localization is crucial for both webpages and REST APIs, as many software applications depend on them and frequently display the acquired data directly. You may have unknowingly used localized REST APIs in various global markets, such as e-commerce and mapping applications. Furthermore, you might have come across websites where most content is in your preferred language, but some information retrieved from non-localized third-party REST APIs appears in an entirely different language. By localizing REST APIs, these inconsistencies can be resolved, ensuring a seamless user experience.

The process of localizing REST APIs is similar to localizing websites. It involves extracting and parsing the Accept-Language header, identifying the best language match, loading the relevant resources for the chosen language, and serving content in that language to the caller.

However, it's important to be careful when using the Accept-Language header while designing REST APIs. Its primary function is to communicate a user's preferred language to the server. In some cases, REST APIs might include locale-sensitive business rules where using a URL or body parameter for a specific region is more appropriate. Therefore, carefully considering all aspects when designing internationalized REST APIs is crucial.

Setting the Accept-Language header in JavaScript

In this section, we will demonstrate a simple example of making an AJAX call using JavaScript's fetch function, along with setting a custom Accept-Language header. Sometimes, this header may be automatically included for you. However, this example shows how effortless it is to set or overwrite the Accept-Language header when needed.

fetch('https://example.com/api/data', {
  method: 'GET',
  headers: {
    'Accept-Language': 'de-DE' // Custom Accept-Language header
  }
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error fetching data:', error));

Conclusion

The Accept-Language header is a powerful yet easy-to-understand tool for software localization. It allows websites and REST APIs to provide content tailored to users' preferred languages, ensuring a smooth and enjoyable browsing experience for everyone. By understanding its structure and applying it effectively, developers can create accessible applications for the global market.

Facing the challenges of software localization? Give the Localizely platform a try! It streamlines the process, making it easy for you to handle translations and work closely with your team in a more efficient manner.

Are you aiming to develop software products that cater to a worldwide audience? Utilizing a user-friendly Localizely translation plugin for Figma can significantly improve your design process. In this blog post, we'll discuss the importance of incorporating localization from the very beginning to prevent potential problems later on. We'll also introduce the Localizely plugin for Figma, a powerful tool that simplifies and enhances your design workflow. So, let's explore how you can revolutionize your design process and create products that appeal to a diverse global audience with the help of an easy-to-use Figma translation plugin!

The importance of planning for localization from the start

Planning for localization right from the start is essential when creating software products, as it helps avoid potential issues later on. Many software development teams often prioritize meeting tight deadlines, which can lead to overlooking the importance of localization in the early stages. This oversight may cause problems such as design breakages due to different text lengths in various languages or difficulties in adapting the design to cater to multiple markets.

By considering localization from the beginning, you save time and ensure a smooth user experience for a diverse audience. Taking the unique requirements of different languages and cultures into account early on helps prevent headaches and enables a more seamless localization process.

How the Localizely plugin for Figma enhances your design workflow

The Localizely plugin for Figma can be a game-changer for your design workflow, making the whole process more streamlined and efficient. Some of the key features of the plugin include helping you save time, minimizing design issues, providing context for translators, and allowing you to test your designs in different languages.

Just imagine handling all of this work manually: exporting texts into a file like a CSV, sending it to translators, and then integrating the translated file back into your design. Don't forget having to create and attach screenshots of your design for translators to understand the context. This approach can be time-consuming and prone to errors, especially when your design goes through several iterations during the app's development.

With the Localizely plugin for Figma, you can simplify these tasks and focus on what truly matters – creating engaging designs for your global audience. The plugin automates many aspects of the localization process, saving you time and reducing the potential for mistakes.

Integrating design, translation, and development

Using the Localizely plugin for Figma makes integrating design, translation, and development a breeze. The process starts with designers creating UIs in Figma in the source language. They then push the texts, along with design screenshots, for translation. Translators use these screenshots as visual context to improve translation accuracy. When translations are complete, designers pull the translated texts back into the design to verify everything is correct. Once satisfied, they can inform developers that the design is ready to be used for developing the localized app. Throughout this process, there may be iterations and adjustments involving designers, translators, and developers to meet all criteria and create a polished final product.

It's important to note that this workflow is often ongoing, as designs, requirements, and target markets can change over time. The Localizely plugin for Figma helps keep everyone on the same page, streamlining the localization process and ensuring the final product is effectively tailored to its diverse audience.

In the subsequent sections, we will guide you on how to accomplish these tasks using the Localizely translation plugin for Figma.

Select design elements for translation

When starting the localization process in Figma, the first step is to identify the design elements that need localization. The screenshot below showcases this using the Localizely plugin for Figma. In this example, the selected text is assigned an auto-generated string key value, which will serve as a unique identifier for the text during translation and development stages.

Push selected texts to Localizely

After choosing the design elements for localization and assigning string key values, the next step is to push this data to the Localizely platform for translation. The image below demonstrates the push configuration within the Localizely plugin for Figma. In this example, we set up the desired Localizely project, specified the language of the text from the design, and checked the 'Upload screenshots' option, which sends a screenshot of the selected design element to Localizely.

After pushing the selected texts to Localizely, you'll receive a success message along with a brief summary of updated translations, newly added keys, and uploaded screenshots.

Translate texts from Figma

The next significant step involves translating the pushed text on Localizely. As seen in the image below, Localizely displays a screenshot of the frame from Figma, which was automatically generated by the plugin. This allows translators to have a visual context while working on their translations.

Once the translator views the screenshot of the design element along with the highlighted text requiring translation, they can begin their work. The image below demonstrates how a translation for German is entered on the Localizely platform.

Pull translated texts from Localizely

Once the translator has finished its work, the designer can download the translated text and preview its appearance in the design. The image below displays the pull configuration within the Localizely plugin for Figma. This is where we choose the Localizely project we want to pull translations from and select the option to create a new design page with translated texts for the German language.

If all goes well, you'll successfully pull translations from Localizely and see a success message, along with the German design page created by the Localizely plugin for Figma. In the image below, you can see the new German page, where the original text from the design has been replaced with its German translation.

Helpful hints for localizing your Figma design

When localizing your Figma design, there are several important factors to consider in order to ensure a seamless and efficient process. In this section, we will discuss helpful hints on how to tackle common challenges and enhance your localization workflow. Here are some key topics we will cover:

• Translations impact on design: Be mindful of text length variations across different languages. Ensure you leave enough space in your design to accommodate these differences, resulting in a clean and visually appealing layout. For instance, German experiences a horizontal text expansion with up to 35% longer texts compared to English, while Korean language may have vertical text expansion.
• Using screenshots for context: Supplying translators with screenshots of your design serves as a visual context, enabling them to more accurately translate texts. This approach reduces the number of iterations during the translation phase and ensures a smoother overall process.
• Auto-prefill string keys with Localizely plugin: The Localizely plugin offers the option to manually enter string key values or use auto-generated ones, which speeds up the process and ensures consistency. Auto-generated string keys follow conventions like 'frameElement' or similar, making it easier to locate them later in the code and design. By utilizing this feature, you can efficiently name string keys while maintaining a streamlined workflow.
• Syncing design with Localizely project: Be aware of the known challenges in maintaining design, translations, and the app after the initial release. Keeping your design and Localizely project in sync when changes are made to the design is crucial. Regular updates help maintain consistency and prevent issues, while ensuring a smooth and efficient workflow between design, translation, and development. This constant synchronization is essential for avoiding inconsistencies and maintaining an easily manageable project.
• Managing designs with significant language differences: When design elements differ significantly across languages, establish a clear workflow to manage these variations, such as using separate pages or components for each language.
• Testing design in multiple languages: Regularly test your design in various languages to ensure it is visually appealing, user-friendly, and free of layout issues. By doing so, you can easily detect broken layouts after pulling translations, allowing you to reduce text lengths or update the layout as needed. This process contributes to a higher-quality software product that caters to diverse audiences.

By following these hints and maintaining a clear localization strategy, you can create compelling and effective designs for a diverse, global audience.

Conclusion

Using the Localizely translation plugin for Figma can revolutionize your design process, enabling you to create software products that resonate with a global audience. Emphasizing localization from the start and implementing a streamlined workflow with the help of this user-friendly plugin will save you time, minimize design issues, and enhance collaboration between designers, translators, and developers. By following the helpful hints discussed in this blog post and adopting the Localizely plugin for Figma, you'll be well-equipped to create engaging and effective designs that cater to a diverse, worldwide market. So, why wait? Start optimizing your design workflow today with the power of Figma and Localizely!

In the fast-paced world of software development, effective communication is crucial. Developers often use software acronyms and IT abbreviations, like numeronyms, to simplify their language. You may have encountered terms like "i18n" (i18n meaning internationalization) or "l10n" (l10n meaning localization) and wondered about their meanings, particularly in software localization.

This post offers a concise introduction to numeronyms, software abbreviations, and software acronyms, including their applications in IT and software development, such as software localization. We'll explore the concept, benefits, and common examples of numeronyms, like "i18n", "g11n", "l10n", and "a11y". By the end, you'll understand these IT abbreviations and acronyms and be ready to use them in your software development communications.

What are numeronyms?

Numeronyms, also known as alphanumeric acronyms, alphanumeric abbreviations, or numerical contractions, are unique abbreviations formed by combining letters and numbers. In most cases, they are created by taking the first letter of a word, followed by the number of letters between the first and last letter, and ending with the last letter of the word. This structure allows for a compact and easily recognizable representation of the original term.

For example, consider the numeronym "i18n". It is derived from the word "internationalization", where "i" is the first letter, there are 18 letters between the first and last letters, and "n" is the final letter. Similarly, "l10n" stands for "localization", with "l" as the first letter, 10 letters in the middle, and "n" as the last letter.

It's important to note that while this is the most common structure, there are some exceptions where numeronyms might not strictly follow this pattern. Nevertheless, the majority of numeronyms found in various industries, including software development, adhere to this format.

While numeronyms are commonly associated with software development, they can also be used in other contexts. Their simple and efficient nature allows them to be easily adapted to a variety of industries and fields, showcasing their versatility and usefulness.

The advantages of using numeronyms in software development

Numeronyms offer several advantages in software development, making them popular and useful within the industry. One primary benefit is their space-saving nature, allowing developers to convey complex concepts in a concise and compact form. This brevity helps reduce the clutter in documentation, code comments, and communication between team members, ultimately leading to more efficient exchanges of information.

Another advantage of using numeronyms is that they facilitate quicker communication. As developers become familiar with common numeronyms, they can easily understand and interpret them without needing to spell out the entire term, thus speeding up conversations and discussions.

Ease of memorization is also an essential benefit of numeronyms. By condensing lengthy terms into a simple alphanumeric structure, developers can effortlessly recall and use these abbreviations in their daily work. This ability to remember and utilize numeronyms enhances productivity and fluency in the development process.

Lastly, the internationalization aspect of numeronyms cannot be ignored. As software development often involves collaboration among diverse, globally distributed teams, it is crucial to have a simplified and universal language that can transcend linguistic barriers. Numeronyms can serve as a common ground for communication, minimizing confusion and misinterpretations across different languages.

Common numeronyms in software development

Numeronyms play a crucial role in software development, as they allow developers to communicate complex ideas efficiently. Here is a list of popular software development numeronyms, along with their meanings, brief descriptions, and full forms:

• a11y - Accessibility: Ensuring that software is usable by individuals with disabilities, by implementing features like screen reader compatibility and keyboard navigation.
• c11y - Compatibility: The ability of software to work with different systems, devices, or software versions without conflicts or issues.
• c12s - Communications: The exchange of information between software components, systems, or users, typically through various protocols or interfaces.
• c14n - Canonicalization: The process of converting data into a standard, canonical form, often used in data processing and XML technologies.
• d11n - Documentation: The creation and maintenance of written materials that describe and explain software features, functions, and usage.
• g11n - Globalization: The process of developing software to cater to global markets, encompassing both internationalization and localization.
• i11l - International: Pertaining to software that is designed to be used in multiple countries, supporting various languages and cultures.
• i14y – Interoperability: The ability of software systems or components to work together seamlessly, exchanging information and utilizing each other's functionality.
• i18n - Internationalization: The process of designing and adapting software to support various languages, regions, and cultures, making it globally accessible.
• k8s – Kubernetes: An open-source container orchestration platform for automating deployment, scaling, and management of containerized applications.
• l10n - Localization: Adapting software to meet the specific requirements of a particular language, region, or culture, including translations, date formats, and currencies.
• l12y - Localizability: The ability of software to be easily localized by adding or modifying elements such as translations, date formats, and currencies.
• m12n – Modularization: The design principle of breaking software into smaller, independent modules that can be developed, tested, and maintained separately.
• m17n - Multilingualization: The process of enabling a single software application to support multiple languages simultaneously, allowing users to switch between languages as needed.
• n11n - Normalization: The process of organizing and standardizing data or software components to reduce redundancy and improve efficiency.
• o11y - Observability: The ability to monitor and analyze the internal state of a software system, typically through logging, metrics, and tracing.
• p13n – Personalization: Adapting the user experience of software to meet individual users' preferences, needs, or interests, creating a more tailored and engaging experience.
• s13n - Standardization: The development and implementation of agreed-upon norms, rules, or specifications in software design and development.
• t9n - Translation: Converting text or software user interface elements from one language to another, making it accessible to a wider audience.
• v12n - Virtualization: The creation of virtual versions of resources or environments, such as servers or storage devices, to improve resource utilization and flexibility in software systems.

These common numeronyms help streamline communication within the software development industry, allowing developers to convey complex concepts more efficiently and effectively.

Common numeronyms in software localization

In the realm of software localization, certain numeronyms are more commonly used and hold particular significance. Among them, t9n, l10n, i18n, and g11n stand out as key terms that are closely related, yet hold distinct meanings. Here, we'll briefly explain the differences between these numeronyms and their specific roles in software localization.

• t9n - Translation: Translation is the process of converting text or software user interface elements from one language to another. It is a crucial step in making software accessible and understandable to users who speak different languages.

• l10n - Localization: Localization goes beyond translation by adapting software to meet the specific requirements of a particular language, region, or culture. This includes not only translations but also adjustments to date formats, currencies, and other locale-specific elements.

• i18n - Internationalization: Internationalization is the process of designing and adapting software to support various languages, regions, and cultures. By making software "internationalization-friendly," developers can more easily localize it for different target audiences. Essentially, internationalization sets the foundation for localization.

• g11n - Globalization: Globalization encompasses both internationalization and localization, aiming to develop software that caters to global markets. It involves designing software with the flexibility to adapt to various languages, cultures, and regions, as well as localizing it to meet the specific needs of each target market.

While these numeronyms are similar in nature and often used in the context of software localization, they represent different aspects of the process. Understanding the distinctions between them is essential for effectively communicating and executing localization tasks within the software development industry.

Conclusion

Numeronyms offer significant benefits in software development, such as efficient communication, easy memorization, and language versatility. Embracing these unique abbreviations can boost collaboration and productivity among diverse teams.

Incorporating numeronyms into daily communication helps developers navigate the ever-evolving landscape of technology effectively. Start using numeronyms to unlock clearer and more efficient communication in your software development work, and witness the improvements in your daily interactions and project outcomes.

In the realm of IT abbreviations and acronyms, software developers often rely on numeronyms like "i18n", "g11n", "l10n", and "a11y" to convey complex concepts quickly and efficiently. By understanding the meaning and significance of these IT abbreviations and acronyms, you can more effectively communicate with your team and leverage these tools to enhance your software development processes. Whether you're working on software localization, internationalization, or accessibility, numeronyms can provide a solid foundation for efficient communication and collaboration.

Effective error handling and localization of error messages are crucial in UI design, as they significantly impact the user experience. Catering to users with diverse languages and cultures requires a seamless and engaging experience. In this article, we'll discuss practical guidelines for error messages and best practices for error handling and localizing error messages in apps. We'll explore easy-to-understand and implement strategies for enhancing your application's user experience.

Prevent errors from happening

The initial step towards improving user experience is preventing user errors through intelligent UI design. By developing interfaces that make it difficult for users to make mistakes, you can considerably reduce error rates and enhance your application's overall usability.

Nielsen's First Law of Computer Documentation underlines that users seldom read documentation unless it's essential for their task. This emphasizes the need to design intuitive UI components that minimize reliance on documentation and reduce the likelihood of users making errors in the first place.

Deliver clear and concise messages

For effective communication in UI design, it is crucial to maintain clear and concise messages. Users are less likely to read and comprehend longer messages. Although writing short messages isn't always possible, aiming for conciseness whenever possible ensures users can quickly grasp the information presented.

Avoid technical terminology

Steering clear of technical jargon in error messages is critical for a positive user experience. Historically, error dialogs in operating systems like Windows contained complex codes and terminology, making it challenging for users to understand the issue. Such messages only increased users' frustration rather than assisting in resolving the problem.

Error messages should be tailored for human understanding, primarily aimed at helping users fix the problem. By employing clear, straightforward language that is easily understood by various users, error messages can effectively guide users through the process of resolving issues without causing further confusion or frustration. Remember, the purpose of error messages is to help users overcome obstacles, not to exacerbate the pain of error handling.

Eliminate ambiguity

Removing ambiguity from error messages is essential for a positive user experience. Most users have experienced the frustration of vague error messages offering no helpful information for issue resolution. To prevent users from feeling exasperated, it's crucial to be specific about the error and provide clear guidance on addressing it.

Adapting messages for different user roles is important, as we cannot assume that everyone has the same level of familiarity with our applications as the developers who created them. By tailoring messages to the user's context, we can better support their needs and help them navigate any issues they encounter.

In some cases, generic error messages like "Something went wrong, please try again later" are acceptable, but this should only be done when the error's cause cannot be determined. Ideally, error messages should provide users with actionable information to help them resolve the problem as efficiently as possible.

Minimize jokes and humor

When it comes to error messages, it's important to minimize jokes and humor. While friendly, light humor can effectively enhance user experience in other areas of a user interface, error messages might not be the most appropriate place for it. Users encountering errors are often frustrated, and humor may not be well-received in such situations.

Using humor in some cases is fine, but it's essential to be mindful of the context and the user's state of mind. Focus on providing clear, helpful information in error messages to assist users in resolving issues, and save the humor for other aspects of the user experience where it can be more effectively utilized and appreciated.

Avoid blaming the user

When users encounter errors in an app, it's essential not to place the blame on them. They are already frustrated, and pointing fingers can worsen the situation. Instead of using phrases like "You did" or "You didn't" when explaining what went wrong, offer clear guidance on resolving the issue.

For example, a more helpful message than "Your password is not strong enough" could be "Password must include at least 8 characters, 1 numeric, and 1 special character from the list...". This approach provides users with actionable steps to address the problem.

It's essential to use a friendly tone and positive language in error messages, avoiding negative words. This creates a supportive environment for users as they navigate through any issues they encounter in your app, ultimately leading to a better user experience.

Select appropriate styles

Choosing appropriate colors and font styles for error messages is essential for creating an effective user experience. Avoid using ALL CAPS in error messages, as it may come across as shouting at the user, which can be off-putting.

When choosing colors for error messages, red is commonly used to signal errors, while green typically indicates successful operations. However, color alone may not be enough to convey the message, especially for users with visual impairments or color blindness. Including icons, such as an exclamation mark for errors, can provide additional visual cues that help users quickly identify and understand the message since they tend to scan more than read.

Offer hints for resolving errors when possible

Providing hints and guidance for resolving errors when possible is a crucial aspect of designing user-friendly error messages. By offering helpful suggestions and clear instructions, you can empower users to resolve issues quickly and efficiently, ultimately improving their experience with your application.

When crafting error messages, consider including actionable steps that users can follow to address the problem. This not only reduces frustration but also minimizes the need for users to seek external assistance, saving them time and effort.

Choose the right UI components

Selecting the right UI component for showing error messages is key to enhancing the user experience. You have options like modal dialogs, toast notifications, banners, and inline feedback. The best choice depends on the context needed for the error message.

Use inline feedback for errors that are closely related to a specific context, and modal dialogs for app-wide issues. When handling form validation, inline error messages work better than long lists of errors in modal dialogs, as they help users stay focused on the context. Also, make sure not to block user inputs with error popups, allowing them to see what's wrong.

Toast notifications can display error messages, but remember that users might not have enough time to read or understand the message before it goes away. It's essential to find the right balance in presenting errors – not too overwhelming or too subtle. For significant, blocking errors, making them stand out is fine.

Try to preserve as much of the user's work as possible and let them fix errors by editing their original input, instead of starting over. By picking the right UI component for showing error messages, you can improve the user experience and make resolving errors more straightforward and user-friendly.

Properly localize error messages

Properly localizing error messages is essential to ensure a seamless user experience across different cultures and languages. When working on localization, it's important to:

• Adapt error messages to different cultures and languages, being careful not to use words or tones that may be offensive in some contexts.
• Consider the variation in length for different languages, as translations can vary considerably and may break the UI. For example, English is more compact compared to languages like German or Finnish.
• Account for different plural rules across languages, and if using ICU Plural in error messages, be prepared to add additional plural forms in localization messages.
• Format numbers, dates, and times in error messages appropriately depending on the language.
• Extract and reuse "common" error messages to reduce translation costs and simplify maintenance. For example, use fewer string keys in localization files (e.g., "commonErrorInvalidEmail" instead of "pageLoginErrorInvalidEmail", "pageRegisterErrorInvalidEmail", etc.) if the error message is the same.
• Prioritize accessibility and consider screen readers by translating hidden text as well. Some websites, for instance, prefix error messages with a hidden "Error" span for screen readers.

Invest in preventing errors from recurring

Continuously improving the UI/UX of a product involves identifying and preventing errors from recurring. To achieve this, it's crucial to track errors and gather insights for future improvements. Utilizing analytics tools to collect data on errors that occur within the application can help identify patterns and uncover areas where users face difficulties or confusion.

Conducting usability tests with real users is another valuable strategy, as it allows you to gather qualitative feedback on the user experience. This feedback can be used to identify specific pain points and areas for improvement. By analyzing the gathered data and feedback, you can prioritize and implement changes, addressing the most critical issues first.

Iterating on your design and making incremental improvements based on the insights gained from analytics and usability tests is essential for creating a better product and a more satisfying user experience.

Conclusion

Mastering UI error handling and localization is essential for creating a seamless user experience. Ensuring that error messages are clear, concise, and informative, while avoiding technical jargon and blame, contributes to a positive user experience. Additionally, choosing the appropriate UI components for error presentation, providing hints for solving errors, and tracking errors for continuous improvement are all vital strategies for optimizing the user experience.

Localizing error messages and adapting them to various cultures and languages is critical, as it helps prevent misunderstandings and UI breakages due to language differences. Using the right tools, like Localizely, can greatly assist in this process by providing support for proper plural rules, glossaries, translation memory, and collaboration with translators, ensuring that your app's error messages are accurately and effectively localized.

By implementing the best practices discussed in this post, you can significantly enhance the overall user experience, making your application more enjoyable and user-friendly across different languages and cultures.

In today's globalized world, effective communication is more important than ever. As businesses expand across borders, the need for accurate and culturally sensitive translation and localization services has become paramount. Whether it's translating product descriptions, localizing a website, or adapting marketing materials, making the right choice for your translation needs can significantly impact your company's success.

But with so many options available, how do you decide which solution is best for your business? In this blog post, we'll explore the key differences between in-house translators, translation agencies, and freelance translators, providing you with valuable insights and practical advice to make informed decisions.

In-house translators

In-house translators are full-time employees of a company who work directly within the organization, focusing on translation and localization projects. This approach to translation services has both advantages and disadvantages, which we will explore below:

Pros:

• Seamless communication and collaboration: In-house translators work closely with other team members, allowing for clear and direct communication. This can lead to better collaboration and faster turnaround times for translation projects.

• Consistent quality control: As in-house translators are dedicated to the company, they have a better understanding of the brand's voice, style, and guidelines. This consistency ensures that translations maintain a high standard of quality across all projects.

• Stronger understanding of company culture and objectives: In-house translators are immersed in the company culture and have a deeper understanding of its goals and objectives. This knowledge can help create more accurate and targeted translations that resonate with the intended audience.

Cons:

• Limited language expertise: In-house translators may only be proficient in a few languages, which can limit a company's ability to reach a wider audience. Expanding language offerings may require hiring additional translators, which can be time-consuming and costly.

• Higher overhead costs: Employing in-house translators means taking on additional costs, such as salaries, benefits, and office space. These expenses can add up, especially for small businesses or those with limited budgets.

• Difficulty in scaling operations: Scaling translation services to meet increasing demand can be challenging with in-house translators. As the volume of work grows, companies may need to hire more translators, which can be time-consuming and impact the overall efficiency of the translation process.

Ideal situations for using in-house translators

In-house translators can be particularly beneficial in certain situations where your business requires a deep understanding of your company's culture, objectives, and industry-specific expertise. One of the ideal scenarios for using in-house translators is when your company has long-term projects or recurring translation needs. By having translators on your team, you can ensure consistency in the quality of translations and better alignment with your business goals.

Another situation where in-house translators can be advantageous is when your company operates in a niche market or requires specialized knowledge. In-house translators with expertise in your specific field can deliver more accurate and targeted translations, ensuring that your message resonates with your intended audience.

Additionally, when your business deals with confidential or sensitive information, it is crucial to maintain the highest level of security. In such cases, having in-house translators can minimize the risk of security breaches, as the information remains within your organization.

Translation agencies

Translation agencies are companies that specialize in providing translation and localization services to clients across various industries. They work with a network of professional translators, often offering a wide range of language pairs and specialized expertise. Let's take a look at the advantages and disadvantages of working with translation agencies:

Pros:

• Access to a wide range of language pairs: Translation agencies typically work with a large pool of translators, enabling them to offer services in numerous language pairs. This extensive coverage allows businesses to reach a broader audience and expand into new markets more easily.

• Professional translation services and certified translation services: Agencies usually have rigorous quality control processes in place, ensuring that translations meet high industry standards. They may also offer certified translations, which are required for certain legal and official documents.

• Specialized expertise in various industries: Translation agencies often have teams of translators who specialize in specific sectors, such as medical, marketing, or website translation. This specialized knowledge ensures that the translations are accurate and relevant, tailored to the unique needs of each industry.

Cons:

• Potential higher costs: Working with a translation agency can sometimes be more expensive than other options, due to factors like administrative overhead and the agency's profit margin. This may not always be the case, but it's essential to compare prices and consider the overall value provided.

• Less control over translation processes: When working with an agency, you may have less direct control over the translation process, as communication usually goes through account managers or project managers. This can make it more challenging to address specific concerns or provide real-time feedback on ongoing projects.

Ideal situations for using translation agencies

Translation agencies can be the ideal choice for businesses in various situations where diverse language pairs, professional translation services, and industry-specific expertise are required. When your company is looking to expand into new markets and needs to communicate with audiences speaking multiple languages, a translation agency can provide access to a wide range of language pairs, ensuring your message is accurately conveyed to different regions.

Furthermore, translation agencies often have dedicated teams with expertise in various industries, such as medical, marketing, or website translation. This specialized knowledge enables them to deliver high-quality translations that are tailored to your specific sector, allowing your business to effectively reach and engage with your target audience.

Another situation where translation agencies can be advantageous is when your company requires certified translation services for legal or official documents. Agencies have the necessary certifications and accreditation to provide translations that are recognized by governmental bodies and other organizations, ensuring compliance with regulations and legal requirements.

In addition, translation agencies can manage large volumes of work and tight deadlines more effectively, as they have the resources and infrastructure to handle complex projects. This capacity allows your business to scale its operations and meet the demands of an ever-growing global market.

Freelance translators

Freelance translators are self-employed professionals who offer their translation services on a project-by-project basis. They usually work independently or collaborate with clients directly, without being associated with a specific company or agency. Here are the advantages and disadvantages of working with freelance translators:

Pros:

• Cost-effective and flexible pricing options: Freelance translators often have lower overhead costs, allowing them to offer competitive rates compared to translation agencies. They may also provide more flexible pricing options, such as discounts for larger projects or long-term collaborations.

• Personalized attention and service: When working with a freelance translator, you have the opportunity to communicate directly with the person handling your project. This close collaboration enables better understanding of your specific requirements and ensures that the final product meets your expectations.

• Opportunities for working as a translator from home: Freelance translators typically work remotely, making it an ideal option for those looking for work-from-home opportunities. This flexibility can help freelancers maintain a better work-life balance while still delivering high-quality translations.

Cons:

• Potential inconsistency in quality: Since freelance translators work independently, the quality of their work may vary depending on their experience and expertise. This inconsistency can pose a risk for clients who require consistent, high-quality translations.

• Limited capacity and availability: Freelance translators may have limited capacity, as they handle all aspects of their business, from project management to actual translation work. This limited availability can sometimes result in longer turnaround times or difficulty in accommodating last-minute requests.

Ideal situations for using freelance translators

Freelance translators can be an ideal choice for businesses in a variety of situations where cost-effective, flexible pricing options and personalized attention are needed. When your company has occasional or smaller-scale translation projects, freelance translators can offer competitive rates while still delivering quality work. This allows your business to effectively manage translation costs without compromising on the quality of your global communication efforts.

Moreover, freelance translators can provide personalized attention and service, ensuring that your translation projects receive the focus they deserve. They often have the flexibility to accommodate specific requests and tailor their services to meet the unique requirements of your business. This customized approach can result in translations that accurately reflect your brand voice and resonate with your target audience.

Another situation where freelance translators can be advantageous is when your company requires expertise in a rare language pair or a highly specialized subject matter. Freelancers, with their diverse backgrounds and skill sets, can offer niche expertise that might be difficult to find within a translation agency or among in-house translators.

Additionally, working with freelance translators allows your business to tap into a vast pool of talent, enabling you to find the best fit for your specific needs. This flexibility can help ensure that your translations are of the highest quality and meet your project objectives.

Comparing translation solutions: Key considerations

As you explore different translation solutions for your business, it's essential to weigh various factors to make the best decision. Here, we'll briefly compare the key considerations when choosing between in-house translators, translation agencies, and freelance translators.

Price: Cheap vs. Professional translation services

While cost is an important factor, it's crucial to strike a balance between affordability and quality. In-house translators may have higher overhead costs, while translation agencies can offer a range of pricing options depending on the scope and complexity of the project. Freelance translators often provide cost-effective and flexible pricing, but it's essential to ensure that the quality is not compromised.

Turnaround time and scalability

When considering translation solutions, it's vital to assess how quickly your projects can be completed and if the service can scale with your growing needs. In-house translators may offer faster turnaround times due to seamless communication but could face challenges in scaling operations. Translation agencies often have the resources to handle larger volumes and tight deadlines, while freelance translators may have limited capacity and availability.

Quality assurance and certification

Ensuring that your translations are accurate and adhere to industry standards is paramount. In-house translators can offer consistent quality control, while translation agencies typically have rigorous quality assurance processes and can provide certified translations when necessary. Freelance translators might have varying levels of quality; hence, it's essential to assess their expertise and experience.

Industry-specific expertise

Different industries require specialized knowledge to ensure accurate translations. In-house translators may possess a deep understanding of your company's specific niche, while translation agencies usually have dedicated teams for various sectors such as medical, marketing, or website translation. When working with freelance translators, it's crucial to verify their expertise in your particular industry to guarantee high-quality translations.

By evaluating these key considerations, you can make a well-informed decision about which translation solution best suits your business needs and objectives. Remember, the goal is to find the right balance between cost, speed, quality, and expertise to achieve effective and accurate communication in your target market.

Tips for optimizing translation and localization services

Optimizing your translation and localization services is crucial for ensuring the success of your global communication efforts. To make the most of your chosen translation solution, whether it's in-house, agency-based, or freelance, consider implementing the following tips:

• Establish clear project objectives: Before initiating any translation project, take the time to define your goals and expectations. Identify your target audience, the desired tone and style, and any industry-specific requirements. Providing a clear brief to your translation team helps streamline the process and ensures that the final product aligns with your objectives.

• Ensure effective communication: Maintain open and transparent communication with your translation team, whether it's an in-house translator, agency, or freelancer. Encourage them to ask questions and clarify any ambiguities during the translation process. Providing prompt feedback and addressing concerns in real-time can help improve the overall quality and accuracy of the translations.

• Regularly evaluate and reassess your translation solution: Continuously assess the performance of your chosen translation solution to ensure it meets your evolving business needs. Monitor the quality of translations, turnaround times, and overall satisfaction with the service. If necessary, don't hesitate to make changes or explore alternative options to find the best fit for your company.

By following these tips, you can optimize your translation and localization services, ensuring that your message is effectively conveyed to your target audience. Remember, the key to successful global communication lies in a strategic approach, clear objectives, and open collaboration with your translation team.

Conclusion

Selecting the right translation solution requires careful consideration of your unique business needs and objectives. This blog post highlighted the key differences between in-house translators, translation agencies, and freelance translators. Localizely simplifies collaboration with all these types of translation services by offering a platform that enables easy project tracking, communication, and context sharing. Moreover, Localizely integrates with Gengo, a leading translation provider, for professional translation services. Make an informed decision and leverage powerful tools like Localizely to ensure effective communication and high-quality results for your global audience.

In today's globalized and interconnected digital landscape, catering to a diverse audience with varying language preferences has become increasingly important. This is where a language selector, also known as a language switcher, plays a crucial role in enhancing user experience.

What is a language selector?

A language selector is a user interface (UI) component that allows users to choose their preferred language when interacting with a website or app. The primary function of a language selector is to facilitate seamless language switching, ensuring that users can access content in the language they are most comfortable with. This, in turn, improves the user experience (UX) and promotes engagement with the digital product.

Do we need language selectors in apps?

Language selectors significantly improve user experience (UX) by empowering users to customize their interactions with the app. When users can effortlessly switch to their preferred language, they are more likely to engage with the app, understand its content, and navigate it with ease. This ultimately leads to higher satisfaction rates and increased user retention.

Why using IP addresses or browser language settings may not always work?

Relying on IP addresses or browser language settings to choose a user's language might not always be accurate. IP-based location detection can have issues because of VPNs, proxies, or when a user is traveling abroad. Browser language settings might not represent the user's current preference or may have been set up by default.

This is why it's important to have a dedicated language selector along with IP-based or browser language settings. A language selector lets users manually pick their desired language, giving them control over their experience and making the app or website more accessible to a diverse audience.

The controversial use of country flags in language selectors

The use of country flags in language selectors has been a topic of debate among designers and developers for quite some time. While flags can add a visually appealing and easily recognizable element to language selectors, they are not without controversy.

The debate surrounding the use of country flags in language selectors stems from several concerns. First and foremost, flags represent nations, not languages. Using flags to symbolize languages can lead to confusion or misrepresentation, as many countries are home to multiple languages, and some languages are spoken across several nations. For example, using the Swiss flag to represent German may alienate Austrian or German users, while using the Spanish flag for the Spanish language could overlook users from Latin American countries.

Additionally, the use of flags can inadvertently evoke political or cultural sensitivities. By associating languages with specific countries, flags can perpetuate stereotypes or unintentionally exclude certain groups of speakers. In some cases, users may feel that the use of a particular flag shows bias or favoritism towards a specific country or political entity.

Despite these concerns, there are benefits to using flags in language selectors. Flags are visually engaging and can quickly communicate the concept of language selection to users. They can also help users identify their preferred language more rapidly than text alone, especially when users are not fluent in the default language of the app or website.

To address the concerns associated with using flags, designers can consider alternative design approaches for language selectors:

• Text-based selectors: Instead of using flags, use the name of the language in its native form (e.g., English, Español, Français). This approach is more inclusive and avoids the potential pitfalls associated with flags.

• Language icons or abbreviations: Use language icons or ISO language codes (e.g., EN, ES, FR) to represent languages without associating them with a specific country.

• Hybrid approach: Combine text and icons or abbreviations in the language selector to strike a balance between visual appeal and inclusivity.

Language selector design

Language selector design should align with the rest of the app and be easily discoverable and usable. Common implementation methods include:

• Selection menus: Ideal for numerous languages, drop-down menus are simple to design and implement. They are typically found at the top right or bottom of a page.

  

• Modal dialogs: Similar to menus, these provide more configuration options like search, country grouping, and currency changes due to their larger size and prominence.

  

• Dedicated language buttons: Suitable for specific markets with a limited number of languages, buttons can be added to the navigation menu for quick language changes. However, space constraints and button placement require careful consideration.

  

• Text links: A middle ground between buttons and menus, text links in the footer cater to multiple languages without overwhelming the user interface.

  

Language selector examples

In this section, we'll examine language selector examples from popular websites, analyze their implementation on desktop and mobile versions, and discuss the strengths and weaknesses of their approaches.

Airbnb

The Airbnb website on desktop features two language selectors. The first one is in the top menu, marked with a 'globe' icon, and opens a modal dialog for setting language and currency preferences. The second selector is in the sticky footer, alongside a currency selector. On mobile, there's one language selector in the footer, with a currency selector as well. Both desktop and mobile versions of the Airbnb website make it easy to find the language selector, thanks to the 'globe' icon and native language names for easy recognition.

JetBrains

The JetBrains website on desktop has two language selectors: one in the top right corner and another in the footer. On mobile, there's a single language selector in the footer. Both selectors use the familiar 'translation' icon, and languages are listed in their native names for easy recognition. The placement of language selectors in expected locations makes them easily discoverable on both desktop and mobile versions of the site.

Tesla

The Tesla website, both on desktop and mobile, has one language selector located in the top right menu, marked with a 'globe' icon for easy recognition. Languages are grouped by region (North America, Europe, Middle-East, and Asia/Pacific) and displayed in their native names for easy identification. One drawback is that the language selector can be harder to find when opening a page in an unfamiliar language, as it requires an extra click on the menu. However, since the menu is in the top right corner, where users typically expect it, it remains fairly easy to locate.

Vimeo

Vimeo features a single language selector on its website, located in the footer for both desktop and mobile versions. The simple dropdown menu includes various languages in their native names for easy recognition. However, the language selector lacks an icon (e.g., 'globe'), which might make it harder for users to find if they accidentally open the site in an unfamiliar language.

Shopify

Shopify's website features a single language selector in the footer for both desktop and mobile versions, marked by the easily identifiable 'globe' icon. Unlike other sites, Shopify primarily displays country names instead of language names. Some websites, particularly large companies and corporations, opt to use region or country selectors to present the appropriate website version to users. While less common, this approach is also considered acceptable in practice.

Language selector best practices

Language selector best practices are crucial to ensure an effective and accessible user experience. Here are some general design principles and recommendations for creating a user-friendly language selector:

• Prioritize usability and accessibility: Make sure your language selector is easy to use and understand, accommodating users with varying levels of language proficiency and digital literacy.

• Use native language names and formats: List languages using their locale format and spelling, making it instantly recognizable to native speakers (e.g., use Deutsch instead of German).

• Offer automation with customization: While automatically setting the language based on IP address or browser preferences is useful, always provide users the option to manually select their preferred language for a tailored experience.

• Make the language selector easy to find: Place the language selector in noticeable areas such as the top menu or footer. Studies suggest top corners (left or right) for desktop applications and websites since users check the upper right and top left for language options. For mobile apps, position it above the fold or in the navigation menu.

• Avoid using flags: As discussed earlier, flags can be controversial and misleading. Instead, opt for text, icons, or a combination of both to represent languages.

• Use familiar visual representations: Use familiar visuals, such as a globe or map icon, with language names for an intuitive language selector. This helps when users encounter unknown languages or accidentally switch to one.

• Grouping and sorting languages: For apps offering a large number of languages, group or sort languages logically or provide a search function with autocomplete to help users find their preferred language more easily.

• Allow users to change language, country, and currency separately: International shoppers often expect to change site language, shipping country, and preferred currency independently. Also, they may prefer the original language for more detailed product information or additional listings. Others might seek a better exchange rate with a different currency, while some are simply curious about the company's global presence.

Conclusion

In summary, designing an effective language selector is crucial for improving user experience and catering to a diverse global audience. This blog post highlighted the importance of language selectors in apps and websites, discussed the controversy surrounding the use of country flags, and shared various design approaches and best practices. By examining popular websites' language selector implementations, we can learn valuable lessons to guide our own design choices. As you work on your apps and websites, prioritize creating a user-friendly and accessible language selector to enhance user engagement and ensure a seamless experience for all your users, regardless of their language preferences.

Since its debut in 2016, Figma has been changing the design processes' conditions and direction.

Just a few years ago, it was unimaginable for a designer to open its design tool in a browser and share the design on a link with other colleagues. They couldn’t open it on different computers with different operating systems outside the same office.

Figma made all that possible. While at the same time, it opened its tool for marketers and developers.

Additionally, Figma gathered a large community of designers and developers. They are creating so-called plugins to automate some steps or triggers in Figma even more.

There are currently more than 200 plugins available in the Figma community. Sometimes it’s hard to understand which ones are essential and which are just creating chaos in your workflow.

That’s why we analyzed which Figma plugins helped us and other teams to design apps faster and more effectively.

What are Figma plugins?

Figma itself defines plugins as “programs or applications created by the community that extended the functionality of Figma and FigJam.”

Moreover, they’re usually accomplishing one or more actions that are usually done manually by users.

For example, a Styler plugin automatically creates a brand color palette in two clicks. This is something a designer usually would need 30-60 minutes for.

Generating Style Guides in Figma Automatically

What are the best Figma plugins?

For us, the best Figma plugins are easy to incorporate into the workflow, saving us a ton of time and space.

While all plugins are nice to have, here’s the list of our “must haves”

1. Localizely Figma integration

What does this plugin do?

Localizely plugin for Figma amplifies the localization workflow connecting the design and translation.

How does it save you time?

This plugin helps you get various language versions of designs for a multilingual app with just a few clicks.

It lets designers pull translations directly into the design and save it as a new card without manual input. This way, you can double-check how the translation influences the design in every version and have it ready for deployment in a matter of minutes.

The platform itself allows the developers just to upload and download ready-to-use localization files. They just need to push them into the app, again, without manual edits and coding. Additionally, translators can get the context needed for better and more efficient translations. Localization specialists can monitor and review everything through the translation editor.

Persons included in the localization project will have more effective collaboration with each other. The team will be satisfied, designers, translators, and product managers included, as it enables a better overview of the process.

When to use it?

Feel free to use this tool whenever you're working on localization, whether you’re localizing content marketing materials, an app, or software at any development stage.

How much does this service cost you?

Localizley Figma plugin is available on all Organizational plans. However, the 14 days trial period is available, so you can easily check if this plugin is a game changer for you.

2. Story set

What does this plugin do?

It enables you to let your imagination go wild. Just think about thousands of illustrated concepts with editable colors and backgrounds that also can be animated. All of them are available for you with this plugin. Sounds like heaven for those creative minds in the industry.

How does it save you time?

Storyset is created by Freepik, so its database of graphics and illustrations is available for easy import, adjustment, and even animation. Once you find what you are looking for, with just a few clicks, you’ll have them directly inserted into your design.

The bonus is that you can select the style, color, background, and other small things that make a big difference when it comes to aesthetics.

When to use it?

When you want to complement your app design with matching illustrations and round them up into a complete and unique package in the shortest amount of time possible.

How much does this service cost you?

Storyset is free of charge.

3. Iconify

What does this plugin do?

It enables you to import Material Design Icons, FontAwesome, Jam Icons, EmojiOne, Twitter Emoji, and many other icons to Figma documents as vector shapes.

How does it save you time?

Iconify has a very flexible policy that allows you to have more freedom. You can pick from thousands of icons without worrying about compatibility with third-party plug-ins.

This not only saves your time but also saves your energy and money and enables you to work carefree.

When to use it?

When you want to skip the whole drama called vendor lock-in while creating icons in your app and just work in peace enjoying the variety of choices and the ease of the process, oh, and the time you saved.

How much does this service cost you?

Just recently, Iconofy switched to open-sourced operation mode, so it is currently free for use.

4. Figmoji

What does this plugin do?

Figmoji enables you to add seamless emojis to your design by simply selecting the one that you want, and it’s done.

How does it save you time?

The process of picking the emoji you want and taping it to place it on your design sounds pretty time-saving to us. No copy-paste, range changing, or manual creation is involved.

When to use it?

When you want to express emotions about something related to the user experience in your app, or any other part of the design.

How much does this service cost you?

Figmoji is open-sourced and available for free-range use.

5. Spelll

What does this plugin do?

Spell doesn’t let you make any spelling mistakes that can jeopardize your design. This means you’ll let your mind flow and your fingers type without worrying about possible mistakes. Yours is to focus on the message you want to transmit to the user.

How does it save you time?

It constantly checks your typing and informs you of spelling errors. The best part is that with just one click, you'll be able to fix it.

Spelll knows 43 languages from around the world. Thanks to that, it provides amazing service to countless human beings, saving them enormous amounts of time.

When to use it?

When you want to design without fear of mistakes. Spelll will automatically remember your language and start immediate tracking.

Avoiding spelling mistakes that sometimes can be embarrassing will contribute to your professional reputation and seriousness.

How much does this service cost you?

Spell has a trial period of seven days. After that, you’ll need to either choose a pricing plan that suits your needs or deal with the limitation to Figma files with 100 text layers or less

6. Wireframe

What does this plugin do?

Wireframe enables you to create beautiful wireframes, user flows, prototypes, and basic structures. All are listed without other kits, files, or skills required.

How does it save you time?

With this rich library, you can find what you need and just drag and drop to add it on Figma, and that’s it. You don’t need anything else. Sounds like child’s play.

When to use it?

When you want access to more than 350 custom build cards that cover most web and mobile elements and interactions. They have multiple use cases covered.

How much does this service cost you?

Wireframe is currently not billing for its services.

7. Mapsicle

What does this plugin do?

Mapsicle frees you from hoarding endless counts of map screenshots on your computer. You’ll be able to place maps wherever you need them in just a few clicks. Simply as that.

How does it save you time?

It allows you to import a map from the Mapbox database and adjust the location, style, zoom level, and other needed details.

When to use it?

When you want to simplify an unnecessarily complicated process. The bonus is that you have more customized options to get the most accurate location.

How much does this service cost you?

While Mapsicle is currently not charging for the usage of their plugin, Mapbox has a wide range of free and paid plans, so the usage of this plugin can lead to eventual costs.

8. Breakpoints

What does this plugin do?

Breakpoints plugin enables you to preview a responsive layout inside a Figma frame and to share animated prototypes.

How does it save you time?

You can open the plugin window, and anyone in your team can resize the frame without the installed plugin. Also, you can just share an animation prototype for the rest.

When to use it?

When your app, software, or website needs to be responsive. In 2023 that means whenever you're creating any digital product.

How much does this service cost you?

Breakpoints have a pay-once-use-forever policy. This policy guarantees you a lifetime license with all future plugin updates. They also have different licenses; you can check here and find the most suitable one for you.

9. Chart

What does this plugin do?

Chart uses real or random data to create the most popular charts, as the name says obviously. And who doesn’t like charts?

How does it save you time?

It allows you to bring data from editors like Excel, Numbers, and Google Sheets. Plus, it has a live connection with Google Sheets and also remote JSON (REST API), local CSV, and JSON files

When to use it?

When it’s important to show data and research results for users in your app, if you do it through charts, it makes a better and more professional impression. Also, pictorial representation is more striking and attracts more attention.

How much does this service cost you?

Chart offers some of its services for free, but if you need more for a very decent price you can choose other options.

10. LottieFiles

What does this plugin do?

LottieFilles enables you to convert a static design into a GIF. Something like giving life and movement to your design.

How does it save you time?

You get access to a library of thousands of free animations. Once you start using it, you’ll always have all your animations previewed on LottieFiles. Yours is only to pick the right one for you, then simply drag and drop, that’s it.

When to use it?

When you want to spice things up a bit but don’t want to risk changes in the design and style with tools switch. The process is simple, and the best thing is that all animations are of high quality.

How much does this service cost you?

Lottie Files currently offers its services for free.

11. Arrow auto

What does this plugin do?

Arrow plugin allows you to draw arrows smoothly and consistently. It’ll connect your cards, remember their position, and keep connection automatically even if you move the cards.

How does it save you time?

With the option called "Update Positions," you don’t need to worry when moving the elements around. When you turn this option on, all the arrows will auto-track the elements’ position. Easy peasy!

When to use it?

When you want to adjust the color, opacity, and stroke width of all arrows together. Consistency has never been simpler with this plugin, and the whole draw arrow work can be done with no hustle.

How much does this service cost you?

You can point the arrows and draw them free of charge with Arrow auto.

12. Styler

What does this plugin do?

Styler generates styles based on selected layers, which allows you to control your style and keep it the same throughout your design.

How does it save you time?

You can manage multiple styles at once, which means you can faster achieve and maintain the desired style.

When to use it?

When you want to create, remove, rename and update styles. Or even when you want to move them from one file to another, it can be done by simply extracting them.

How much does this service cost you?

Basic options for individuals and teams are free, but if you need advanced services, check Styler's pricing here.

13. Contrast

What does this plugin do?

With the Contrast plugin, it’s extremely easy to check the contrast ratios of colors as you work.

How does it save you time?

By scanning entire pages, you’ll be able to receive reports of all text-based contrast issues. This will facilitate the process of their optimization.

When to use it?

When you want to find the color behind selected elements or to see all text-layer color issues on entire pages, and you want it fast.

How much does this service cost you?

Contrast is made by the Maark design team, and it’s free of charge.

14. Content Reel

What does this plugin do?

Content Reel optimizes your workflow if you’re repetitively using certain strings of texts, images, and design cards through development.

How does it save you time?

You can import strings of existing texts, images, and icons from their database, or you can create custom content and share it with other Figma users. You can then pin the content you often use to your home screen, and with single click access, drag and drop them to the current design you’re working on.

When to use it?

When you’re working on an app, software, or website with multiple pages with nearly repetitive design layouts but with little mixes and switches.

How much does this service cost you?

Made by Microsoft and Eugene Gavriloff, and you can use it for free on Figma.

Amplify your design

Feel free to use all the plugins above. Figma is bringing them to you for a better experience, easier work, automated processes, and saving precious time.

With all these aids, you have everything you need just in front of you, usually only a few clicks away, so take advantage of it and enjoy the process.

JavaScript Intl API is a built-in object in the JavaScript language that provides internationalization support through its various constructors and functions. The Intl object is the namespace for the ECMAScript Internationalization API and offers language-sensitive features such as string comparison, number formatting, and date and time formatting.

The API allows developers to format and display data for a variety of languages and cultures, making it easier and more efficient to localize web applications. The functions provided by the Intl object handle complexities such as different calendars, time zones, and currency symbols, making the process of internationalization much simpler.

The Importance of the JavaScript Intl API

When building web applications or software, it is important to consider the cultural preferences of users. The Intl API provides a way to format data, such as numbers, dates, and times, based on the user's cultural preferences. This helps ensure that the data displayed to the user is in the format they expect. For example, different countries have different date formats. The Intl API can handle these differences and provide the correct format automatically.

The Intl API also provides language-sensitive string comparison. This is important when sorting and searching data. For example, in some languages, characters with diacritics (such as accents) are considered distinct from their base letters. The Intl API takes this into account and provides accurate sorting and searching results.

By using the Intl API, developers can make sure that the data displayed in their web applications or software is accurate and in the format expected by users, which leads to a better user experience.

JavaScript Intl API in different runtime environments

The Intl API is supported in both web browsers and in Node.js. In this section, we will cover how it can be used and what are the requirements for these two environments.

JS Intl in Browsers

The Intl API is supported in all modern web browsers, including Google Chrome, Mozilla Firefox, Apple Safari, and Microsoft Edge.

Using the Intl API in browsers is simple and does not require any additional packages or libraries. The API is available as a built-in object in the browser, ready to use.

Some older browsers may not support Intl API. In case you need to support such browsers as well, consider using polyfills.

JS Intl in Node

In Node.js, the Intl API is supported in newer versions.

Using the Intl API in Node is simple as in browsers and it does not require any additional packages or libraries.

Some older versions of Node.js may not support Intl API, or they support it partially. In case you need to support such environments as well, please check the official Node documentation and full-icu package.

Using the JavaScript Intl

The JavaScript Intl API provides a powerful toolset for formatting numbers, currencies, dates, and times in a culturally-sensitive manner. In this section, we will show some formatting examples with the Intl API.

Formatting Numbers

let number = 123456.789;

let enFormatter = new Intl.NumberFormat('en-US', {
  style: 'decimal',
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});
console.log(enFormatter.format(number)); // 123,456.79

let frFormatter = new Intl.NumberFormat('fr-FR', {
  style: 'decimal',
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});
console.log(frFormatter.format(number)); // 123 456,79

Formatting Currencies

let amount = 123456.789;

let enFormatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});
console.log(enFormatter.format(amount)); // $123,456.79

let frFormatter = new Intl.NumberFormat('fr-FR', {
  style: 'currency',
  currency: 'EUR',
  minimumFractionDigits: 2,
  maximumFractionDigits: 2
});
console.log(frFormatter.format(amount)); // 123 456,79 €

Formatting Dates

let date = new Date('2023-02-08T00:00:00');

let enFormatter = new Intl.DateTimeFormat('en-US', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
});
console.log(enFormatter.format(date)); // February 8, 2023

let frFormatter = new Intl.DateTimeFormat('fr-FR', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
});
console.log(frFormatter.format(date)); // 8 février 2023

Formatting Relative Time

let enFormatter = new Intl.RelativeTimeFormat('en-US', {
  style: 'narrow'
});
console.log(enFormatter.format(-1, 'day')); // 1 day ago

let frFormatter = new Intl.RelativeTimeFormat('fr-FR', {
  style: 'narrow'
});
console.log(frFormatter.format(-1, 'day')); // -1 j

Sorting an Array of Strings

let names = ['Adam', 'Bob','Åslaug', 'Ørjan'];

let enCollator = new Intl.Collator('en-US', { 
  sensitivity: 'base' 
});
console.log(names.sort(enCollator.compare)); // ['Adam', 'Åslaug', 'Bob', 'Ørjan']

let svCollator = new Intl.Collator('sv-SE', { 
  sensitivity: 'base' 
});
console.log(names.sort(svCollator.compare)); // ['Adam', 'Bob', 'Åslaug', 'Ørjan']

Plural Usage

let number = 2;

let enFormatter = new Intl.PluralRules('en-US', { 
  type: 'cardinal' 
});
console.log(enFormatter.select(number)); // other

let arFormatter = new Intl.PluralRules('ar-EG', { 
  type: 'cardinal' 
});
console.log(arFormatter.select(number)); // two

For more details on plurals, see the language plural rules page.

Libraries relying on JavaScript Intl API

As we already explained, the JavaScript Intl API is a built-in feature in JavaScript that helps with internationalization by providing tools for formatting numbers, dates, and times based on cultural preferences and language-sensitive string comparison. It's a great starting point for handling many internationalization tasks. However, for some more advanced scenarios, you will probably need to use third-party libraries.

Luxon and React-Intl are some of the libraries that are built on top of the Intl API. They offer additional functionality and provide a more advanced way to handle internationalization in web development.

Luxon is a library that provides similar features, but with more advanced options. It makes handling time zones easier and offers more flexible formatting options for dates and times.

React-Intl is a library for React applications that provides internationalization support. It goes beyond the Intl API and provides tools for translations, which the Intl API does not offer.

Conclusion

In conclusion, the JavaScript Intl API is a powerful tool for formatting and localizing text in web applications. Whether you're working with numbers, currencies, dates, or relative times, the Intl API provides a robust set of features to help you customize your text to suit the needs of your users. Additionally, the API is built into the JavaScript language, so it is readily available for use in both browsers and Node environments.

While the Intl API offers a lot of power, it is important to understand that it may not always be the best choice for every use case. Other localization and formatting libraries, such as Luxon and React-Intl, can offer additional features and customizations that may be better suited to your needs.

Regardless of which approach you choose, the important thing is to understand the basics of the JavaScript Intl API, so you can make informed decisions about how to best format and localize your web applications.

Knowing how to format numbers, dates, and the like is only one part of the software localization. However, other parts, such as translation, review of translations, use of dictionaries and the like, are more complex areas and generally require more time and dedication. Fortunately, specialized tools can help you with that. Try Localizely for free.

Browsers are a crucial component of the modern world, as they are the gateway to the internet for most people. They have evolved to cater to the global market by offering support for multiple languages, making them accessible to users around the world. This localization feature also plays an important role in website localization, as it allows websites to detect the user's preferred language in the browser and return the proper version of the website accordingly. This enhances the user's experience and makes browsing the web more pleasant.

How browser language can be used in website localization?

Browser language has a significant impact on the way websites are displayed and experienced by the user. When a website is properly localized, it can return the correct version of the page based on the user's preferred language setting in their browser. This results in a personalized and enjoyable experience for the user as they can navigate the website in their own language.

On the other hand, when a website is not localized and a user's browser requests a page in a language that is not available, the user may see the page in a potentially unfamiliar language. This can be confusing and frustrating for the user and may even discourage them from using the website in the future. It is important for websites to take into consideration the global audience and offer localized versions to ensure a positive user experience for all visitors.

Having a localized website can be also crucial for locale businesses that are operating in countries where multiple languages are supported. Take Switzerland and Canada as examples, where residents often speak several languages. If a business fails to localize its website, it could potentially miss out on a large portion of its target audience who may not understand the content or feel alienated by the language used. This can negatively impact the business's reputation and bottom line.

How to know what language your visitors are using?

Discovering a user's preferred language can be accomplished through either server-side or client-side methods. It all depends on what you need and what technologies you use. Below, you can find techniques and details of both approaches.

Server-side language detection

The server detects the user's preferred language by analyzing the HTTP request made by the user's browser. When a user visits a website, the browser sends a request to the server containing information about the user's device, including the preferred language. This information is stored in the Accept-Language header of the request and specifies the user's preferred language for displaying content.

Also, when the browser preferences include multiple languages, the browser assigns a ranking to each language based on a value called qvalue. This ranking system helps the server understand the order in which the user prefers to receive content in those languages.

Below, you can find an example of the Accept-Language header with multiple languages. French is preferred. If that fails, British English is requested, and finally any type of English.

Accept-Language: fr,en-GB;q=0.9,en;q=0.8

Client-side language detection

Language detection in JavaScript can be crucial for creating user-friendly experiences in single-page applications (SPAs) built with front-end libraries/frameworks like React, Vue, and Angular. By detecting the user's preferred language, these apps can dynamically adjust the content and interface to meet the user's specific needs. Below, you can find a snippet that explains how to access the user's preferred language with JavaScript.

window.navigator.languages // ['fr', 'en-GB', 'en']
window.navigator.language // 'fr'

The window.navigator.languages property returns an array of language codes that represents the user's preferred language order, much like the Accept-Language header in HTTP requests, but without the qvalues.

The window.navigator.language property returns the user's preferred language, or the first element of the window.navigator.languages property.

Different browsers may handle language and languages properties differently. It's important to test your code across multiple browsers to ensure accurate results.

Differences between the user's preferred language and the user's location

User's preferred language and location are often used to personalize the user experience in software localization. Preferred language refers to the language that a user has set as their preferred language in their device or browser settings, while location refers to the physical location of the user determined by their IP address.

In terms of software localization, the user's preferred language is typically used to determine the language in which the user interface and content should be presented. On the other hand, the user's location is often used for personalized content or advertisements based on the user's physical location.

However, the use of Virtual Private Networks (VPNs) can complicate the accuracy of both preferred language and location detection. VPNs allow users to mask their physical location and present a different IP address, making it difficult to determine the user's true location. Similarly, the language settings on a VPN-connected device may not accurately reflect the user's preferred language, making it important to have a fallback mechanism in place.

The importance of a fallback language

Websites can't support all languages, and this is why having a fallback language is so important. If a user's preferred language is not supported, it's important to have a fallback in place so that the user can still understand and navigate the website.

Good practices for fallback languages include using a generic language, such as English, as a default option. This ensures that the user can understand the content even if their preferred language is not available. Additionally, it is also a good practice to fall back to the language without region or script code. For example, if the user's preferred language is French (Canada), the fallback should be French, not English. By doing this, the user will still be able to understand the content in a language that they are familiar with.

Overall, having a well-thought-out fallback language strategy can greatly improve the user experience on your website.

Wrapping up

In this post, we covered the topic of detecting the user's preferred language on both the server side and the client side. We explored the importance of knowing the language your visitors are using and highlighted the differences between the user's preferred language and location. Also, we noted the importance of having a fallback language in the context of website localization.

Detecting the browser language is just one aspect of software localization. Software localization is a broader area that involves managing translations, ensuring the quality of translations through reviews, usage of glossaries, and much more. Implementing software localization effectively can be challenging, but using specialized tools can make the process smoother and more efficient. Try Localizely for free.

Localizely conducted research about the state of localization for 2022. The aim was to detect the current trends in software localization and areas for improvement. The data collected from this survey should provide a better understanding of software localization practices, the tools used, and things that need to be improved for better productivity.

Read on for more great insights about software localization and trends in our annual report.

Survey respondents

The Localizely survey was conducted on 2,024 respondents of various occupations from all over the world.

Departments

Most of the participants in the survey were from Marketing, Localization, and Product departments. Such composition is not surprising, knowing that people from these departments are most often involved in the software localization process.

• Marketing
• Localization
• Product
• Engineering
• Management
• Other

Continents

When it comes to continents, most of the participants in the survey were from Europe, Asia, and America.

• Europe - 49%
• Asia - 28%
• North America - 12%
• South America - 5%
• Australia / Oceania - 3%
• Africa - 3%

Survey results

Below you can find the results of the localization survey for 2022.

Number of target languages

A majority of the respondents (52%) stated that they usually have 2 - 10 target languages in their projects.

The number of target languages in projects can depend on many factors: target market (country, global), project type (blog, e-commerce, etc.), available resources, and much more. With all that in mind, we are not surprised by the results of the survey either. In a way, they represent the mean value of all the mentioned factors.

• 2 - 10 languages - 52%
• 11 - 20 languages - 23%
• 21 - 49 languages - 19%
• 50+ languages - 6%

Popular target languages

Below you can see a list of the 10 most popular target languages, sorted in descending order. According to it, the most popular target language is German, followed by Spanish, French, Russian, and others.

• German (most popular)
• Spanish
• French
• Russian
• Italian
• Arabic
• Portuguese
• Dutch
• Chinese
• Japanese

Translating for regional languages

Most of the participants (61%) declared that they do not do translations for regional languages (e.g. en-US, es-MX), but just for plain languages (e.g. en, es).

• Yes - 39%
• No - 61%

Translation tools

When it comes to what tools they use for translation, most of them (78%) say that they use some kind of TMS.

• TMS - 78%
• Excel sheet or similar - 22%

Work with a language service provider

The majority of participants (65%) said that they work with language service providers.

• Yes - 65%
• No - 35%

Machine Translation usage

When it comes to machine translation, the results are divided. Nearly half of the respondents (45%) do not use any form of machine translation. The other half, which uses machine translation, most often performs proofreading after machine translation usage.

• Yes, without proofreading - 17%
• Yes, but always with proofreading - 38%
• No - 45%

Localization priority

When asked whether localization is sufficiently prioritized in their companies, most of the respondents (68%) believe that it is.

• Yes - 68%
• No - 32%

Localization improvement

As for the aim to improve localization in 2023, most respondents said they would like to improve quality, simplicity of workflows, level of scalability, and speed.

• Quality (level, consistency, ...)
• Simplicity of workflows
• Level of scalability
• Speed
• Efficiency
• Cost

Conclusion

In this localization state report for 2022, you have seen the various stats, the most popular target languages, tools, ways of working, and similar. Also, you have seen what needs to be improved in the future to make localization even more enjoyable. Let's hope that 2023 will bring us some novelties and make localization even more pleasant.

The project manager role is one of the most important ones in the IT industry.

Without a highly skilled and adaptable person who will lead a localization workflow and manage deliverables, deadlines, and budget, it would be easy to lose time and money.

In the localization department, that valuable person has the job title: localization project manager or localization program manager. Sometimes they just go short: localization manager.

This key role can help a business to improve processes and productivity during localization and to accelerate expansion to new markets.

What is a localization project manager

A localization project manager is a regular project manager specializing in localization.

IT project managers usually come from a developing background in the IT industry. They usually do extra training to improve their management skills. Typically they're improving skills like organization, prioritization, communication, etc.

Besides the development of soft skills, they should be familiar with at least one of the following methodologies:

• ☞ Agile,

• ☞ Scrum,

• ☞ Kanban, or

• ☞ Lean.

When it comes to the localization industry, a project manager can come from a development background or transfer from the content side. It's not unusual to see localization specialists moving to project management.

The important thing is the ability to

• ☞ plan the project efficiently,

• ☞ set priorities and boundaries, and

• ☞ lead your team to the delivery.

Localization departments are cross-functional teams. They always work on multiple projects at once, so you need to be ready for the next level.

What does a localization manager do

A localization project manager oversees the whole process of a company entering new markets.

They do the research, coordinate, and set up the environment for the deployment of the translated product to happen.

Considering that the localization manager is a translation project manager, you'll be required to approve the translation in smaller teams.

You'll be held accountable for everything around the localization process. And you'll also need to write job descriptions and hire team members and localization vendors.

The localization manager is responsible for implementing and executing the localization strategy. If there’s no senior localization manager in the localization department - like the head or director of localization - a manager is also responsible for strategy.

As a localization manager, you’ll be the one who leads the internal team. You'll coach them, do one on ones, and do reports not only on the project but on people’s performance as well.

However, if you’re entering a smaller company or a start-up, be ready to be a localization specialist, project manager, and probably a localization engineer at once. Or to manage outsourced professionals like translation agencies, freelance translators, and other external vendors.

Localization of the software is not a set-and-forget practice. On the contrary, it’s a continuous process. So, to help yourself and the localization team, you'll need to choose the best translation management system.

Dedicate yourself to thorough research before you tie the knot with one provider.

Choose the one with

• ☞ machine translation memory,

• ☞ vocabulary creation options,

• ☞ stakeholders management,

• ☞ in-context editors, and

• ☞ needed integrations.

If you manage to find all that, you can forget MS Office once and for all.

Luckily, Localizely has all of that. Plus, reports and statistics of everything your team members have done. So you can manage localization projects in multiple languages more easily than ever.

Even if you're localizing websites or marketing materials, translation management systems can be helpful. With them, you can streamline processes and automate a lot of unnecessary manual labor.

What's a localization project manager's salary

Payscale reports $57k as an average annual salary, while Glassdoor reports an average of $76k.

Yet the truth is your salary will depend on various factors.

The type of your contract plays a significant role. Whether you're a full-time or associate project manager, and of course of the industry you're working in.

Geolocation plays a significant role here as well. The highest payment is offered when you reside in the United States or the United Kingdom.

An additional influence on pay range is whether you're solely working as a project manager or your job description includes some tasks that overlap with the localization specialist and product manager.

Common requirements for a localization manager role

As mentioned above, excellent project management and communication skills are required for this job. Still, you’ll have to mix up a few more things into your list of capabilities.

We went through a few dozen of job ads for localization project managers, and here are some of the requirements that are repeating themselves for this job title:

• Being tech-savvy

• Working knowledge of industry-standard localization tools

• Strong analytical problem-solving skills

• Strong attention to detail

• Full professional fluency in English (additional languages are a plus)

• Proven track record of localization project management

• Previous experience with Language System Protocols

• BA/BS degree or equal practical experience in localization, administration or international studies

• Excellent organizational, time management, and communication skills

• Cross-functional collaboration experience

Being multilingual can be a huge advantage in this industry more than in any other. Especially if you have work proficiency in any of these languages: Japanese, Thai, French, and Spanish. Of course, in combination with English.

As a localization manager, you should be:

• ☞ globally minded,

• ☞ culturally aware, and

• ☞ comfortable working remotely or across time zones and cultures.

How to become a localization manager?

As we’ve mentioned, you need to gain general project management experience before you specialize in localization.

To get a job as a localization PM, you’ll need

• ☞ exceptional organizational skills you can prove,

• ☞ a bachelor's degree in related fields (like international studies), or

• ☞ any of the recommended certification programs.

  1. Project Management Professional by Project Management Institute

  2. Project Management Certification by Google

  3. Project Management Principles and Practices Specialization by the University of California, Irvine

Additionally, consider one of the following methodology certifications:

1. SCRUM: this one has multiple levels, and it depends on which position you want to take next in your career - do you want to be a product owner, project manager, or something else?

2. AGILE: agility may be the most used term in the IT industry in the last few years, so you won’t make a mistake with this one.

3. LEAN: believe it or not, this one comes from the automotive industry, and we at Localizely actually prefer it the most. It’s slowly penetrating digital industries, and we hope it’ll cut all unnecessary noise and tasks soon.

If this is a role you are interested in, learn and work on project management skills. You can also take the initiative in your current company in organizational roles. In this way, you can start small and end big while realizing in practice if this is the thing you actually want.

How to be one of the best

The most successful localization experts (as well as any expert) always ask the right questions while making realistic and attainable projections.

They have good prioritization and output (visual, linguistic, technical) and remain within the predicted budget for the project.

A thorough understanding of the local market and habits will make you one of the most reputable. This can be researched or gained by experience (tip: a mix of both would be the most effective).

Many localization project managers can speak multiple foreign languages. That helps establish correct communication with every stakeholder in the localization process, which will be a huge deal breaker for better estimating the project's time frame.

Localization managers should also understand the translation services market to negotiate better terms and the realistic requirements of hiring local team members or localization vendors.

If you're starting as an associate project manager, ensure you have client-facing experience before you enter the localization market, as things can get pretty hectic.

Knowing the localization tool market, what they offer and how to adapt them to the needs of every stakeholder will be a huge advantage at any niche or company, and it'll help you tremendously.

As we already mentioned, proper certification can play a significant and distinctive role in making you an expert.

The difference between a localization manager and a localization specialist

As we mentioned at the beginning of the article - the terms localization specialist and localization project manager are often used interchangeably like synonyms. They’re not. On the other hand, a localization program manager is the same as a localization pm.

Anyways, let's clear this out.

As a localization project manager, you’ll be a highly cross-functional person. You’ll be responsible for budget, suppliers, delivery, and deployment.

This means you’ll need to recruit and contract employees and outsource LSPs. So, as an LPM, you’re a people manager as well.

You’ll need to create workflows and briefs and determine deliverables and delivery dates.

As time goes by and you gain experience with certain geolocations, you'll need to create particular guidelines for those regions in collaboration with different localization specialists.

On the other hand, a localization specialist is more like a translator/editor/interpreter with a solid knowledge of product development and marketing processes. They're in charge of the product and responsible for its final translated version. They're often required to have high levels of multiple languages or finished language studies as they're held accountable for every piece of translation.

Step into the localization ASAP

The key to growing your business internationally is to enter new markets. To enter new markets, you need to prepare your product for the brand-new launch. This preparation is coordinated by the localization manager.

Statistics show that this job title is showing in more job ads than ever - the position is in high demand.

Take your chance, and step into a developing industry.

No matter your starting point, working knowledge of translation management software can help you thrive as a localization PM. The good news is that Localizely offers a free plan, so you can learn on the go and start with your new job prepared.

Quality standards and quality assurance come from the manufacturing and service industries. They're representing necessary evaluation systems to ensure the rollout product is error-free. The point is to meet quality standards in performance, design, reliability, and maintainability.

The software industry adopted the same approach for its products making the QA department one of the most important ones.

Yet, quality control for other products, like content, translation, etc. is often overlooked. Assuming that isn't something that needs additional investments besides the regular ones.

Imagine having only people writing codes and handing that straight away to users. Just to have them find all the bugs. Not a pleasant feeling, isn't it?

Translation works the same. Quality control is needed, as quality translation can make a huge difference when rolling out a product or campaign. It can be your deal breaker, and honestly, you want it to prevail for the better.

Why is translation quality important?

To put it out as simply as possible: what isn’t measured can’t be managed. You can improve a few things when you're performing translation quality assurance. The translation quality is one of them, but there's also a localization success. This directly means your conversion and revenue will be improved.

Low quality of the transition can produce a domino effect and cause a product rollout to go wrong and damage more than just one campaign. It can get stuck with the brand for a long time and cause market failure and big budget loss.

For example, in 2020, an Australian retail brand Kmart made a Mother's Day campaign. That campaign had a tagline #mamaste - something that was imagined as a salutation for all mothers. The tagline was created as a wordplay from the words mama and namaste. With English-speaking countries, the campaign was an exit. But, the problems began when the campaign reached Spanish and Portuguese-speaking geolocations. What Kmart copywriters didn't know was that mamaste in Spanish is a vulgar slang for “did you perform oral intercourse.” Needless to say, the campaign wasn’t so successful in conversion. Additionally, this vulgar slang stuck to the brand to this day.

This backfire could have been avoided if the brand had a localization specialist. Or an additional professional translator to double-check the wording in the campaign. That’s just one of the many reasons translation quality assurance should be a part of your localization workflow.

What is the quality of the translation?

Translation quality can be tricky to define, as it depends on a variety of things. Grammar and spelling are just the surface of an iceberg.

Multidimensional quality metrics include an understanding of

• ☞ the industry requester is operating in,

• ☞ brand voice of requester,

• ☞ quality of the original text,

• ☞ the purpose of the translated content, and

• ☞ the channel where it’ll be communicated.

Moreover, who is doing the transition, and how involved are the QA translators in all these sectors can also affect quality standards.

How do you evaluate translation quality, then?

A professional translator is the first thing you'll need for translation quality assurance. Preferably a native speaker that understands deeply the industry the given company is working within. They should be familiar with the quality stage the company operates within.

On the other hand, it's your responsibility to inform the QA translator on

• ☞ where do you plan to position the text,

• ☞ what's the primary purpose of the text

• ☞ introducing the original text.

So be sure to add details to your request such as

• ❓is it informational documentation that should help a user to go through its onboarding easier,

• ❓ is it a copy for a landing page that should convince a potential user to convert?

This should help the QA translator recognize if any wording or formatting exceeds the required quality standard.

Lastly, don't involve the QA translator in the translation process itself. Although it’s possible that one person is a translator, editor, and QA translator, try not to go that way. The efficiency, speed, and quality of the translation will be improved drastically if those are three separate persons. Remember that one person can have around five effective work hours daily and translate around 2000 words during one day. And this is an optimum for the good days.

When it comes to processes, place the translation quality assurance after the translation and editing are done. But do it before the translation is implemented into the product or desired channel of communication.

If you have in-house employees like localization specialists, assign this process to them. If not, delegate the quality control to other third-party language service providers.

What are the qualities of a good translation?

To evaluate a translation, you’d need some rules collected in the document that’ll serve as the Book of Quality Standards. The goal is for the evaluator to have a certain reference point for non-linguistic improvements that are important for the brand's tone of voice and text's purpose. Something like a Brand Style Guide that you need for designers, content marketers, and copywriters.

But, what should you put in? What quality needs to be reached?

Quality stands for the general excellence of the level or the standard. Quality assurance ensures that the product reaches the highest standardized level.

It includes:

1. observance of the weak points and

2. suggestion of possible improvements so the product can reach the next level of standards.

Quality standards for translation are a little bit tricky, as Geoffrey S. Koby (KSU), Paul Fields (LinguaTech), Daryl Hague (BYU), Arle Lommel (independent scholar), and Alan Melby (LTAC) say in their paper Defining translation quality.

They stress how you need to differentiate quality in terms of quality management and general usage, which tends toward a transcendent perspective. They agree to disagree about the definition and implications of quality standards and about the easiness of objectivity.

However, the authors highlight five important points when it comes to defining translation quality on any occasion:

1. who is the customer the translation is done for? A translator needs to know who the requester is - in which field and level of quality are they operating, what is the core of their business and how they brand themselves.

2. agreeing on the expectation of what’ll qualify as a translation. Usually, it should include a certain level of accuracy and fluency. Accuracy is a bilingual concept that refers to the correspondence between the original and translated text. At the same time, fluency is a monolingual concept that refers to parts of the text, such as grammar, spelling, and cohesion.

3. level of accuracy and fluency. This is more a concern of whether the translated text should improve flaws of the sourced text or should it be on the same level as the original text regarding quality.

4. understanding the purpose of the text and the target audience. Language service providers should be aware of this information as the level of quality is highly dependent on it.

5. there is no objective standard (yet). This can lead to confusion, as there is no explicit definition, but it can also open a door for improvement. It's part of the field where scholars and academics involved in transition studies could work together with professional translators from various fields to reach an objective book of the standards. Until that happens, make sure to create yours to give your localization workflow a better direction.

How can I improve my translation quality?

Okay, so we need standards to be able to define what is a high-quality translation. But what are we measuring here? A number of grammar issues? Misspelled words? What should you focus on, and in which order?

Let’s go step by step.

What is the main point of translation?

A German linguist and translation studies scholar Juliane House defines translation in her book Translation quality assessment as the “ result of a linguistic-textual operation in which a text in one language is re-contextualized in another language.”

If we go by this definition, a translation process includes two integrated processes:

1. a cognitive procedure: happens in the translator’s brain
2. a social, cross-cultural, and cross-linguistic practice: that happens when the reader is consuming the translated text.

The last one is crucial when the sourced and targeted languages come from two totally different cultures. Translating word for word won't reach the goal on these occasions.

The goal is to get the same information, context, and understanding in both languages. Sometimes this means using different phrases or combinations of words than we would in literal translation. Simply because languages function differently in terms of linguistics and grammar.

Machine translation can come quite handy sometimes as a quick solution, but they can't understand cultural and social context that changes grammar rules or linguistic usage per se. So while you can use machine translation output as a starting point when there's an enormous quantity to be translated in a minimum time frame, we highly recommend you still have a translator and editor review that translation before the quality evaluation.

As for the first point, we certainly can't track and measure cognitive procedures in a person's brain casually. At least not yet. However, we certainly can analyze its product - the translation.

Three-Step Model for Assessing Translation Quality

A remarkably effective method for assessing translation quality

Dennis Brown, a managing director of Pacific International Translation, suggests a three-step model for a practical translation quality assessment that can help you improve your translation. Hence, it comes out completely error-free.

The three-step model consists of the following:

1. Evaluating the translation for accuracy of meaning

This should be the first step, and the reviewer should be focused solely on meaning - whether every phrase is translated from the source language accurately into the targeted language without any losses or redundancy.

At this point, the focus is only on the quality of the meaning of the content:

• is the used phrase accurate
• is every word well spelled,
• are there any typos, and |
• is the vocabulary consistent?

Brown suggests doing it either in the old fashion manner - dividing source and translated texts into phrases in two tables, printing it, and evaluating it row by row.

Or, use a translation management system and its advantages to get it easier and faster. This tool will save time for everyone in the process, as it automatically divides text into phrases according to the directions in the localization file. So both the translator and reviewer can use a translation editor to translate, compare, review and check the context in one unique table. These tools also have translation memory and glossary features that can help you and the translator to stay consistent in every language.

However you choose to do it, he highlights the importance of checking short chunks only - no more than seven to ten words.

2. Evaluating the translation's quality of expression

Here, you’re looking if the translation sounds natural, without any possibility for misinterpretation and no awkward reading parts. This is also the step when you’re double-checking if the tone and voice of the text are good.

This is the phase where a localization specialist or a QA translator says: “Mamaste won’t work for an Iberoamerican market. It’s the same word as the one used in rude slang”.

Logically, no academic level of language knowledge can help you realize this. It’s necessary that that person is native and is able to notice all shades of language and cultural differences. That’s why it is necessary to do content localization in every market, not just language translation.

The point of this step is to minimize any possible ambiguity. You don’t want tag lines or even sentences open to misinterpretation. It's a sign of poor translation.

For example, you’d need to know that mamar in Spanish actually means to breastfeed, and no mames would simply mean don’t do the breastfeeding. If you say that in Spain, of course. However, a tag that says no mames in Mexico would produce a backfire… or at least a ton of laughs. In Mexican slang no mames is used in crude slang for don’t kid with me, no way, etc.

Again, translation memory and glossary features in translation management software can help you to remember all good and bad words that should be used or completely avoided.

3. Technical/formal check

This is the part where you check if the layout and the form of the text are proper and if they fit the placeholders.

This can be the trickiest part of the translation evaluation if you're not equipped to see where and how the user would consume it. So this third step is usually done when the product is already designed before the last approval. This stage can turn out pretty late in the process to change anything significant or pretty costly.

Again, the best translation management tools can help you here with two options. One is in-context editing. This feature enables a preview of every text string in the predicted surrounding. This can help you gain context and understanding of formation and actions. The other ones are Adobe or Figma features . These will allow designers to pull translations into the designing environment and give feedback during the translation process so everyone can act on time.

Improve the quality of the translation

With the right translation team, the right translation management tools any translation project can be successful in high quality. It doesn't matter if you're a translation agency, a freelance translator, or a SaaS company that wants to localize its product - high-quality translation should be your ultimate goal.

Content marketing became a thing just recently. About 60-70 years ago, marketing was mostly about advertising. There were some different practices - like Michelines’s guide for restaurants - but those were exceptions.

Right now, we live in a rising shredding practice of marketing. We have more marketing departments than discussions of how ethical certain practices are.

We have marketing departments named by the channels (social media marketing, youtube marketing, digital marketing, email marketing…), objectives (demand generation, lead, generation, PPC, …), or products (content marketing, event marketing….), focus (outbound, inbound, direct response…).

However, all of this is content marketing.

As Lazar Džamić and Justin Kirby argue in their book The Definitive Guide to Strategic Content Marketing - there is no marketing without content. If you don’t have content, what are you even pushing on every channel?

All these labelings tend to get more complicated once we enter the localization process. There are so many questions. Who will be responsible for the localization of the content? What needs to be localized, and in which order?

What is content localization?

Content localization is the creation of content specialized for a specific geolocation in a local language.

Creation can include the curation of completely new content and tailor-made campaigns for the specific market, or it can be focused on translation and adaptation from the existing source content and campaigns.

How you’ll do it depends on your possibilities and budget. The most important thing is to know what you’re doing and why you’re doing it.

Why you need to localize your content

There are multiple arguments for this approach, but the most important ones are higher possibilities for market penetration and better conversion on the local market.

Content marketing generates more than three times more leads than outbound marketing and costs 62% less if your audience understands what you’re talking about. This brings us to the fact that having content in English is not always the best solution for going global and conquering the international market.

One of the reasons this happens is the discrepancy between what we perceive as the number of English speakers - like those assumptions ”everyone speaks English these days” - and the actual numbers.

Right now, there are more than 8 billion people on the planet. Only 743 million of them speak English.

Additionally, 76% of consumers prefer to shop from websites with content in their native language. Moreover, around 40% of consumers are unwilling to buy anything on non-localized websites.

How to create a content localization strategy

Localization efforts go in vain if the strategy is sloppy. Entering the foreign market needs to be very well planned; before that, all options need to be researched in detail.

You may think that the proper translation of the content is enough, but the truth is that you need to take care of geolocation and cultural differences more than you need to take care of language solely.

Let's start with English, that's often considered a global language of the XX and XXI centuries. The language itself has different dialects, vocabulary, and spelling rules based on geolocation where the language is used. So you have different wording for the same thing in British English, American English, and Australian English.

That same thing happens with Spanish in Spain, Mexico, Peru, Columbia, and Argentina, or think of French in France, in comparison to the French in Switzerland and Canada...

The list goes on and on with every language you pick. Also, in the cultural context of consumption and decision-making differentiates based on geolocation, not exclusively on language.

This means you'll need to consider various factors while researching, analyzing, decision-making, planning, hiring, and deploying.

Research and analysis

The first step to strategy creation is setting fond with information you get from research and data analysis.

We recommend hiring a localization specialist specializing in geolocation, the industry, and the language you're trying to enter, as it can save you tons of money for the trial and error process.

Whether you’ll going to do it in-house or outsource it - choose the geolocation where you want to enter the new market and research thoughtfully following fields:

1. Language: dialects, habits, and vocabulary that you need to use so the local audience gets fond of you.

2. Culture: type of humor, possible cultural differences, and conflicts that can influence how you approach the local audience.

3. Consumption context: how people usually make decisions in your industry, what kind of information they are lacking, cash flow, card, mobile banks. Anything that'll influence website localization and content localization in any form.

Decision making

Once you have done the detailed analysis and you have everything in one place, you need to make some decisions about your marketing materials. Are you going to translate the existing ones or create new ones from scratch, so they're fully adapted to the new market?

If you're translating: what goes into translation sequences, and in which order? Is there anything that should be left out of the existing content and eventually created from scratch because, in this form, it wouldn't resonate with the local audience?

If you're (re)creating: what type of content goes first, what campaigns are you focusing on, how do you adapt visual identity and tone of voice in a new culture context…

Go through this kind of content audit for all channels: blog, social media, youtube, and newsletter. After the analysis, prioritize translation and creation of the digital content across all platforms.

Planning

Last but not least, we came to the planning sessions.

Content marketing localization is similar to software localization - it's dynamic, with multiple iterations and factors that influence the process. That's why your content localization strategy needs to include such a detailed research analysis and decision-making. If you do that right, planning will be easier and project management more realistic.

• Localization workflow

Localization workflow mostly includes these five steps (if you use translation management tools):

1. Uploading the main language file

2. Translating

3. Reviewing

4. Downloading all language files

5. Publishing to end-users

If you’re using Excel tables or Google Sheets for translation management, the process will include additional steps for developers and project managers. They’ll need to cut the content into strings and import string by string into the tables. After the translation process, they’ll need to put strings back into the files and push information back into the app - which means more coding.

Either way, the process usually starts and ends with developers, but quality translation services and an exceptional localization project manager are what you need to thrive in this process.

• Localization tools

Choosing the best translation management system for your needs will significantly affect the process's length and cost. Translation management software contains features like in-context editors, machine translation, translation memory, glossary, and much more. All these options can speed up and facilitate the process.

• Localization department

The usual practice in the localization industry is to have developers, localization specialists, and localization managers in-house and to outsource the rest. This brings us back to translation management tools - the good ones have an option where you can hire translation services specialized in your industry directly on the platform, so you don't have to waste time searching for that personnel.

• Testing and deployment

Testing is an integral part of the localization workflow, and it can be quite tricky if you've missed previous steps, as you won’t have reference points to check with.

However, in any content creation practice during the deployment, focus on publishing a small volume and gathering feedback first. Once you're sure you got an understanding of the new market, go fully with localized content.

Different types of content and how to localize them properly

As we mentioned in the introduction, marketing content is everything that marketing campaigns are made of. Content can be of different forms, with distinct focuses, and presented on various platforms, but the truth is - all of that is still content.

So when you do content localization, you should also keep in mind the rules specified for every form and channel.

Website

When localizing website content, focus on user experience, conversion, and search engine optimization for a particular region. A website is like an ID for your brand, so ensure you have at least one localization expert for effective content localization.

During the planning of the website translation, pay attention to the following pages and details:

• Home page: landing pages, about us: here, pay attention to the design and copy, as you would in source language - what colors and wording work best for the local market, and how to create the best UX, especially for them.

• Contact forms, Sign up, and Sign in: be careful when creating options for time and date formatting; for example, North America has date formats MM/DD/YYYY, while Europe uses DD/MM/YYYY. Also, names can be formatted differently and require different amounts of space - for example, in Central and South America, people tend to have at least two names and two surnames. Additionally, consider all cultural differences around payment options when localizing sign-up forms.

• Pricing pages: make sure to localize currencies and adapt numbers when needed, as prices on some international markets are not affordable in every region. Additionally, pay attention to measurements, colors, and other vocabulary that may influence understanding and decision-making.

• Blog: translate the articles that would resonate with a local audience, like those that are talking about products or services or give information that is unique everywhere, adapt use cases, and for case studies, translate only those that mention the globally known brands, and create from scratch new ones with regional brands.

Social media

Whatever you do, whatever social media platform you use, please don't use multiple languages from the countries you're present in one single post or account.

Open a separate account for every country you're doing business with, and use the local language. While keeping your brand's tone of voice and colors, adapt the design and copy to the local market.

A good example can be how Lidl, a German retail chain, does its social media across Europe. They have a separate account for every country that's adapted to the way the locals consume content - you can notice that there's a direct shop only on some accounts, that profile description is different on every account, but that the content is similar - as well as the faces they found for their ambassadors, even tho they're locals.

If you don't have enough resources, then run an account per platform only in one language that most of your customers will understand, no matter the region or country.

The additional good thing is that platforms like Instagram and Facebook have their machine translation options, and Google Translate is on Google Chrome, so on those two channels, you can have AI help for the start.

Email marketing

If you're unsure whether you should localize email marketing - the answer is very simple, and it's yes. As well as other channels, email is for both conversion and nurturing, and you won't have that option for every region in which your business is present.

You can use the same campaigns for all markets. However, you'll need to translate the text and adapt the design and nurturing phase and options according to the cultural context - from ambassadors and local magazines and events, you may refer to options you use as awards. For example, coupons are a huge thing in the USA, but they're not so developed in most of the other countries around the world.

Sales materials

Sales enablement content is essential in the B2B industry. PDFs, Ebooks, Pitch desks, presentations - you name it, and you need it translated as well.

When we talk about the localization of sales content, it's necessary to highlight the importance of relevant references. Basically the same as when we talked about case studies - you need to focus on cases and successful brand campaigns that'll resonate with the local market.

Remember to adapt prices and currencies and to consider cultural context when crafting sales enablement materials.

Onboarding materials

Regarding nurturing your clients, we all know that good onboarding is crucial for high retention and low churn.

That's why you should definitely localize content that is part of onboarding sequences. No matter if we talk about pop-ups, support documentation, or training videos.

The written content should be translated for sure, while for video content, you can use the original video and just add subtitles in the local language for every market you're operating in.

As for live training - you'll need a local expert or a localization specialist who can translate simultaneously, as live events are not easily localized content.

Legal materials

We hope you didn't mean to launch in a new market without localizing legal content.

Even though you have crafted all legal documents for your primary legal entity and a primarily local market - more is needed than a translation of the documents. Legal rules differentiate from country to country. That’s why you’ll need to make this content localized by consulting with legal experts in the country you want to enter.

Additional things to consider

Hyperlinks - When translating the content, don’t forget to change outbound hyperlinks. Swap the original ones with the link in the target audience's native language whenever possible.

Images, Emojis, Colors - One of the specifics of multilingual design is to take care of all visual aspects as well. Maybe some images you currently have aren’t sending the same message in a new market. Maybe the culture you’re entering uses emojis in a different context. We hope you did your research from the beginning thoroughly.

Formatting - If you’re localizing content for Middle and far East markets, you need to take special care of formatting - right to the left of up to the down writing and reading is more familiar for those cultures!

How to measure content localization

Once the work is done, there is an urge to measure the success and the results. Some channels may be measured through attribution, but most can’t. Especially if you’re new to the market and you're doing demand generation more than direct paid advertising.

So what should you pay attention to then?

• Branded search

  If you see improvement in the keywords that are branded or related to your brand, it’s soundproof that your content marketing efforts are giving results.

  The brand is gaining visibility, authority, and credibility.

  It’s also a signal that you’re delivering content that gives you a competitive edge, as your brand is becoming a synonym for the industry.

• Traffic, search engine rankings and engagement

  We all know by now that number-one ranking is a relative thing with all those feature snippets, ads, and individualized searches, but yes rankings are still a thing.

  But what should interest you from the ranking is the amount of traffic, its quality, and the type of engagement you get from that traffic.

  It’s easy to get lost in the abyss of vast metrics, so make sure you’re not chasing numbers that are not meaningful to your revenue.

• Conversion rate

  If your content resonates with your target audience, your conversion rate should go up in the long run.

  This doesn’t mean you’ll be able to attribute each additional conversion to the particular piece of content. You’ll just notice an “unexplainable” rise in conversions that actually comes from generated demand and improved brand positioning through content marketing.

• Customer loyalty, satisfaction, and a number of support tickets

  Okay, yes this has to do a lot with the quality of the product and how the customer support department does its job, but think about it from the other point of view.

  If your content is so good that your customers are inspired and guided through every level, every imaginable process - they will love you, they will stay with you, and they’ll spread the word about you.

• Operational efficiency and cost-effectiveness

  Speaking of SEO cost only - it’s easier and less costly to position on the local market with content in the local language than with content in English, as Google has geolocated bots crawling websites separated and in addition to USA-located bots. So there's a much smaller pool to fill in a localized context than in a global one, which means less money to invest.

  Additionally, using translation management tools can help you speed up the localization process - cutting hours for developers, translators, and designers.

• Accelerated time to market

  Every conquered market will help you to conquer the next one. It’s like a compound effect.
  

Investing in content is investing in the brand’s future

This may sound cheesy, but let's face the truth - there’s no marketing with content. And what’s marketing but a brand’s positioning in the market?

It may seem like a ton of work - because, honestly, it is - but when done right it’s worth it.

Research thoroughly, plan effectively, adapt channel by channel and enjoy the fruits of your labor in your revenue growth.

Interface design became one of the most important stages of development. Whether working on software, a mobile application, or a website, you should prioritize the user experience when designing and doing the copy.

Not only will it help your audience find what they need, but it's also one of the ranking factors for the website.

Creating a high-quality user interface with an optimized user experience is already hard. Surprisingly, adding multiple languages to the mix isn't helping.

Problems, obstacles, and errors multiply when the app needs to be in multiple languages.

Common UX/UI localization pitfalls

UX and UI problems during localization can vary, but they all have one thing in common. There's no clear picture of every segment of the audience that'll be targeted in the future when the product is designed and developed for the first time. Honestly, that's usually impossible, and it's part of ongoing processes and research.

Multilingual applications can't have a clean UI design. This is one of the most common assumptions when it comes to both multilingual websites and multilingual mobile apps.

However, there are things that can be done in advance so they can make further actions toward localization less frustrating. So let's cut them one by one.

Everything is hard coded

The number one problem you can stumble upon during mobile app localization is that everything is hard coded.

If the application is unsuitable for a multilingual user interface, it'll require intense intervention from app developers later in the process. The whole app would need to be rewritten, raising app development costs.

To avoid it and localize faster, be sure to internationalize your software, app, or website.

Leave date format, currency, name formats, etc., out of hardcodes.

They should be changeable. You never know where you'll see the next opportunity for positioning on the global market and need to incorporate different languages.

Fixed design without prioritization and hierarchy

Simo Herold, a Lead designer at Nogle, shared his experience when it comes to app designing for multiple languages during the localization period in his current company.

One of the things that got stuck with me is that usually, apps and software don't have UI design optimized for conversion hierarchically. This tends to mess up and harden the localization.

Complications happen when there is no clear hierarchy and prioritization of actions we want users to take. In these circumstances, it's hard to adapt the design.

Every translation inevitably brings contractions or expansions of the content. If there's no clear prioritization, the designer's job will be much more difficult.

Translators don't have the context while translating

Hand in hand with design, a high-quality translation is much needed.

Don't underestimate a translator's role, if you decide to save your money on the translation, it can easily backfire during launching.

That's why delivering an excel file with listed words and phrases for translation won't work. No matter how qualified the translator is, you won't get satisfactory results.

When translators don't get the context and the information about where the things are positioned, what are the industry requirements and vocabulary, brand voice, and slang that the target audience is using, they can make serious mistakes.

This happens because, in every language, there are cases where one word can mean more things.

For example, in Serbian

luk - an onion

luk - bow (for the arch)

luk - arch (of the bridge, in the wall)

And now, imagine if the translator needs to translate a string that contains only one word: "luk". Without any context. It would be a trial-and-error process.

Moreover, this lack of information can result in prolonged processes and, eventually, budget breaking as the time and speed of transition will be extended. Not to mention the extension of the design development stage, as there is no sync between the design and translation departments. And as we mentioned, translated content impacts UX design excessively.

How to use Figma to design a multilingual app faster

If you use Figma, you can resolve all these problems effectively in the first stages.

Clear design from the beginning

Herold, the design team lead from Nogle, suggests mapping out which actions in the app you want from users. Be sure to list in which order you want them to happen before you even enter the software localization process. This will ease up decisions and always put focus on the important actions.

Highlight all changeable parts of the design and communicate what would impact UI design and the quality of user experience if there were launchings to other markets.

Share this info with the project manager, dev team, or product manager - depending on how your work and communication processes are organized.

So they understand what to hardcode and what to internationalize during app development.

Preview different versions

Xintong Liun, an award-winning UX designer that worked at Apple and Microsoft and is currently in charge of product design at Zoom, shared her thoughts on how important multiple versions are during development.

She emphasized: "The beauty of UX design is that all the design decisions are evidence-based. Everything is for the users, but when you're targeting giant audience groups, things start to shift. This is when you need to take more than just the screen you're working on into consideration."

Therefore, you can do the layouts of the UI design for multiple languages during the initial phase or after MVP launching. This way, you can check how words' height and direction will influence user experience and whether it would be clear what the priority action is. Also, you can take into consideration how cultural consumption context influences design.

Sync with the product manager and the rest of the team about how each language option would impact the interface. Also, it will be easier to understand how a preferred language can change a hierarchy in desired actions based on local culture and context.

Create multiple versions and their preview in one table in Figma to understand better

For example, Katie Koch, a Senior Designer manager at Spotify, shared the table of multiple design options for the same payment flow they made during the testing phase of a premium duo service in Indonesia.

She mentioned how different versions were influenced by different kinds of iteration teams had with local experience of the product and how the bigger picture gave them a possibility to make better decisions that are aligned with their values.

Sync with translators

If the localization process has already begun, sync with translators. You don't have to actually talk to every translator in the team that's working on the project with you. Although it's desirable

If you're working in Figma, you can connect Localizely, a translation management tool. With this plugin, a project manager can easily import language files into the tool and translate them into the design to check how everything looks before deployment and edit things while still in the process.

Furthermore, translators can use a Localizely in-context editor and preview how strings look in the app preview. They can get real context around all phrases, understand how and where the strings form the sentences, and what is expected to do in that environment.

Additional help here is that with a translation management system, a localization specialist can create glossaries and help everyone with repeatable words, brand voice, and the slang used by both the industry and the target audience. With this feature, you can also make a language selection and choose which words are not translatable and should be kept in the source language.

If you're struggling to find translators in-house, Localizely will also enable you to get professional translation services directly on the platform.

Improve the UI design with Figma + Localizely

Multi-language apps don't have to be a nightmare at any stage. With the right tools and approaches, you can improve your experience during the work and accelerate the development process and deployment.

This applies to apps as much as to multilingual websites and multilingual software.

Multilingual website design can be like an easy song if you use Figma and Localizely during the localization processes.

You can have translated text in the target language faster without UI design suffering.

There’s a new field of career opportunities, departments to be created or digitalized… Now it's the turn of translators.

Localization departments may not be news for corporations that sell their products in brick-and-mortar shops around the world or for the gaming industry. But for the rest of the industries, localization practices have just started.

After decades of advocacy for globalization, we have a reverse focus on localization.

If you’re preparing your first localization project, pay attention. You'll need:

☞ an exceptional localization strategy

☞ the best localization system to support you during the process,

☞ and, of course, you'll need a localization team.

One of the most important roles in localization is the one a localization specialist has.

What is a localization specialist

A localization specialist is a specialized translator.

There's a practice of interchangeable use of the terms localization specialist and localization manager. However, they have different responsibilities and need a different set of skills.

For localization specialists, it's fundamental they’re specialized in two things. The very first is the source and the targeted language. And the second one is the industry they’re working in.

This is important in practice because every industry has its own particular vocabulary that you need to understand and practice on top of the cultural ones.

This means that if you're working in the software industry, in a localization department specializing in the fitness niche, you'll need to manage the following vocabularies:

1. English - source language

2. French - target language

3. Software - working language :)

4. Fitness - product language

If it seems demanding, it's because it is. You’re localizing software, after all.

What does a localization specialist do

Localization specialist translates, edits, and tests for quality assurance UX/UI copy. It's involved in product testing and adaptation to the local market in terms of user experience, deployment, and launching.

We researched tons of job ads on Indeed, Glassdoor, and Velvetjobs to get a clear picture on what is the overall demand and responsibilities.

The usual responsibilities of a Localization specialist we found out:

☞ Translation of the copy inside the product

You’ll either need to translate it yourself or review the translation and give feedback to a language service provider.

☞ Editing of the copy inside the product

As previously, depending on how big the team is, you’ll either do it yourself or review the translation and give feedback to LSPs.

☞ QA end product testing for a cultural fit

This is the most exciting part. If you’re working in the gaming industry, you'll need to play games or use an app or software. Yes, this is your responsibility as a localization specialist. You need to do quality assurance and user experience testing as if you’re a representative of the culture the product is being localized to.

☞ Collaboration with product & marketing managers

Further on, you’ll need to collaborate with product and marketing managers. You'll have to give them feedback during and after testing. Your goal here is to vouch for improvements that'll lead to better positioning in the targeted market.

☞ Interpretation during the meetings

Sometimes product and localization teams will be located in two different countries, and they won’t speak the same language - figuratively and literally. Your task here would be to be a mediator in the conversation.

What's a localization specialist salary

A salary is a changeable variance in all job ads we went through. It depends on the company and the niche. Payscale offers an average scale that goes from $57k to $66k

How to become a localization specialist

To become a localization specialist, you’ll need to mix up a few things.

Usually, the requirements are the following:

Knowledge of English and required language(s) at the proficiency level

Keep in mind this doesn’t mean only grammar and spelling skills. You’ll need to be familiar with overall culture, pop culture, the culture of consumption, taboos, and different slang (depending on how big is the localization country, who is the target audience there, etc.).

If we can believe the current state of job ads, the languages that are in the highest demand in the localization industry are Japanese, Thai, French, and Spanish, in combination with English.

Strong written and oral communication skills

You’ll need to convince product and marketing managers of a lot of stuff. Even though you may know the culture and the language better, they know things or two more about product and marketing.

For that reason, you’ll need to master the vocabulary and critical processes of those two departments as well. You’ll also need to be assertive and persuasive as much as possible.

Translating & Interpreting skills

You may think this one is obvious, but let’s highlight it anyway. Otherwise, someone would just use google translate or other machine translators.

We’re here talking about the mix of the previous two - knowledge of the language and different levels of culture, plus highly skilled in oral and written communication.

Training and certifications that show that you can translate and interpret simultaneously are not always required. However, we recommend you get them, mostly because of yourself.

Industry knowledge

This one is very specific, and while you can mix through industries as a translator, if you want to be a localization specialist, you’ll need to choose a specific niche.

Believe it or not, software is not specific enough. Think about the software industry's niches - like gaming, health care, tourism, and hospitality.

Why is this important? Mostly for further career improvement.

You can advance in the localization team as:

☞ a team lead of localization specialists,

☞ a technical writer for either UI/UX or technical documentation, or move to

☞ a localization project manager role.

If you move to the later one, you can focus on the regular ladder - head of localization, director, and VP.

The difference between a localization specialist and a localization manager

As we mentioned at the beginning of the article - the terms localization specialist and localization project manager are often used interchangeably like synonyms. They’re not. But why do they get mixed all the time?

Our guess is that's happening because they do tend to overlap. Also, most digital localization projects are done by start-ups, and we all know by now that startups don’t have the same hierarchical structure as bigger companies.

So we can easily have an employee in a startup that’s a product manager, UX/UI designer, software developer, UX/UI copywriter, and logically, a localization specialist and project manager.

If you’re laughing now, you probably didn’t work a single day in the start-up. However, if you’re bursting into tears, we got you! (also, maybe it’s time for a burnout check-up).

Anyways, let's clear this out.

A localization specialist is more like a translator/editor/interpreter with a solid knowledge of product development and marketing processes. Sometimes even with a software development background.

As a localization specialist, you’ll be in charge of the product and responsible for its final localized version together with a product manager. You’ll also be responsible for the final marketing materials together with the marketing manager. If you’re not a one-person team, you’ll have to prepare glossaries for translators or language service providers.

Either way, you and the rest of the localization team will be able to ease the collaboration on software localization with translation management systems like Localizely.

With a translation editor, you’ll be able to translate, review and approve translations faster and within the actual design context. While features like glossaries and translation memory can help you to speed up and always stay on top of the branding.

As a localization project manager, on the other hand, you’ll be a highly cross-functional person. You’ll be responsible for budget, suppliers, delivery, and deployment.

This means you’ll need to recruit and contract an in-house part of the team, like localization specialists, localization engineers, and other people that are usually part of the localization department, as well as outsourced LSPs.

So, as an LPM, you’re a people manager as well. This means you’ll be responsible for their performance, and a good translation management tool can help you there as well.

For example, Localizely has statistics and reports for both in-house and outsourced translation, and you can easily divide tables andetinto how many words in which language are translated and by whom.

You’ll need to create workflows and briefs and determine deliverables and delivery dates. Among your tasks will be checking on individual deadlines in your team. You'll also work tightly with a localization specialist and a localization engineer.

Oh, and let’s not forget the creation of specific guidelines for particular localization regions in collaboration with different localization specialists.

Choose your starting point

Being part of localization teams can be fun, but prepare for a lot of stress and sometimes even travel.

This may be a fairly new career option for many graduated linguists or a career change for someone trained in software development.

No matter your starting point, working knowledge of translation management systems can help you escalate in your job as a localization specialist. The good news is that Localizely offers a free plan, so you can learn on the go and start with your new job prepared.

The goal of every search engine is to provide users with the most relevant search results for their query.

Besides other factors, Google considers each indexed website's language and geographical affiliation to provide localized and personalized results in SERP.

This means the search results for the same query entered in different languages could be different.

The good news is that you can influence how your website is indexed in terms of geolocation and language. You can do this with website language localization and proper website architecture as a part of your localization strategy. We’ll show you how in this article.

What is website language localization

Language localization, in terms of website architecture, is a process of creation of a set of interrelated website pages with content written in a specific language. This set of pages is called a website's language version. There’s no limit to the number of language versions a website can have.

No matter if you’re publishing in one or multiple languages, you'll need to set up the site's localization correctly to enable Google’s crawler to accurately identify your website's linguistic and geographical affiliation.

Location of language versions

One language website

If a website only has one language version, all of its pages will be located in the root folders and subfolders.

This means you won't have a language mark inside the URL like in this example:

https://website.com/page.html
https://website.com/catalog/page.html

Multilingual websites

However, if a website has multiple language versions, all existing pages of each language version should be grouped together. This means that every language group should be clearly marked in your URL structure, and the pages you are creating in French should be in the folder with the rest of the French pages.

If you have a mix of German, English, and French pages in the same folder, the ones that are not corresponding to the language folder won't be properly indexed.

This grouping can be implemented in two ways. You can place all pages from the same language in separate

1. Directory:

   • https://website.com/de – German version of the website;

   • https://website.com/fr – French version of the website;

   • https://website.com/it – Italian version of the website.

     The advantage of subdirectories is that they inherit the authority of the main domain. This means that Google is treating all language versions of your site as one whole website.

     When should language versions be placed in subdirectories?
     ☞ The website is small and has low loads.
     ☞ All language versions have the same admin panel.
     ☞ Each page has a counterpart in each language.

2. Subdomain:

   • https://de.website.com/ – German version of the website;

   • https://fr.website.com/ – French version of the website;

   • https://it.website.com/ – Italian version of the website.

     Subdomain language versions need to gain their own authority, as Google indexes subdomains as separate websites, where a subdomain is like a child domain to the main domain.

     When should subdomains be used to create language versions?
     ☞ The website is large and needs to support heavy loads. In this case, each subdomain can be deployed on a separate server.
     ☞ Each language version has its own admin panel.
     ☞ The pages of each language version have their own style and contain different content.

Switching between language versions

If your site contains two or more language versions, you’ll need to create a switch that links to analogous pages of different language versions. This will enable your user to reach a page in the desired language without leaving it.

So, when the user switches a page’s language version, they should be sent to the analogous page in another version.

For example, if the user is on an English-language page with the URL https://website.com/page.html, and they change the language to Italian, they should be redirected to the page https://website.com/it/page.html.

To make that possible, links to similar pages in other language versions must be implemented using the HTML <a> tag. Like in the following example:

<a href="https://website.com/de">DE</a>
<a href="https://website.com/fr">FR</a>
<a href="https://website.com/it">IT</a>

If you put just the ISO code for the language, the page won’t be linked properly, as the code won’t be sure what needs to connect, like in this example for the page in French:

<a href="https://website.com/de">DE</a>
FR
<a href="https://website.com/it">IT</a>

For a better user experience, when you have more than three language versions of the website, implement the switch as a drop-down list placed at the top of the page.

Identifying language versions

To identify the language on each website page in the <html> tag, you need to specify the lang attribute with the language code of the current language version in ISO 639-1 format.

Example of the tab for all pages in the English version:

<html lang="en">

If different language versions are created for different countries that speak the same language but have different dialects (such as British English, US English, and Australian English), then the country code in ISO 3166-1 alpha-2 format should be added in addition to the language code.

Example for individual English version pages in the US, UK, and Australia:

• for the USA

  <html lang="en-us">
  

• for Great Britain

  <html lang="en-gb">
  

• for Australia

  <html lang="en-au">
  

Linking similar pages in different language versions

As we mentioned earlier, you’ll need to specify the URLs of all alternate versions of pages in other languages. To do this, add a <link> tag for each page between the <head> tags, specifying each version of the page, including the page of the current language version.

Alternate URLs in the href attribute must be specified in full, including protocol names (HTTP or HTTPS) and website domains. You should use the format https://website.com/page.html, not //website.com/page.html or /page.html.

Your sample code in the head section should look something like this:

<link rel="alternate" href="https://website.com/page.html" hreflang="en" />
<link rel="alternate" href="https://website.com/de/page.html" hreflang="de" />
<link rel="alternate" href="https://website.com/fr/page.html" hreflang="fr" />
<link rel="alternate" href="https://website.com/it/page.html" hreflang="it" />

Once you have implemented all codes for all alternate pages, you can use Netpeak Spider to doublecheck hreflang tags and whether they are correct and present on all pages.

Update the sitemap to accelerate indexing

You’ll need to create a separate XML map file for each page version. For example:

• https://website.com/sitemap.xml – XML map for pages in English
• https://website.com/de/sitemap.xml – XML map for pages in German
• https://website.com/fr/sitemap.xml – XML map for pages in French
• https://website.com/it/sitemap.xml – XML map for pages in Italian

All XML maps must comply with Google's official requirements.

Conclusion

Setting up language localizations correctly will help search engines better understand content written in different languages published on the same website and index your content accurately.

This will increase the relevance of the website and improve its position in search results.

The software will work fine for everyone when the user interface is in English. This is one of the biggest misconceptions we've normalized with globalization.

Anglo-centrism became a golden standard in the tech industry during its development. But we're witnessing the rise of localization.

The Tech industry is developing at high speed in markets all over the world. The digitalization of all industries in almost every country is following, with more than 80% of businesses having running strategies to become digital-first businesses.

However, understanding the user interface in a foreign language is easy for everyone.

A language is not the only thing that needs to be adapted in software- otherwise, you'd need a simple software translation.

Why is software localization important?

Not everyone masters English. Not everyone is fond of using this language either.

Let's think about the following example.

Your target customers are accountants in a country where English is not a native or working language. They're working with domestic companies only.

On this occasion, it's highly probable accountants won't have a high level of English language.

If you want your CRM for accountants to get adopted, you'll need to have a user interface in the accountants' native language.

An additional obstacle to software adoption in nontech niches is low digital literacy among workers.

In the EU, just 54% of the population that's fit to work have basic digital skills, while in LATAM countries, more than 60% of the population is without it.

Considering all this, it's not shocking to hear that 70% of buyers prefer to buy a product or service that offers all information about it in their native language.

So when you're entering a new market, consider cultural preferences and context.

Some may be fine with English. Yet, most will need not only the user interface in their mother tongue but also documentation and training sessions.

What exactly is a software localization

Software localization is a process of adaptation of the software to the new local market. This localization process takes into consideration linguistics, cultural and market context.

If needed, sometimes certain features can be created for a specific market.

The software localization process includes:

☞ translation of all text inside the user interface and

☞ adaptation of design if needed.

Software localization examples

Netflix

One of the best-known examples of successful software localization is Netflix.

This streaming platform is available in more than 27 countries. In every country they entered, they went through a localization process.

They adapt dubs, subtitles offering, and a user interface for maximized user experience. However, this is what most streaming services offer in every country.

Creating local content actually differentiates Netflix from other streaming services in every local market.

In Netflix's case, it means creating series and movies in every entered country with local resources within the local culture.

Yes, they make the content popular in the country of origin, but they also gradually place it in other country markets. This means they have more interesting and mixed content than any other streaming platform.

This localization strategy brought them steady growth of 33% per year.

Spotify

Another streaming platform that conquered the global market with a software localization strategy is Spotify.

Localization of content, in their case music, thematic playlists, and software translation, is a huge stack in Spotify's global success.

They define it as "Designing for Belonging". As their design manager, Nora Ahlenius, says that by localizing images, we can help people feel that they belong and that Spotify is a better choice.

The idea is the following: when a user sees an image and name of the playlist in its own language and local cultural context, it'll feel seen and validated.

In practice, it means there would be a Happy Hits playlist everywhere, in every country. However, it'll contain a different choice of songs and visuals to represent that feeling in every country.

The benefit for Spotify and Netflix comes from local users finding familiar content on their platforms, while at the same time, global users are finding new content they would have never found without them.

Myself included. For example, I would never casually stumble upon series and movies from Peru and Chile on any streaming service in Balkan.

These examples show that software localization is far more than a basic translation of the content inside the user interface.

It needs to feel like it is created from locals to locals.

How's software localization done

Software localization is a complex process. It includes various departments and processes.

A business decision about localization includes an understanding of market conditions, cultural and sometimes political context.

You'll need to develop the best possible strategy for the whole project and a localization strategy for every department.

Once that's solved, the focus goes to the product department.

Internationalization

It sounds like a paradox, but the first step to localization is actually the internationalization of the product.

Internationalization is a part of the process that stands for the separation of the source code from localizing elements.

Those localizing elements will depend from niche to niche, but it usually includes buttons, logins, payments, dates, etc.

Translation

Once you have the entering strategy, the budget, the time frame, and internationalized software, you're ready actually to do the translation part.

You can choose to form a separate localization department for every language. Or you can hire a software localization service.

Either way, these should be the roles that participate in the localization process:

1. developer, preferably a localization engineer

2. designer, preferably UX/UI specialist

3. localization specialist, preferably native in both languages, or at least at a bilingual level. If you're localizing in multiple languages, be sure to hire a separate translator for every translation project.

4. an editor, a native one. This one must be a native speaker from the country you're localizing to. Otherwise, real linguistic testing could happen after the launch and cause a lot of damage to adoption.

5. Unite them all with a good localization project manager in one place - on the translation management system.

Having all departments work on the translation management platform will ease localization and meet everyone's needs.

☞ Developers don't have a lot of manual work. They need to upload the resource file with all information that needs to be translated.

☞ The project manager assigns strings to translators. They can add translators they found by themselves or hire translation services directly on the platform.

☞ Localization specialists will be able to see how translation looks directly in the design. They could get some help from machine translation if there's a lot of material for bulk translation. Also, they'll have useful features like translation memory that can help them go through every translation project faster.

☞ Designers will see what the current design looks like with translated content.

This means everything will go faster.

All sides can adapt and work towards the best possible user interface and user experience inside the software product.

Once everyone is done with their work, a developer can download the localization file that's updated with the translated text and pull it back to the app. No additional coding is needed.

Usually, there are native integrations with GitLab and GitHub, which can make the finishing touches of software localization even easier.

Localization testing

Don't forget to test localized software or app in-house, as well with the small portion of the local market, before releasing the product fully.

When should you localize your software?

The time of software localization depends on the timing of market penetration, software launching, budgets, and people you're disposing of.

These are some of the options that are connected to product development.

After the main software is launched

This one is, more or less, the only option for the already existing software.

It can be costly, but it's a good practice for those who want a sustainable expansion - market by market.

If the product is already launched and you're doing localization of the software or app localization afterward, pay special attention to design.

Use the localization tool to double-check if the user interface is damaged during the translation process before pulling the localization file into the app or software.

Often the target language is shorter or longer than the sourced one, which can cause many problems with the design.

Even if you're launching localized software afterward, you'll often have to go back to the design stage and go through the product development process all over again, increasing costs.

During the design and development stage

This is the most ideal option - running the localization project at the same time as we have the product in the design or development stage. However, this one is not always possible.

You should have a budget prepared for simultaneous software development and software localization projects for every target language if you're doing an app development and mobile app localization as well, it's an additional budget overload.

Even if you use a localization tool and do the best project management, different languages will demand different changes and adaptations to the product be sure to hire enough people to handle localization software projects.

Continuous localization

If continuous integration, continuous delivery, and continuous deployment are what you swear by, this is the right approach for you.

This approach takes the best from the previous two.

Every string is ready for translation and deployment before development goes to the next stage.

IT ideally starts at the design stage and suits the best the teams that are constantly updating the software or mobile app or for the software localization services that have a fast pace with their clients.

Conclusion

Software localization is a complex process of translation and adaptation of the product to a completely new market. It can be costly, but if it's done well, it can greatly impact the company's growth.

If you're planning to do it, go through the localization strategies. Use a translation management system, and hire people who'll be eager to take an additional step to understand the local audience.

Global growth used to be reserved only for big companies. They could afford to invest money and time and survive repetitive budget breaking.

Breaking the budget was often caused by wrong assumptions. The most popular and costly belief was that what worked for one target market would work for every following one.

The reality was that taglines would often become offensive, weird, and misleading.

A good example is when Swedish company Electrolux wanted to expand to the USA. For that occasion, they translated their tagline to "Nothing sucks like an Electrolux."

Long story short, they had to pull off and come back a few years later — with a different brand name and a more proper tagline.

Oh, and they were selling vacuum cleaners, in case you didn't get it, as 99% of the consumer market in the USA.

Conquering a foreign market is a high-risk investment but not impossible to do without failing. So let's dive into localization strategies that will save you from that.

What are localization strategies?

Localization strategies include:

❶ business expansion,

❷ product internationalization,

❸ interface translation, and

❹ general content and marketing materials

adapted to the consumer market.

Shortly, a localization strategy is a holistic approach to international business expansion. It's also a multidisciplinary approach that involves work across different departments.

The basis of the localization approach is to consider the cultural differences of the target market. This mindful management of business expansions to new markets can help you gain big portions of a global audience.

If you think this is an exaggeration and that English can solve everything - think again. Even though a global market sounds heavenly, the reality is that 60% of internet users rarely or never buy from English-only websites.

The same study shows that more than 70% of them prefer to purchase a product or service when they can find all information in their native language.

What goes into planning a business's localization strategy?

Most of the articles out there talk only about software translation, but localization starts far more before that.

The details may vary depending on your industry and niche, but for a proper localization process, you'll need to gather people from the following departments:

☞ business development,

☞ legal,

☞ finance,

☞ product,

☞ security,

☞ marketing, and

☞ some translators.

A quality localization manager would be of enormous help too.

It's important to plan the roadmap for localization for every department. Also, to figure out which parts of the project can go simultaneously for a faster pace, etc.

To help yourself out and plan better, try to answer on following questions as well:

• How long will the localization last? Consider all steps and hours per department.
• What are the predictable costs? Inhouse hours, outsourcing, legal costs, etc... Everything you can predict from the road map.
• How big a budget do you need? Make three options - minimum, maximum and ideal. It'll be much easier for you to understand how much you can stretch**.**
• Is this investment a good move for you right now? Business expansion is always a good idea, but is it the right time for your business to go that way? Do you have enough money and people so the extension to a new target market won't affect your core business?
• What are potential KPIs and ROIs for the localization and for every department? Yes, the ultimate goal is releasing a product and getting a high conversion rate. But how'd you know you're getting there during the localization process? Are you moving at the right speed or walking the right path? Is the current localization strategy working? Set the smaller goals, and the smaller wins will make an awesome compound effect at the end of the road.

For localization strategies per department, follow these steps and answer some more questions:

1. Operational localization strategies

Before you even start adapting your product and marketing effort, do market research.

Cultural differences can be incorporated into every segment of life - how the local audience consumes, how's business done, how taxes are regulated...

Be sure to:

☞ Investigate the industry you are part of: how's performing, how big it is, what influences its level of development in that country, and most importantly — is there room for another player?

☞ Find out the buying power of the local audience. Would they be able to afford your product or services? How they usually purchase, and how long their decision process is. Can you afford to adapt your pricing and offers?

☞ Figure out do you need a legal entity to be able to place your product or service in a certain market. Not to mention tax regulation and export/import rules if you're having a hardware product. Tax and legal regulation are also a very important topics (and part of the budget) if you need to hire locals.

☞ Doing app localization? Double-check how the Apple store and Google play are operating in your target country. Untangle if there are any limits, changes, or maybe completely different operating systems and app stores you need to get familiar with.

Try not to pass through these steps superficially. Something can backfire during the process or even afterward.

2. Product localization strategies

Product localization ( l10n ) is what we're all here for. This is a process of software translation and adaptation to the new local market.

Localized content is the one that resonates with consumers because it is tailor-made for them.

Internationalization

Before you even start with localization, going through the internationalization process is recommended.

This strategy will help you later on with localization. How? Internationalizing your products implicates product development that's adaptable.

It's a technical part of localization, even though it sounds like something opposite. The focus here is to separate the source code from localizable elements.

The source code should be the one that defines how the software operates. This should be the main code, and it should be the same for every localized software version.

The localizable elements should be buttons, login and payment options, dates, UI copy, and sometimes design.

All popular frameworks, like Flutter, Django, Angular, React, NextJS, support internationalization by default.

Whatever language you're using, make use of Unicode encoding to simplify the process. With Unicode, your software can properly show characters from different languages.

Localization

You won't believe it, but here we are. Localization!

Here's where your developers need to be synced with translators and editors.

This is the main task for localization managers and a localization specialist. They should ensure that:

- translators and editors understand the context of everything they're translating.

- developers get a translation that'll fit into the predicted UI design.

Translation management systems can help out here. They're enabling developers to upload and download localization files without a lot of code impact.

At the same time, translators and editors are able to experience how their translation looks with in-context editing.

Another important thing to consider when localizing is how you choose translators. It would be best if you're able to find the ones that are native in the source and the targeted language.

If not possible, choose at least those who have experience living in the targeted language culture.

Standard language norms and everyday slang are not the same. And the level of consciousness of these layers influences the quality of the translation.

If you're struggling to find appropriate translators - check if your TMS has the option to order a translation from translation services.

3. Marketing localization strategies

Different country - different language. That's a highlight of every localized marketing strategy.

All localization efforts will go to waste if you try to market your product to a target market with different cultural norms the same way you did with your local audience. You need a localized marketing strategy as well.

What does localized mean in marketing?

It means you're adapting every marketing campaign to a different market. Your content strategy in all marketing materials is focused on a local audience, and it's in their native language.

Why a localization marketing strategy works well?

Because consumers can connect with the local slang, stories, and locally famous persons way faster than with something they see for the first time.

Last but not least, 56.2% of consumers said the ability to get information in their own language is more important than price. And what's marketing if not spreading some information?

For this part of the process, you'll either need to hire some very talented and marketing-trained translators or hire local marketers to help you out with marketing penetration.

The second one is more likely to be found, though.

Keep in mind that a good content localization strategy is not just a linguistic localization - your website, social media, and running ads are alive and constantly changing.

Plan, adapt, execute

Adapt localization strategies according to your needs and possibilities. Execute systematically. Use tools and software that can ease up the process. And let's conquer the new markets together!

Globalization of brands can lead to enormous success or not-so-glorious failure.

What makes a difference is if you understand the local market you’re trying to penetrate and how the localization of the product is done.

Most of the time, word-for-word translation won't work when you need to translate an app. You need to understand local dialects, cultural context, humor, currency flow, and date range that are in use - only to mention some - to get an accurate translation.

Whether we love or hate Excel, it’s honest to admit that the management of translation processes is out of its capacity.

When doing software localization, the translation management tool emerges as the story's hero.

What's a translation management system, anyway?

A translation management system (TMS) is a platform that you can use to organize software translation projects.

You can unite a developer, localization specialist, LSP, and editor on one translation management platform. You'll need a project manager to guide the process and do content management, but for the rest you can rely on the translation software.

Most of them are usually cloud-based, so you don't have to worry about scalability.

Whether you’re choosing a web-based translation management system or one that’s on-demand, it’s important to understand if you need static or dynamic translation management.

Double-check if the platform offers dynamic translation options if you have eCommerce localization projects. Any translation management platform will do the work for everything else (software, apps, regular websites).

How does a translation management system work

Translation management systems are equipped with different functionalities and features that you can use to simplify and streamline the workflow and processes.

Here’s what you can do with translation management systems:

Automate repetitive tasks

Most translation management software lets you choose between multiple supported languages.

You also have the option to upload your own glossary on desired languages. This way, you'll automatize keeping the words you don’t want to translate. Having predefined words can improve the quality of your translation. You’ll be consistent and keep the strong branding and your tone of voice.

Additional help for cutting out redundant tasks is having translation memory. This feature will memorize all translated words and phrases you approved during a review. Later, the software will automatically offer you those translations whenever you import localization files containing them.

Some of the translation management systems support machine translation, like Google Translate or Amazon Translate. This can enable you to translate in bulk and then focus on the adaptation of raw translation.

Work with platforms you already use

The translation management system should help streamline the process - by definition.

While you’ll have to upload some files and do task assigning, you can also have the TMS integrated with the apps and software you’re already using with native integrations or with APIs.

You can also upload different variations of localization files, so your developers' team doesn't have to waste time on documentation transfers or manual import in sheets. Not to mention that this feature helps your translators by giving them all the visual context they need.

Test translation variation easier

Seeing translation in the app and realizing it’s too long starts the translation cycle all over again.

Luckily, translation management systems can have in-context editing. This means you can immediately check how the table's text is positioned in the app or the browser - which speeds up the process.

You could also use the project branching feature if you’re translating your template app for various clients.

You can do the translation from your source language to your desired language. Then copy that translated content into the desired number of branches. There you can adapt information like the brand’s name, address, etc.

This will enable you to compare translations and adapt them easier. You'll also have a faster testing phase.

Update apps faster

It’s no secret that the slowest part about the release is, well, the release itself. Every update of an app can be painful due to approvement waiting line - for both Apple and Google stores.

The good news is that some of the translation management systems have a solution. It’s Over-the-air localization.

With this feature, you can push updates to your app without waiting for Google or Apple to release it.

Scale at speed

It's 2022, so most of the software is cloud-based. While you can find TMS that are on demand, the efficiency of cloud-based translation management systems is that you can scale faster.

You need to add new language translation, new versions, and more employees to the project? Web-based translation management systems can be upgraded in just a few clicks, and sometimes, even dollars. You don’t have to wait for eternity while you break the budget to the ceiling.

Collaborate effectively

Whether you have an in-house team, you’re outsourcing or mixing all together. You can manage translation projects in the same place using translation management systems.

You can add different collaborators and assign them their tasks and deadlines without any unnecessary email or switching through various CRMs and docs.

Additional help you can find on TMS are options to order translation from translation service agencies partnered with Localizely. The Language service providers won’t be able to see your whole translation project. An assigned translator will see only the parts you assign to them. The same rule is applied to a freelance translator as for translation services.

Measure your work and improvements

Costs of errors and inefficiencies are often the biggest deal breaker for breaking the budget and deadlines the budgets.

When you’re organizing translation processes within multiple docs, emails, and excel tables, you can’t really measure efficiency nor find errors in the process that could be improved.

The beauty of the TMS is that they mostly offer reports and statistics. So you can easily measure all parts of the workflow for all collaborators during the project.

How do you manage a translation team with TMS

So what actually looks like to work in a translation management platform?

☞ You must create a project in the dashboard, where you choose your source language and the languages you need to translate.

☞ Upload the localization files, and add some screenshots of the app or software for the UX context. This will improve translation quality and make the translation process smoother and with fewer revisions.

☞ The next step would be to assign parts of the project to translators and add comments and deadlines where and if needed.

☞ After the translation is done, reassign the task to editors so they can review it and approve it, or ask for a correction and reassign it back to translators.

Once this process is over, you can reassign the project back to developers so they can add translations to the app - manually downloading the file or via GitHub integration.

Improve market penetration with a translation management system

Positioning in a new marketplace is not an easy venture. There are a lot of processes, high stakes, and costs... and you didn’t even start yet.

With the best translation management system - like Localizely - you’ll be able to simplify workflow and processes, automate redundant manual tasks, scale faster, and collaborate across departments more efficiently.

Try Localizely TMS, and leave more energy and focus for your teams to do quality translation and feature coding - so penetration to the new markets can go as smoothly as possible.

Overview

While developing your product or service of any kind, are you imagining that many people will use it and that it will serve them well? You need localization and internationalization for this.

With this guide, we will explore in detail the words localization and internationalization. We will focus on the differences between the concepts of localization and internationalization.

What are the benefits of localization and internationalization? Why it is most beneficial to consider them during the early stages of the development process?

Let's start our localization vs internationalization journey and find out some answers 🙂

Definition of localization (l10n)

Adapting your product or service to the local market of your choice is localization.

Localization originates from the word "locale", we use the abbreviation for localization - l10n.

Localization means that the creator of the product or service is trying to remove all the potential barriers between you and your understanding of the product or service. It aims to be intuitive while keeping in mind different cultural backgrounds.

Steps to check for successful localization:

• Translating and proofreading
• Visuals
• Currencies
• Local regulations
• Local market data surveys and statistics
• Time and date formats

The localization phase sometimes requires a localization manager position. A localization manager is usually the person from that particular region who understands the culture and preferences specific to that region.

Definition of internationalization (i18n)

The term internationalization is the action or process of making something international. We can internalize every product or service.

Internationalization is designing a product in such a way that considers future expansion to many markets. The abbreviation for internationalization is i18n.

In the Software as a Service industry common places where you need internationalization are:

• Product design,
• Development and
• Quality assurance

Some of the design challenges in internationalization are texts within graphics.

In software development, you would need to neutralize the code, so that you can add right to left languages or double-byte languages if needed without much hard-coding. Right to left language like Arabic, and double-byte language like Japanese. How to neutralize the code depends on the programming language or framework that you use.

For more information on how to neutralize the code in internationalization - check the tutorials for next.js internationalization, angular internationalization, django internationalization, react internationalization.

In quality assurance you would need to adopt to testing based on local culture, also there will be some challenges in selection of QA tools.

Internationalization is the first stage of globalization.

Internationalization vs Localization

Localization and internationalization are processes that will enable your business to get in front of a new audience. They will expand your reach, brand identity and get you a high return on investment - ROI.

This means that, as you develop your products or services, you should take into account international data to cover more than one market. Localization, on the other hand, is adapting to a particular market.

Internationalization is more focused on structure and development, while localization is more intended for the specific end-user.

Infrastructure that facilitates internationalization is essential to localization. Localization and internationalization are not opposites, they are often combined for better business results.

The technical impact of product internationalization is enhanced quality and code architecture. This will maximize the benefits of both localization and internationalization.

In product development, internationalization is important for reducing the time for implementation cycles. While localization is that fine touch that makes a difference and finds its way to a specific user faster, and more often with a level of unique relevance tailored to their needs.

Abbreviation for localization is L10n or l10n, and for internationalization is i18n. These kinds of abbreviations with numbers are so-called numeronym.

Standard Software Localization Process

Let us take language localization as an example. During the language localization process you need to include:

• Developer
• Translator
• Project manager/Localization manager
• Designer

Some companies have a person in charge of leading this whole process, which can tell you how complex this can be. The role for localizing the product or service is localization manager.

To localize an app and to update it in every language it takes a system or platform which can navigate and organize that process. Check Localizely for this. For example, if you have different versions of an app, you need to have an exact version for each one or so-called branch.

Example of a standard software localization process:

1. Gathering all the materials and evaluation of the tools and resources required for localization to happen
2. Cultural differences, technical (such as coding requirements), and linguistic
3. Terminology glossaries - structure and regular updating
4. Translation to the local language
5. User interface adaptation, resizing of forms and dialogs, where required
6. Localization of statistical data to the specific market
7. Compilation and build of the localized files for testing
8. Translation and quality assurance testing
9. Project delivery

Localization processes vary from company to company, but most of these steps are difficult to exclude.

Who needs l10n and i18n and when?

As mentioned internationalization is the first phase of globalization. Every company that wants to reach out to a global market should start with the internationalization process, and in order to be successful in the specific markets to do the localization.

In the Software As a Service industry, you can get started with the internationalization phase while you are still in the start-up stage! Now, that is even necessary for many start-ups to thrive.

To reap all the benefits of i18n and l10n you need to include them in the early stages of your business.

L10n and i18n market benefits

Some of the benefits of localization:

1. Will give you a competitive advantage
2. Will serve well for branding your business
3. Will increase your revenue, people are more likely to buy something that is in their language
4. Customer satisfaction and loyalty will also increase

Some of the benefits of internationalization:

1. New markets
2. Diversification
3. Independence from one market
4. Foreign investment opportunities
5. Faster implementation cycles
6. Bigger talent pool

L10n and i18n examples

An excellent example of localization is Airbnb. Airbnb website and app are available in 62 different languages. How impressive is that? They did not finish their localization there. On the Airbnb website, you can find content about the countries where people are booking their apartments. There is almost a sense of a private tour. They create content for local purposes too.

Businesses can consider their internationalization process successful once they have learned how to localize, and there is not a lot of hard coding involved. This is what happens when the localization framework is considered from the very beginning.

The intuitive features of the user interface are almost everywhere universal. This user interface (UI) design occurs during the internationalization process.

Conclusions: Internationalization vs Localization

Today, localization and internationalization complement each other and they are ongoing processes in most companies.

Internationalization will help you build a good structure for your product so that you can thrive faster in many countries.

Localization considers the specific requirements of the country. Good localization will lead to increased sales and brand loyalty.

Their combined impact on your business success will help you optimize your resources and give you that competitive edge you need.

In Localizely we thought about your software localization process. Check out our translation management platform where your whole team can collaborate and go that extra mile in your business a lot faster. Try it for free for 15 days, no card is needed.

Unicode is an international character encoding standard. Its development dates back to the 1980s. Since then, it has gradually evolved. The intention was to create an encoding that would support multilingual characters and work across different platforms. To better understand it, it is necessary to see what limitations encodings of that time had. More on that in the following chapters.

What is encoding?

Before we tackle concrete encoding standards, let’s see what encoding is and why it is necessary.

Character encoding is an old problem that dates back to Morse code. The Morse code encodes characters in short and long electrical signals, which allows the transmission of messages through wires. Today’s computers work similarly. Instead of short and long electrical signals, they have zeros and ones. In other words, encoding is the process of transforming one form of data into another. The reverse operation is decoding or transformation of the encoded data into the initial form. Thanks to that, we can work with plain texts and delegate those transformations, storage, and network operations to computers. To ensure the correctness of the data, it is necessary to have standards that would precisely define each of the operations.

What is ASCII?

ASCII (American Standard Code for Information Interchange) is one of the first widely used character encoding standards. People from the telecommunication and computing industries in America created it during the 1960s. They wanted to overcome some limitations that encoding had at that time, so they developed a new 7-bit coding system. It was widely accepted by computer manufacturers, and later became an international standard for character encoding. As a 7-bit coding system, it supported 128 (i.e. 2⁷) characters, 96 printing characters, and 32 control characters. That was sufficient to encode numbers, some special characters, and the letters of the English alphabet.

However, the spread of computing and the Internet has created a need for other characters as well. As computers used 8-bit bytes, some manufacturers decided to use the remaining 8th bit in the ASCII code and thus expand the number of characters to 256. This 8-bit encoding is often referred to as “Extended ASCII” or “8-bit ASCII“. With the growth of different 8-bit encoders, data exchange became complicated and error-prone. That was a sign that it was necessary to find some universal solution that would work for all languages and cover all the special characters.

What is Unicode?

The need for a uniform encoding system that supports all languages was already evident in the 1980s. The spread of the Internet in that period certainly had an impact on it. Later, in 1991, two organizations, ISO (International Standards Organization) and Unicode Consortium decided to create one universal standard for coding multilingual text. For that purpose, they decided to merge their two standards, the ISO/IEC 10646 and Unicode. Since then, these two organizations have worked together very closely and kept their respective coding standards synchronized. Also, it is worth mentioning that Unicode imposes some implementation guidelines that should guarantee uniformity across platforms and applications that the ISO/IEC 10646 does not have.

Unicode provides a unique code for every character, in every language, in every program, on every platform. It enables a single document to contain text from different writing systems, which was nearly impossible with earlier native encodings. Moreover, Unicode supports emojis, which are an indispensable part of communication today.

Unicode Transformation Formats

Unicode defines several transformation formats, also known as UTFs (Unicode Transformation Formats). These transformation formats define how each code is represented in bits in memory. Below is a brief overview of the three UTFs that Unicode Standard provides.

• UTF-8
  • variable-length character encoding that uses from 1 to 4 bytes (from 8 to 32 bits)
  • backward compatible with ASCII
  • the most common encoding on the web (~98% of all web pages)
• UTF-16
  • variable-length character encoding that uses 2 or 4 bytes (16 or 32 bits)
  • internally used by Microsoft Windows, Java, JavaScript, etc.
• UTF-32
  • fixed length character encoding that uses 4 bytes (32 bits)
  • faster to operate but uses more memory and wastes a lot of bandwidth

When it comes to which transformation format is best, there is no right answer. It depends on what you need. Each of them has its pros and cons. If you don’t know, take UTF-8, it is the most dominated transformation format on the web.

Final thoughts

As you may have noticed, the rise of computing and the Internet brought some new challenges. One of those challenges was how to support new multilingual characters that work well on all platforms. Fortunately, some bright people have devised Unicode. Today, we can hardly imagine working on a computer without this way of encoding. Also, we must not ignore the fact that people from the beginning wanted to use computers in their native language, which tells us how important localization really is. In case you need to localize your website or application, Localizely can help you with that. Create your free account today.

The niche of translation management software is not saturated, and they’re all doing the same thing, no? So the choice of the software is relatively easy - I’ll just choose what I can afford or whatever I see first.

Believe it or not, more than 30 translation management systems already exist. They all offer various services, features, and possibilities suited for different types of businesses and needs.

That’s why we analyzed those currently available. We tried out and handpicked nine translation management software we evaluated and ranked.

While we did our best to be objective, we firmly believe that the best practice for choosing any product or service is knowing your own needs and possibilities. Be honest with yourself and your team, and choose the one that’ll serve you best.

What were the criteria for our translation management review

We conducted an in-depth comparison of translation tools, testing each during its trial period for several days. We’re entirely relying on reviews from Capterra, but we picked a little bit on G2 as well.

Please note that information about features and prices are taken from the available information on each company’s website. They’re changeable. We shared what’s there at the moment of the research, and we’ll give our best to update the article regularly, but keep in mind that automatic updates are not possible as we’re not connected to providers.

The main criterion for reaching the top nine list of translation management software was that the localization platform is actually making the process simpler for users. The following was that they’re offering everything you’d need while scaling your localization.

We analyzed if the translation software has the features that help the translation team in:

• Project management like the visibility of tasks and assignees, the ability to assign tasks and follow the progress, etc.

• Translation processes like translation memory, vocabulary to help with branding voice, some machine translation to help with translation, providing context for both translators and designers, and the ability to hire language service providers.

• Usage and experience like seeing translation varieties and options inside the UX design, how fast one can adapt, and/or find something.

• Development like the easiness of the implementation of the translation into the app, how many coding changes you need, and if they have over-the-air features for the fast update

We also considered different needs that a freelancer, small business, scaling startup, or big corporation may have, like team members, changeable string needs, roles, and access management.

How should you choose from this list?

Defining your localization team's size, the timeframe for the localization project and the budget you have for the software subscription should be your first steps.

Before looking into the offerings or our review, put on the paper

☞ How many people will work on the project

☞ How many projects will you have?

☞ Do you have recurring projects, or it’s just a one time

☞ How wordy is the content you need to be translated?

☞ How many strings you’ll need for the project? *

☞ What are the source/translated languages? Is it a platform that you're considering supporting them?

☞ Do you already have translators, or you’re hoping to hire them over the platform?

*Please note that strings are calculated differently in every translation management system.

For example, on some pricing pages, a string is a word or phrase in one language. It means that your source and translated strings are calculated separately. While on others, one calculated string is a word or a phrase in sourced and translated languages.

Just to illustrate it for better understanding.

If you have the word “dog” in English as a source language and want to translate it into French and Spanish, you’ll get a dog - le chien - el perro. In some TM software, this is three strings. In others, like Localizely, it’s one.

Best Translation management software: comparison

We went over more than 30 different translation project management software, and here are our impressions of the nine most impressive translation management tools.

1. Localizely - Best for software localization and startups

Localizely stands out from its competitors because of its highly intuitive interface and how easy it is to incorporate it into your current workflow and within the software and platforms you already use.

Its pricing and feature ranges are highly customizable, with seven different plans. You can easily adapt the pricing plan for translation management software based on your needs - how big projects you’re running and how many simultaneously.

Who can use Localizely?

Localizely is perfect for teams of all sizes, but you don't need to be a part of a big crowd to organize your translation with this app.

Localizely is highly adaptable and customizable. Whether you’re a student putting theory into practice, building an open-source project, or growing a business and having to manipulate projects in multiple languages daily, it's a good option.

However, you won’t find plugins for AI website translation that is so convenient for eCommerce. So we recommend using this translation management tool for software, app, and game localization.

What additional features does Localizely have?

Besides the usual project dashboard where you can see a string in sourced and translated language(s), Localizely has some nice perks that can speed up a process and improve the experience for all project participants.

With Localizely you can:

☞ Add strings for translation via screenshots

☞ Edit and translate text online and in context

☞ Adapt design in real-time with the Figma plugin

☞ Track the activity of teammates, manage their permissions, and assign them tasks

☞ Accelerate the translation of big projects with translation memory and a machine translation

☞ Be consistent with your branding over the multilingual versions with a glossary

☞ Hire translation service fast on the platform and control translation costs.

☞ With an over-the-air feature, update your apps faster without waiting on approval from App Store or Google Play.

☞ Connect your Localizely account with GitLab or GitHub via easy integrations

☞ Customize integrations with whatever you need via API access

☞ Handle as much as you can multilingual project in different stages with project branching

How easy is it to use Localizely?

Starting with Localizely is quite easy. You need to register for an account, add your teammates, create a project, upload a localization file, assign strings - et voila - everyone can start doing their thing.

You’ll get a guided onboarding from the moment you click the sign-up button through creating the project and using most features. Everything is transparent and easy to find, as seen in the following screenshot.

How much does Localizely cost?

Localizely has separate pricing plans for individuals and companies so anyone can find something for themselves.

The free plan is for one project and 250 hosted string keys. There is also an option to apply for free usage if you have an open-source project.

The basic plan for personal use starts from $16 per month for unlimited users and languages and 500 hosted strings. This is around $192 for a year.

For 1000 string keys and two projects yearly price is $384, and for 2500 hosted string keys and three projects yearly plan for personal usage is $780.

The plans for companies and organizations start from $125 for 5 Projects, unlimited users, unlimited languages, and 5 000 hosted string keys. Essentially, this plan will cost you $1500 per year.

If you need 10 000 hosted string keys and up to 10 projects, your yearly bill will be $3000. The last one - the golden plan - is for enormous projects that include 20 000hosted string keys and 20 simultaneous projects. This one will cost you $5700 annually.

How did the users rate Localizely?

We looked on Capterra, and there were all straight As. Users are generally delighted, highlighting that customer support is a game changer.

2. Lokalise - Best for marketing localization and middle-size businesses

Lokalise is differentiating itself with robust and dedicated marketing.

Although their integration list looks promising and existing, some users shared on Capterra that it can be challenging to implement Lokalise in the current workflow without much disruption.

Who can use Lokalise?

If we’re to judge a book by its cover, it’s most compatible with marketing departments with heavy workloads.

However, they do offer custom plans for start-ups, mid-size businesses, and enterprises.

What additional features does Lokalise have?

Apart from organizing words and phrases in strings, you have some additional options with their integrations that are an excellent fit for marketing localization.

With Lokalise, you can:

☞ Exchange data with Zendesk Guide.

☞ Post project activity to a Slack channel.

☞ Exchange translations and screenshots with Figma and Adobe XD.

☞ Exchange data with Contentful, WordPress, and SalesForce.

☞ Translate HubSpot pages, blogs, and emails

☞ Create tasks in Asana and Trello based on tasks you create in Lokalise

☞ Translates conversations between customers and your team in real-time

☞ Sync your Intercom help docs with Lokalise

How easy is it to use Lokalise?

Signup and first steps, like creating a project, assigning tasks, etc., were relatively easy… However, we struggled a little bit to find our way back to the project we’re currently running.

The helpful thing was that all the plugin installations were evident in the dashboard, no matter where I was. This also made me think - who the hell wants their flow interrupted with slack messages and emails while they’re trying to focus on translation? But I guess that is only me being a millennial snowflake.

How much does Lokalise cost?

The trick with Lokalise pricing is not about how large projects you have but how many people you plan to include.

Yes, their plans are focused on seats, and they’re starting with $120 per month if you’re billed annually. This plan is for up to ten seats and 5000 hosted keys, which is around $1680 per year.

If you have ten people and 10 000 hosted keys, your yearly plan will be around $2760, while annual billing for 15 seats and 30 000 hosted keys starts from $9900.

How did the users rate Lokalise?

Going over users’ feedback on Capterra, we realized that we’re not the only ones confused with Lokalise’s pricing plan, which includes a combo of seats and host keys.

Users are primarily satisfied with the value for money and customer support. Still, they tend to comment that the pricing is confusing, the loading of big files is problematic and that they don't support many file formats (for example, they don't support MD format, which is quite ib in devs' world).

➡︎ Check why Localizely is a fair better alternative to Lokalise.

3. Weglot - Best for eCommerce websites

This translation management software is specific in its niche. It’s solely focused on web content.

No matter which CMS you’re using, they have an integration. They can pull content from your website to their software, translate it automatically, and leave you an option to update the translation if and where needed manually.

Who can use Weglot?

Freelancers, agencies and big or small companies have tailored plans.

However, we think this type of software is primarily a life savior for eCommerce websites with heavy workloads of content change.

What additional features does Weglot have?

Yes, they have a dashboard-like place where you can organize hosted strings and edit everything manually.

However, Weglot has some specific features ideal for fast-changing websites:

☞ Multilingual SEO: this feature automatically creates a unique URL for each version of your web page, makes Hreflang tags, and gets your content translated into the source code and not just dynamically.

☞ Visitor language redirection - redirects your visitors automatically to a version they should see based on the language on the user’s browser.

☞ Top-level domain - this one is an enterprise-level feature, allowing you to create a new domain with translated content automatically.

☞ Hiring professional translators - like on most of the translation management platforms, you have an option to hire translators directly.

☞ Translated URLs - a fantastic feature that translates your URLs directly. So the About Us page URL will go from yourwebsite.com/about/us to yourwebsite.com/fr/a-propos.

How easy is it to use Weglot?

It started very promisingly - registration was relatively easy, and they’re guiding you through project creation and connection to your site of choice (in our case, WordPress).

Everything was connected in five minutes, and we could go to the project itself and correct machine translation where needed.

The UI is straightforward, thigh, and intuitive… Except, our website didn't go multilingual automatically.

I didn’t get how to publish translated version on my website.

I need to admit that I didn't purchase any plan or talk to the support, but I noticed in Capterra reviews some folks had similar problems. Weglot support troubleshot tight and effectively. The issues were mostly happening when you’ve been using a similar tool previously - which we did.

How much does Weglot cost?

Weglot has different pricing plans and a free trial option for one language and up to 2000words.

The starter plan is going from 99€ for a year, one language translation, and up to 10k words. The Business plan is 190€ and includes three translated languages and up to 50 000 words. Trial, Starter, and Business plans all include one project and one team member per plan. If you need more projects and team members, you’ll need to consider plans and the higher tier:

• Pro for 490€ includes up to 200k words, five languages, and two team members

• Advanced includes up to 1 million words, 10 projects, 10 translated languages, and five team members for 1990€ yearly

• Extended plan includes up to five million words, 2o languages, and projects, as well as team members, for a 4990€

Like with Lokalise, Weglot is focused on people participating in the project, but more strictly with an additional restriction of project, language numbers, and transition requests.

We found it a little bit confusing, especially because they have a word counter tool that can count all words on your website and create a price for it. The thing is that that price doesn't resemble the numbers on the pricing page.

How did the users rate Weglot?

Most users are satisfied with the fact that machine translation is quite good, but they highlight that it needs manual editing before publishing.

There are users that find their pricing and invoicing system extremely confusing and blocking, and the backup menu is complicated….

➡︎ Check why Localizely is a fair better alternative to Weglot.

4. Crowdin - Best for crowdsourced projects

Crowdin is probably one of the most popular translation management software among developers, which explains why they offer unlimited public projects in their pricing.

Who can use Crowdin?

We could say - everyone. But most users are developers with big open source projects. This happens mostly because Crowdin has options like unlimited public projects, where you can just invite your community to contribute as translators and editors.

On the other side, big hard tech-oriented businesses are also big fans, as they can have unlimited private projects on the highest paying tiers. What to say, developers are impressed with unlimited options.

Besides that, it’s common for most customers on Crowdin - they mostly do crowdsourcing.

What additional features does Crowdin have?

While Weglot has all the features one might need to organize localization, they’re not available in basic plans. We’re speaking here about basic features for translation management software - like team and project organization and automation.

☞ Public vs private projects: this is almost a unique feature of Crowdin. It’s super useful for crowdsourcing contributions or projects in general. Anyone can be invited to the project and

☞ Custom domain name: easily share your project on your own URL.

☞ Filtering options: Sort sand filter strings without translations, with comments, approved ones, added after a specific date, or use any other available filter to view only the strings you need.

☞ Offline translation: Enable translators to download source files and make translations offline on their computers.

☞ Hidden text: Hide texts that shouldn't be translated. They are visible only to the project owner and managers.

☞ Customizable keyboard shortcut: Create shortcuts for saving translations, switching between strings, and more.

☞ Support for right-to-left languages: Translate right-to-left languages as they will be displayed properly in the translation field and exported correctly.

How easy is it to use Crowdin?

This one was a no-brainer. The onboarding was smooth, and they guided us through the project registration and creation and uploading of the localization file.

However, things went south when we tried to find where are translated strings were stored… I guess it goes easier with time, but I was lost in the text's chaos. And I'm not a developer, so probably not really a target audience either.

How much does Crowdin cost?

As we said, it's free for public projects, but if you’re into some privacy and business, you can start with $4o for two private projects and up to 100 000 hosted strings. This is around $480 for an annual bill.

Be careful here with pricing. At Crowding, one word/phrase is a hosted string, and it’s counted as one for the source language and one for every translated language.

How did the users rate Crowdin?

Overall the users' experience with Crowdin is smooth and on the positive side, mostly because of crowdsourcing possibilities. The things that, however, do concern some users are a struggle to have feature requests addressed, as well as having basic features like team management in the affordable plans. This can be quite a challenge as most crowdin users are hiring freelance translators.

➡︎ Check why Localizely is a fair better alternative to Crowdin.

5. Phrase - Best for small businesses

The Phrase was acquired by Memsource a year ago, and our main concern was whether we should observe them as one brand and product or not.

When we began the research process, they were still operating as two separate branches and two separate products, so we tested them as such. However, at the moment of publishing, they became one brand, one website, and one product, so we removed Memsource from the list.

Who can use Phrase?

While it is written that everyone can use the Phrase, the truth is that it’s most suitable for small business that doesn’t grow quickly and have a stable workload.

You’ll see why when we come to the pricing model.

What additional features does Phrase have?

Phrase has a lot of useful features, plugins, and integrations. However, they’re mostly available on advanced and enterprise plans.

☞ Over the air for faster updates of apps.

☞ Integrations with Figma and Sketchbook for faster design and translation alignment

☞ GitHub, GitLab, Webhook, and Bitbucket sync for less dev work

☞ Jira, Slack, and Zapier integration for more automation (or notification)

☞ WordPress and Contentful integration for easier content management

How easy is it to use Phrase?

Setting up Phrase is fairly easy; they’re guiding you through the whole process. And once you’re in, managing your tasks and projects is a piece of cake.

The UI is impeccable, and it was effortless to find anything I needed.

How much does Phrase cost?

Depending on your needs, the price may vary. However, the plans are starting with $24 per month per user for the Basic plan. So the yearly charge would be $288 per user. This one includes unlimited word hosting and up to five seats, but the trick is that you don't have access to machine translation. If you fill out all five users, it goes up to $144o for a yearly bill.

That comes with an advanced plan for $36per month per user - that’s $432 per user yearly. Here you get features like translation memory, advanced review workflow, an in-context editor, and the possibility to integrate with GitHub, Git Lab, Figma, Sketch, etc. If you fill out all five users, the yearly payment goes up to $2160.

However, if you need more than 10 seats, a plugin for branching, and possibilities to integrate with Zapier, Contentful, etc., you’ll need to choose a custom enterprise plan.

It can be an okayish solution if you’re not growing fast - in terms of people and projects.

How did the users rate Phrase?

Most users are pretty satisfied with Phrase.

However, there are some cons to this tool. Most are focused on restricted feature lists, but there are also some serious considerations about not being able to review the translation or not being able to match strings with similar values.

Maybe the biggest turn-off is that file doesn't respect the structure of a resource string file, so a developer still needs to write scripts for pulling and pushing.

➡︎ Check why Localizely is a fair better alternative to Phrase.

6. SmartCat - Best for E-learning platforms

Smartcat differentiates itself from the competition in its focus on universities and in general educational institutions. Their AI translation supports video translation, significantly reducing translation costs for educational platforms.

Who can use SmartCat?

It can be used by anyone, really. The interface is truly simple and intuitive. They have a big marketplace where you can hire linguistic workers - translators, editors, proofreaders, and in multiple languages.

SmartCat is really effective for big projects that need fast pace turnover, as well as website translation, and internal communications. They have options for software, games, website, and app localizations.

However, the ones that thrive the most with SmartCat are e-learning platforms. They have specialized features and options for this kind of software.

What additional features does SmartCat have?

☞ AI-Based Machine Translation: 8 machine translation engines to help you translate in bulk

☞ AI-Matching Linguist Sourcing: a marketplace where AI will help you to choose language professionals

☞ Website Translator: A plug-and-play solution that works with any CMS

☞ Integrations: WordPress, Git, Figma, Google Docs.

☞ Project Management Automation: AI-driven supplier selection and human monitoring

☞ Enterprise Security: High-level data protection and control

How easy is it to use SmartCat?

We tried only the website translation, and it’s super easy.

During the registration process, they offer you to choose whether you want to translate from a document, website, or via integration.

Once you add the URL, the AI needs around 3-5 minutes to translate everything on the page. While the translation is fast, it needs some edits and proofreading, so this is not a set-and-forget option.

The good thing is that you can just click on the edit button and edit any string before publishing.

How much does SmartCat cost?

If you can finish and deploy any project in less than 45 days, and you don’t need long-term savings for your projects - it costs you zero bucks. Unlimited languages, integrations, marketplace access. But you have to pay contractors hired via marketspace in advance.

If you need your projects to be saved and you need more than 45 days, it’ll cost you $99 per month billed annually, which is around $1188. Users are not counted.

If you’re an agency or accompanied by an enormous translation workload, they offer additional scale with automated aI project management. It sounds curious, but it costs $669 per month, of course, billed annually. That would be $8028 per year.

How did the users rate SmartCat?

This is the tricky one. The majority of reviewers are translators - freelancers or agencies. At the same time, the focus of their website reviews is mostly on businesses that translate educational material for internal needs.

Why s this tricky? Well, according to a few revives because they changed the target focus. It used to be software solely for translation services, but it switched to business doing localization or its own products. So we’re not really sure how accurate the reviews are.

Anyway, the biggest advantage for translators and freelancers is that they have a freemium option, while the biggest turn is not having the right-to-left adjustment for languages.

On the other hand, agency owners are mostly annoyed with often changes in pricing and fees. It’s also notable that the software is struggling with upper/down cases, and it's not dealing well with certain types of files.

➡︎ Check why Localizely is a fair better alternative to SmartCat.

7. Transifex - Best for work centralization when most things are outsourced

If you have multiple large projects and multiple outsourced parties working on them, and you just need to organize all that in one place - Transifex is for you.

Who can use Transifex?

In-house teams that already have a project management tool, and this software is just an add-on for communication with a translation agency. Assigning to multiple freelancers is a harder option.

What additional features does Transifex have?

Transifex has regular features like the rest of the crew. You can organize and manage translation seamlessly.

Additional helpers could be:

☞ Mobile & Native SDKs

☞ API, CLI, and Webhooks

☞ Advanced Translation Memory

☞ Search Strings Across Projects

☞ Online Source Editing

☞ Bulk String Actions

☞ Business Reviews

☞ Multiple Translation Memory Groups

☞ Priority Translation Memory Fillups

How easy is it to use Transifex?

This one is not really in the top three easiest tools, but the sign-up process is standardly light.

Our guess is that with the bigger projects small come all the cluttered cons we read in reviews.

How much does Transifex cost?

Transifex can turn out pretty costly.

Their pricing page shows a starting point of $70 per month for unlimited projects, but it's up to 50 000 words. If you need up to 100 000 words, it's $140, then for another 50k, you add up another 70 bucks, and so on.

So your basic plan can go anywhere from $840 to $7800 for yearly billing. While your advanced plan can go anywhere from $1260 (105 x 12), to $15 540 (1,295 x 12) for 700 000 words.

If your projects are bigger - you’ll have to negotiate for a custom price

How did the users rate Transifex?

While most of the users agree that the overall experience is fine and that Transifex is making their lives easier, they also agree that it is hard to keep up with the price changes.

Lions’ share of cons on Capterra was about the constant need to upgrade your subscription to be able to continue the work.

Also, project and product managers were bothered with cluttered UI and lacked functionality for searching terms, filtering options, and some real project management options (my guess is assigning and reviewing options).

➡︎ Check why Localizely is a fair better alternative to Transifex.

8. POEditor - Best for Freelancers

POEditor is probably one of the most used translation management softwares. Although its name insinuates it’s only a tool for translators and editors, it’s actually much more.

Who can use POEditor?

POEditor is a specialized tool for software and app localization. Most users right now are middle-sized tech-oriented businesses.

What additional features does POEditor have?

As we’re getting to the end of the list you’ll notice that all software have more or less the same features. It’s nothing different with this one.

☞ Simple REST API - automates the localization management.
☞ Smart Translation Memory - reduces your translation work volume.
☞ GitHub, Bitbucket, GitLab, and Azure DevOps integration - optimize the file management.
☞ Real-time translation updates - make collaboration efficient.
☞ Slack and Microsoft Teams integration - for live reporting
☞ Crowdsourced translation projects - to tap into your community's potential
☞ Automatic Translation - a starting point for your localization team
☞ Translation History - helps you check previous translation versions.

How easy is it to use POEditor?

This was the ninth translation management software we had to set up and use, so it wasn't much work. However, users on Captera and G2 weren’t trouble-free with POEditor setup.

You can notice that colors are a shade more aggressive than on the other interfaces.

How much does POEditor cost?

This depends on how wordy your project is. the POEditor won’t count how many team members or projects you have or on how many languages you’re operating.

However, they’ll count a number of strings. For POEditor, a string counts for a separate word or phrase. And they are counting separately sourced and translated strings.

How did the users rate POEditor?

Users are mostly satisfied.

The biggest struggle they have is pricing and word counting. It's becoming expensive really fast.

Some of the users weren’t impressed with UX and complained that the UI wasn't really intuitive and that they had a hard time setting up the project and finding where all the features were.

Other ones reported to have problems with API delaying and sorting and filtering group strings.

➡︎ Check why Localizely is a fair better alternative to POEditor.

9. Smartling - Best for custom needs

Smartling is very present in the translation management niche, yet it’s pretty mysterious.

Our guess is that they are using that marketing approach as a differentiator… we can't get with another excuse, really.

Who can use Smartling?

Anyone brave enough to commit to a yearly subscription without trying out the software or knowing about what it offers. Our shot is - corporations.

What additional features does Smartling have?

This is also mysterious, they have some vague lists of possibilities and features under two categories - Growth and Connect with Smartling.

They contain lists that say:
☞ Drag & Drop Files
☞ API Integrations
☞ Global Delivery Network
☞ CAT Tool
☞ Visual Context
☞ Strings View
☞ Machine Translation Integrations
☞ Reporting and Analytics

So basics, as every other translation management software.

How easy is it to use Smartling?

In reviews, opinions are divided: some users think it’s not an intuitive tool and that it’s really hard to get used to it.

At the same time, others have seen a lot of benefits in workflow improvement once they dedicated their time to set up everything.

There is no free trial, so we weren’t able to check it by ourselves.

How much does Smartling cost?

Price and variations of the prices are not shown on their website.

On Capterra, it’s shown that it starts from $200, but there is no more information on what is influencing the price.

With this information, we can say it could cost you around $2400 per year, but we can't say what this subscription covers.

How did the users rate Smartling?

Most of the users said they were able to reduce manual actions massively and make the project management more comfortable after putting in some initial work.

Anyhow, a significant number of users are bothered about the platform being slow and not having enough customizable access levels for roles.

There are also reports on having difficulties finding old keys and having limited access to other projects.

Some have said they’re doing better marketing and sales than product improvement, but we can't really judge as we weren’t able to try it out.

➡︎ Check why Localizely is a fair better alternative to Smartling (besides being transparent about prices and operations).

What is the best translation management software?

There is an old video from a tv station reporting from the streets where passersby are answering random questions. In that video, one random passerby says: I‘m not able to answer that question because that question is very strange.

I feel the same right now. While all these software from the lists belong to the translation management niche, they are different. They’re built differently, and they’re here to serve different kinds of users.

Which translation management software works for everyone?

We would say that Localizely, Lokalise, and Weglot are mostly here to satisfy nearly every need one can have during the localization process. At the same time, they’re all easy to use, implement, and affordable. That's they’re in the top three.

The rest of the software seems like a variation on the same topic, and it depends on the preferences.

The final verdict: the best translation management system is the one that works for you.

How you’ll choose a translation management system depends entirely on you. It depends on your needs, budget, projects, and how tech savvy your team is… How big is your workload? Are you growing, or you’re doing one-time projects?

Anyhow, we invite you to try Localizely and check by yourself why it ended in the number one spot on this list.

You are working on a new or existing Django project, and you want to make it multi-lingual? Probably you wonder what you need to adapt in your source code in order to achieve that. Also, there might be some features provided by Django that you are not aware of but might help you on that road. In this article, we will go through how to internationalize (i18n) your Django project and how to streamline localization content management.

We will show how to translate the Django app inside python code, templates, and Javascript code. If you don’t need translations in your Javascript code, you can skip those steps.

Create new Django project

If you don’t have an existing Django project, create a new one with the following CLI command:

django-admin startproject django_i18n_example

It generates a minimal set of project files in the given directory.

Now execute a default database migration with python manage.py migrate to make the server session work.

Set up i18n for Django

First, let’s create django_i18n_example/locale folder where we will store PO files.

Then, inside settings.py file we should define:

• a middleware using MIDDLEWARE which will take care of locale resolution. We need to add django.middleware.locale.LocaleMiddleware after SessionMiddleware but before CommonMiddleware
• a directory to our folder with templates within TEMPLATES
• a list of LANGUAGES supported in the project
• where our PO files will be located using LOCALE_PATHS. It should point to the previously created folder

The remaining relevant i18n settings should be configured by default.

Our settings.py file should now contain this:

from os.path import join

MIDDLEWARE = [
    ...
    'django.contrib.sessions.middleware.SessionMiddleware',
    # Order is important here
    'django.middleware.locale.LocaleMiddleware',
    'django.middleware.common.CommonMiddleware',
    ...
]

TEMPLATES = [
    {
        ...
        'DIRS': [
            join(BASE_DIR, 'django_i18n_example', 'templates'),
        ],
        ...
    }
]

LANGUAGES = (
    ('en-us', 'English (US)'),
    ('de', 'Deutsche'),
    ('ar', 'عربى'),
)

# Default locale
LANGUAGE_CODE = 'en-us'

LOCALE_PATHS = [
    join(BASE_DIR, 'django_i18n_example', 'locale'),
]

# Turned on by default
USE_I18N = True

# Turned on by default
USE_L10N = True

# Set by default
STATIC_URL = '/static/'

# Enable our static JS file serving
STATICFILES_DIRS = (
    join(BASE_DIR, 'django_i18n_example', "static"),
)

We also need to update urls.py file. We need to add a predefined URL for locale change, make URLs for our views localized, and also load translations into Javascript (if there is a need for that).

from django.urls import path, include
from django.conf.urls.i18n import i18n_patterns
from django.views.i18n import JavaScriptCatalog
from . import views

urlpatterns = [
    ...
    # Needed for locale change
    path('i18n/', include('django.conf.urls.i18n')),
]
urlpatterns += i18n_patterns(
    # Put translatable views here
    path('', views.index),
    # Needed for translations in Javascript
    path('jsi18n/', JavaScriptCatalog.as_view(), name='javascript-catalog'),
)

Now it remains to install GNU Gettext tool. Gettext is used by Django under the hood for all commands around the PO files that we will discuss below.

Translations in Python code

Django provides many Gettext methods:

• gettext – translates the simplest strings, without placeholders
• ngettext – translates plural variations for the strings
• pgettext – for translations that require additional context, which is the first parameter
• npgettext – for plural translations with the context
• gettext_noop – this actually returns a string as-is, which you could use while structuring a new code section

We will go through the most common once, but the same principle applies to all of them.

Simple translation

Import gettext in your Python code and just call it for the translatable string:

from django.utils.translation import gettext

simpleStringTranslated = gettext('Simple string')

Plural

We should not manually implement plural conditions in Python code, since plurals have different rules among different languages.
Use plural values in the following way:

from django.utils.translation import ngettext

pluralStringTranslated = ngettext(
    'There is %(counter)s object',
    'There are %(counter)s objects',
    objectsCount
  ) % {
    'count': objectsCount
  }

We suggest using named variables whenever possible. It helps you to not depend on variables order since the order might be changed in some translations.

Lazy translation in Django

Sometimes we need to define the string but want to postpone its translation till we really need it. Primarily when defining a string at module load time that is actually not used at that place. In such cases, we should use “_lazy” suffix to gettext methods, for instance gettext_lazy. A common use case is when defining translations for models or model forms.

You can see the full source code for the Django view here.

Translations in Django templates

Django templates allow you the same functions as in Python code, just in different forms of tags.It is required to put the line {% load i18n %} on top of the template in order to use such tags.

translate tag

For the simple translations in the templates, it is enough to wrap the string into translate tag:

{% load i18n %}

{% translate "Simple string" %}

blocktranslate tag

Tag blocktranslate allows us to apply a bit complex translations. Translations that contain plural variations or placeholders.

{% load i18n %}

{% blocktranslate count counter=objectsCount %}
    There is {{ counter }} object
{% plural %}
    There are {{ counter }} objects
{% endblocktranslate %}

{% blocktranslate with amount=price %}
    The price is ${{amount}}.
{% endblocktranslate %}

Django 3.1 still keeps blocktrans tag from older Django versions, but as an alias for blocktranslate.

You can see the full source code for the Django template here.

Translations in Javascript

Sometimes you need to manipulate a web page with custom Javascript code and to show translated messages to the user.

Django tries to mimics Gettext functions inside Javascript as well.Your template needs to include Django’s Javascript catalog that contains translations, and of course, include our JS script that uses those translations:

<!-- Load translations into Javascript -->
<script src="{% url 'javascript-catalog' %}"></script>

<!-- Load our JS script that uses translations -->
{% load static %}
<script src="{% static 'django_i18n_example/index.js' %}"></script>

Now you can translate strings in Javascript code:

const simpleString = gettext('Simple string');

const pluralFormat = ngettext(
    'There is %(count)s object',
    'There are %(count)s objects',
    objectsCount
);
const pluralString = interpolate(pluralFormat, { count: objectsCount }, true);

You can see the full source code for the Javascript file here.

Locale selection

We already included backend logic from Django that changes the locale for the session.So it is left to implement a simple logic inside template code that triggers the locale change:

{% get_current_language_bidi as LANGUAGE_BIDI %}
{% get_current_language as LANGUAGE_CODE %}
<form action="{% url 'set_language' %}" method="post">{% csrf_token %}
    <input name="next" type="hidden" value="/">
    <select name="language" onchange="this.form.submit()">
        {% get_available_languages as LANGUAGES %}
        {% get_language_info_list for LANGUAGES as languages %}
        {% for language in languages %}
            <option value="{{ language.code }}" {%iflanguage.code ==LANGUAGE_CODE%}selected{%endif%}>
                {{ language.name_local }} ({{ language.code }})
            </option>
        {% endfor %}
    </select>
</form>

Create translation files

Now that we added translatable strings to our code, we can use a Django command to extract those strings into PO files.Following CLI command extracts strings for the English(US) language:

# Extracts strings from python code and templates
django-admin makemessages -l en-us

# Extracts strings from JS scripts
django-admin makemessages -d djangojs -l en-us

It creates a PO file locale/en-us/LC_MESSAGES/django.po with strings from Python code and templates and a PO file locale/en-us/LC_MESSAGES/djangojs.po with strings from JS scripts.

The final step is to translate them to all remaining languages we support in the project.

Manage Django translations

We have extracted translations into the PO file, and now need to localize them into all remaining locales.Localization can be very cumbersome and error-prone work if we do it manually. We will show how to streamline the localization process using the Localizely platform:

1. Upload PO file to Localizely
2. Translate strings – by your team members, using Machine Translation, professional translators, or some other way
3. Download PO files from Localizely

Upload and download you can do in a few ways: manually using Localizely web console, or automate the process via API or Github integration.

When we place translated PO files into Django project, it is left to compile them into MO files that Django loads:

django-admin compilemessages

Now we have a project that is localized into all needed languages.

We can run the Django project with the CLI command python manage.py runserver and access the app via http://localhost:8000 in a browser.

Conclusion

In this Django i18n Example, we configured a simple multilingual Django application – we translated strings inside Python code, inside templates, and also inside Javascript code.

The implementation of this Django i18n tutorial can be found in the GitHub project.

If you have localized your code in certain frameworks you probably came across the term “ICU message” for formatting texts. In this article, we will explain why it exists and how to use it.

Why do we need ICU message format?

Software localization is more than managing plain text translations. Sometimes we need to inject some dynamic values into translations, format the values depending on locale grammar, switch parts of translations depending on the input, etc.

If we don’t have a common, standardized way to do that, we end up with different solutions among libraries. ICU message is a flexible yet powerful syntax to express all nuances of grammar for each language.

Where can I use ICU message?

These are some popular libraries that support ICU message formatting:

• Java

• C & C++

• Python

• Dart & Flutter

• PHP & Symfony

• Javascript:

  • FormatJS with react-intl for React
  • Globalize
  • Lingui.js
  • MessageFormat
  • ngx-translate plugin plugin for Angular

Support for ICU messages differs a bit among libraries, but they have the same foundation.

For exact limitations for each of these libraries it is best to check their official documentation.

How to use ICU message format?

Here we will list common usages for ICU message formats. You can use an online ICU editor to explore the options on your own.

Plain string

Just a plain text.

Hello world!

Placeholder

A text with a placeholder that will be replaced with a variable. Placeholders are wrapped into curly braces.

Welcome {firstName}

Plural

A text that contains plural content.

You have {count, plural,
  one{1 photo}
  other{{count} photos}
}

In given example count represents a number variable, but you can name it as you want. Some libraries support # as an abbreviated placeholder for the count.

Available plural forms are: zero, one, two, many and other (required). Not all languages support all plural forms. For instance, English and German support one and other only, but Russian supports one, few, many and other. Check out plural forms per language for more info.

If you want to customize the format for a certain number, you can use additional =<number> forms. For instance, if you want to print You don't have any photo instead of You have 0 photos you would define it with =0 form. Some libraries allow usage of zero form for all languages for such cases.

You have {count, plural,
  =0 {no photos}
  one{1 photo}
  other{{count} photos}
}

Select

Select statements take the form that matches passed variable or defaults to other form, which is required.

Today is {gender, select, 
  male {his} 
  female {her} 
  other {their}
} birthday

If we pass gender variable with the value male to the example, it will print Today is his birthday.

Number formatting

The base for formatting the numbers is to define them in {variable, number, format} form, where variable is the variable we pass, and the format is optional and can have one of a few values. Be aware that not all libraries support all these formats.

The tank is {progress, number, percent} full

which prints The tank is 80% full.

Numbers are printed in a format for the selected locale. For instance:

• 1 234,56 in France
• 1.234,56 in Germany
• 1,234.56 in the United States

Date & Time

The base for formatting the dates and times is to define them in {variable, date|time, format} form. The variable is the variable we pass, and the format is optional and can be short, medium, long, full or some custom format depending on the library used.

Today is: {now, date, long}

which prints Today is: January 10, 2021.

Nested structures

Any of the elements above can be combined into the same ICU message, and in addition to that plural and select elements can be nested, containing each other.

{likesCount, plural,
  one{{sex, select,
        male{He likes}
        female{She likes}
        other{They like}
      } your photo}
  other{You have {likesCount} likes}
}

The structure can get complex and we suggest using ICU message editor that supports syntax highlighting and validation.

Summary

We can see that some libraries do not follow all ICU message features, although have the same foundation. But a good thing is that it goes in a good direction to standardize such formats for text localization.

There is a lot of custom localization (l10n) and internationalization (i18n) attempts for Flutter, that might look ok at first sight. But we suggest you stick to the official Intl library. It has full support for many common features, like placeholders, plural, gender, etc…

In our article Flutter localization: step-by-step we explained how you can implement localization from scratch with the Intl library. Since it requires few extra steps to do it on your own, in this article we will share with you our IDE plugins to get rid of writing any boilerplate code by yourself.

Flutter i18n plugins

In order to make Flutter internationalization as simple as possible we published the following IDE plugins:

• Flutter Intl extension for Visual Studio Code
• Flutter Intl plugin for Android Studio & IntelliJ plugin

Full usage documentation is available on given links for each plugin.

These plugins help developers to just add key-value pairs to ARB file in their project, and immediately use those keys in their Dart code, with auto-complete support. No need to write any boilerplate code for localization.

Team members on the same project sometimes use different IDEs. The plugins are configured inside the project’s pubspec.yaml file. As a result, you can use it from all popular IDEs for Flutter at the same time.