DEV Community: Localizely

Localization Statistics 2023

Zoran Luledzija — Mon, 25 Dec 2023 11:59:48 +0000

Localizely continued its annual tradition of researching the software localization industry, conducting another thorough study in 2023. This research was specifically designed to track the evolving trends and methodologies within software localization. The collected data from this research has been carefully analyzed and compiled into the Localization Statistics 2023 report.

The study gathered responses from 2,516 individuals engaged in a diverse range of professions, hailing from different corners of the globe.

Here is a brief overview of the survey results.

Number of target languages

10 most popular target languages

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

Translating for regional languages (e.g. en-US)

Translation tools

Work with a language service provider

Machine Translation usage

Is localization prioritized enough in your company?

What do you aim to improve in 2024 with regard to localization?

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

For additional information, please refer to the original publication of the article.

Localization state survey 2022

Zoran Luledzija — Fri, 27 Jan 2023 16:21:05 +0000

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 survey was conducted on 2,024 respondents of various occupations from all over the world.

Below you can find the results of the survey.

Number of target languages in projects

10 most popular target languages

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

Translating for regional languages (e.g. en-US)

Translation tools

Work with a language service provider

Machine Translation usage

Is localization prioritized enough in your company?

What do you aim to improve in 2023 with regard to localization?

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

More information can be found in the original published article.

Software localization: full guide

Bojana Vojnović — Thu, 01 Sep 2022 11:09:32 +0000

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 non-tech 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 localization example

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 localization example

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.

To learn more check the original post.

Next.js internationalization (i18n) tutorial

Zoran Luledzija — Wed, 30 Mar 2022 14:34:17 +0000

Next.js is an open-source framework created by Vercel (formerly ZEIT). It is built on top of React and provides an out-of-the-box solution for server-side rendering (SSR) of React components. Furthermore, it supports static site generation (SSG), which can help us to build superfast and user-friendly websites in no time. Although a relatively young framework, it has a good foundation for internationalization which complements well with existing i18n libraries. In the following chapters, we will explain how to set up internationalization in your Next.js app.

Create a new Next.js project

First, let's create a new Next.js project with the create-next-app CLI tool.

npx create-next-app nextjs-i18n-example

Add React Intl dependency

As we mentioned earlier, the Next.js works well with existing i18n libraries (react-intl, lingui, next-intl, and similar). In this tutorial, we will use the 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. In this tutorial, we will use sub-path routing as it is less complex and more common for average websites. For that, let's update the next.config.js file with the i18n config.

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

module.exports = nextConfig;

Note: The internationalized routing is available since Next.js 10.

Create localization files

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

nextjs-i18n-example
|-- lang
|   |-- en.json
|   |-- fr.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 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 🚀"
}

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.

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

import en from "../lang/en.json";
import fr from "../lang/fr.json";

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

const messages = {
  en,
  fr,
};

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

  return (
    <IntlProvider locale={locale} messages={messages[locale]}>
      <Component {...pageProps} />
    </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.

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(props) {
  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/fr" hrefLang="fr" />
      </Head>

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

      <main 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.

More details and examples you can find in the original post.

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

Unicode

Zoran Luledzija — Wed, 22 Dec 2021 16:37:26 +0000

Unicode is an international character encoding standard. It provides a unique number (code point) for every character, no matter what the platform, program, or language is. Furthermore, it represents the most commonly used encoding today.

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. 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.

Unicode

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

Final thoughts

Thanks to Unicode, today's software runs on a variety of languages and platforms. That was hard to imagine a few decades ago. In other words, today's software localization would be impossible without such an encoding standard.

More details regarding Unicode you can find in the original post.

React internationalization with react-intl

Zoran Luledzija — Wed, 21 Apr 2021 14:34:40 +0000

Struggling with React internationalization? Not sure which library to pick? Need to support a variety of formatting options? Many questions arise when we need to choose the best solution for our project. In this post, you will find how to set up internationalization in your React app with one of the most popular libraries out there, the react-intl.

The react-intl is a part of Format.JS, a set of JavaScript libraries for internationalization and formatting. It is a well-documented and maintained library. It works well in all major browsers. For older browsers, there are polyfills. Plenty of formatting options and support for the ICU Message syntax makes it very handy.

Let's start.

Create new React project

First things first, let’s create a new React app with Create React App.

npx create-react-app react-intl-example

Add React Intl dependency

To use the react-intl library in the project, you need to add it as a dependency.

cd react-intl-example
npm i --save 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 Spanish (Mexico).

Below, you can see how the project structure should look after adding mentioned files.

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

As we are going to use localization messages later, let’s populate added files with some content.

ar.json:

{
  "message.simple": "رسالة بسيطة."
}

en.json:

{
  "message.simple": "A simple message."
}

es-MX.json:

{
  "message.simple": "Un mensaje sencillo."
}

Wrap your app with the IntlProvider

Finally, wrap the top-level app component with the IntlProvider from the react-intl library and pass the appropriate messages (check the LocalizationWrapper component).

App.js:

import React, { useState, useEffect } from "react";
import { useIntl, IntlProvider, FormattedMessage } 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 locale={locale} direction={getDirection(locale)} onLocaleChange={(locale) => setLocale(locale)} />
    </IntlProvider>
  ) : null;
}
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}>
        <h3>Declarative examples</h3>
        <FormattedMessage id="message.simple" />

        <h3>Imperative examples</h3>
        {intl.formatMessage({ id: "message.simple" })}
      </div>
    </div>
  );
}

