i18n is the abbreviation for internationalization. Magento adds i18n support out of the box, thus adapting to various languages and regions without application changes. Within app/functions.php, there is a __() translation function, which is defined as follows:

function __()
{
    $argc = func_get_args();

    $text = array_shift($argc);
    if (!empty($argc) && is_array($argc[0])) {
        $argc = $argc[0];
    }

    return new MagentoFrameworkPhrase($text, $argc);
}

This translation function accepts a variable number of arguments and passes them to a constructor of the MagentoFrameworkPhrase class and returns its instance. The Phrase class has the __toString method, which then returns the translated string.

Here are a few examples of how we can use the __() function:

Strings passed through the translation function are expected to be found under the local CSV files, such as app/code/{vendorName}/{moduleName}/i18n/{localeCode}.csv. Let's imagine for a moment that we have two different store views defined in the Magento admin area under Stores | Settings | All Stores. One store has Store | Settings | Configuration | General | Locale Options | Locale set to English (United Kingdom) and the other one to German (Germany). The local code for English (United Kingdom) is en_GB, and for German (Germany), it is de_DE.

For the de_DE locale, we will add translation entries in the app/code/Foggyline/Office/i18n/de_DE.csv file, as follows:

"Translate me","de_DE Translate me"
"Var1 %1, Var2 %2, Var %3","de_DE Var1 %1, Var2 %2, Var %3"
"Copyright %1 <a href=""%2"">Magento</a>","de_DE Copyright %1 <a href=""%2"">Magento</a>"

For the en_GB locale, we will add translation entries in the app/code/Foggyline/Office/i18n/en_GB.csv file, as follows:

"Translate me","en_GB Translate me"
"Var1 %1, Var2 %2, Var %3", "en_GB Var1 %1, Var2 %2, Var %3"
"Copyright %1 <a href=""%2"">Magento</a>","en_GB Copyright %1 <a href=""%2"">Magento</a>"

Looking at the two CSV files, a pattern emerges. We can see that the CSV files function in the following way:

Magento supports several commands related to its bin/magento console tool:

i18n
    i18n:collect-phrases   Discovers phrases in the codebase
    i18n:pack              Saves language package
    i18n:uninstall         Uninstalls language packages

If we execute a console command as follows, Magento will recursively look for translatable expressions within PHP, PHTML, or XML files that have phrases to translate:

php bin/magento i18n:collect-phrases -o "/Users/branko/www/magento2/app/code/Foggyline/Office/i18n/en_GB.csv" /Users/branko/www/magento2/app/code/Foggyline/Office

The output of the preceding command will basically overwrite the app/code/Foggyline/Office/i18n/en_GB.csv file, which has all the Foggyline/Office module translatable phrases. This is a nice way of aggregating all the translatable phrases into appropriate locale files, such as en_GB.csv in this case.

The translation CSV files can also be placed under the individual theme. For example, let's imagine a situation where we add content to app/design/frontend/Magento/blank/i18n/en_GB.csv, as follows:

"Translate me","Theme_en_GB Translate me"
"Var1 %1, Var2 %2, Var %3", "Theme_en_GB Var1 %1, Var2 %2, Var %3"
"Copyright %1 <a href=""%2"">Magento</a>","Theme_en_GB Copyright %1 <a href=""%2"">Magento</a>"

Now, a Translate me string output of the storefront for the en_GB locale would resolve to Theme_en_GB Translate me and not to the en_GB Translate me string.

Along with CSV translation files, Magento also supports a feature called inline translation. We can activate the inline translation in the Magento admin area by navigating to Store | Settings | Configuration | Advanced | Developer | Translate Inline. This feature can be turned on separately for admin and storefront, as shown in the following screenshot:

As shown in the preceding screenshot, when a feature is activated, red dotted borders appear around the HTML elements. Hovering over an individual element shows a little book icon near the individual element at the bottom left corner. Clicking on the book icon opens a popup, as shown in the following screenshot:

It is important to note that these red dotted borders and the book icon will only appear for strings that we passed through the __() translate function.

Here, we can see various pieces of information about the string, such as the Shown, Translated, and Original string. There is also an input field called Custom, where we can add a new translation. Inline translation strings are stored in the translation table in the database.