Congratulations, you have successfully set up internationalization in your React app!

More details and examples you can find in the original post.

All code samples are available on the GitHub repo.

We hope you found it helpful.

Django Translation tutorial with an example

Aleksa Krstic — Tue, 13 Apr 2021 11:26:19 +0000

We noticed there are some unanswered questions on Django internationalization (i18n) topic. So we created a working example with Django Translation usage.

Example explains

Django Translation setup
i18n inside python code
i18n inside Django templates
i18n inside Javascript code
How to easily manage translations

Github repo

https://github.com/localizely/django_i18n_example

Full article on Django internationalization

https://localizely.com/blog/django-i18n-tutorial/

Flutter localization

Aleksa Krstic — Tue, 03 Nov 2020 22:54:01 +0000

Flutter is a cross-platform technology that promises a lot. However, during its early days it didn't have practical localization support and many unofficial solutions were created. In this article we are going through streamlined Flutter localization that relies on official Intl package and ARB files.

The easiest way to localize your Flutter app is to use Flutter Intl extension for VS Code or Android Studio. It does a lot of work for you, and brings you some functionalities, such as autocomplete suggestions for the string keys in Dart code, extraction of strings from Dart code to ARB files, etc.

1. Initialize plugin for your project

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

2. Add dependency

Add following dependency to pubspec.yaml file:

dependencies:
    flutter_localizations:
        sdk: flutter

3. Set `localizationsDelegates` and `supportedLocales` for your `MaterialApp`

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'),
        );
    }
}

4. Add string keys to main ARB file

Your main ARB file by default is lib/l10n/intl_en.arb

{
    "title": "Hello world!"
}

Here is more info about ARB file syntax.

5. Reference the keys in Dart code

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

That's all 🙂

Translation management for Flutter apps

As you start adding more locales to your app, the translation management becomes complicated. Check out the original article Flutter Localization from Localizely for more info on simplified translation management.

If you need to manage translations over-the-air, without building and releasing a new app version for simple text changes, take a look at Flutter over-the-air translation updates.

DEV Community: Localizely

Localization Statistics 2023

Number of target languages

10 most popular target languages

Translating for regional languages (e.g. en-US)

Translation tools

Work with a language service provider

Machine Translation usage

Is localization prioritized enough in your company?

What do you aim to improve in 2024 with regard to localization?

Localization state survey 2022

Number of target languages in projects

10 most popular target languages

Translating for regional languages (e.g. en-US)

Translation tools

Work with a language service provider

Machine Translation usage

Is localization prioritized enough in your company?

What do you aim to improve in 2023 with regard to localization?

Software localization: full guide

Why is software localization important?

What exactly is a software localization

Software localization examples

How's software localization done

Next.js internationalization (i18n) tutorial

Create a new Next.js project

Add React Intl dependency

Add config for internationalized routing

Create localization files

Configure react-intl in Next.js project

Adapt pages for i18n

Unicode

ASCII

Unicode

Unicode Transformation Formats

Final thoughts

React internationalization with react-intl

Create new React project

Add React Intl dependency

Create localization files

Wrap your app with the IntlProvider

Django Translation tutorial with an example

Example explains

Github repo

Full article on Django internationalization

Flutter localization

1. Initialize plugin for your project

2. Add dependency

3. Set localizationsDelegates and supportedLocales for your MaterialApp

4. Add string keys to main ARB file

5. Reference the keys in Dart code

Translation management for Flutter apps

3. Set `localizationsDelegates` and `supportedLocales` for your `MaterialApp`