Configuring TYPO3 for Arabic languages

Introduction

The use of multiple languages in the backend and frontend of a TYPO3 website has long been part of the standard repertoire of the CMS. These languages can usually be set up and configured quite quickly.

It is a little more special when using Arabic languages, as not only are completely different characters used here, but the text direction is also reversed.

With the following settings, however, you can also use Arabic languages in the frontend and backend.

Backend

1. download language

Add and download "Arabic" in the language module. However, the backend is only partially translated into Arabic. Some menu items or names of form elements have not yet been translated. The English standard name is then displayed here.

2. installtool

Activate the parameter [SYS][UTF8filesystem] in the Installtool.

Alternatively, you can of course also set this parameter directly in LocalConfiguration.php.

3. backend in Arabic

If required, a backend user can now switch to Arabic in their account settings.

If extensions have Arabic translations, elements of these extensions (e.g. felogin) are then also displayed correctly in the frontend.

4. configure text editor (RTE, CKEditor)

Patrick Crausaz has published on Github code which can be used to configure corresponding buttons in the CKEditor to switch the writing direction.

Front end

1. create language

Switch to the List web module, create language at root level.

2. TypoScript

Make language settings in the TypoScript setup. The number in the condition is the ID of the language. In this example, Arabic has the ID 2.

[globalVar = GP:L = 2]
config {
    sys_language_uid = 2
    language = ar
    locale_all = ar_AE.utf8
    htmlTag_langKey = ar
    htmlTag_dir = rtl
}
[global]

3. text direction right-to-left (RTL)

It is necessary to set the direction for all texts to right-to-left. This is achieved with the HTML attribute dir="RTL", where RTL means Right-To-Left, and has nothing to do with the intellectual television channel for the gifted.

In TYPO3, the integrated text editor HTML-Area offers the option of switching between alignments. There are two buttons to determine the text direction of a paragraph. However, these buttons are not visible by default and can be activated in two ways:

Quick method:
Setting the demo mode for the HTMLArea: this can be set in the extension options in the extension manager.

Recommended method:
Add the following line PageTSconfig:

RTE.default.showButtons := addToList(righttoleft,lefttoright)

In addition, the dir attribute should also be set for the <html> tag. Use the following TypoScript setup line for this:

config.htmlTag_dir = rtl

This should then of course be used within the condition for the language, as already seen in point 2.

4. CSS

Because the text now runs in a different direction, it may be necessary to make adjustments to the CSS. Depending on the language, you can, for example, include a customized CSS file in which the standard instructions are overwritten or additional instructions are added:

[globalVar = GP:L = 2]
page.includeCss.100 = EXT:myext/Resources/Public/Css/arabic-styles.css
[global]

5. realUrl

As soon as you have created an Arabic translation for pages in the backend and also translated the page title to Arabic, URLs with Arabic characters are also displayed, e.g. domain.de/اليسار.html
However, this does not work, calling this link leads to an error.

When using RealUrl >= 2.1.0, you can define a list of language IDs in the pagePath section of realurl_conf.php, which are then no longer used for translating the URLs. The page titles of the default language are then simply used here. The languageExceptionUids parameter can be used to pass a comma-separated list of language IDs (or of course just one ID). More information on this can be found in the RealUrl documentation: github.com/dmitryd/typo3-realurl/wiki/Configuration-reference

The section in realurl_conf.php could then look like this, for example, if you want to exclude the language with IDs 2 and 3:

$GLOBALS['TYPO3_CONF_VARS']['EXTCONF']['realurl'][$domain1] = array(
    'pagePath' => array(
        'spaceCharacter' => '-',
        'expireDays' => '3',
        'rootpage_id' => '1',
        'languageExceptionUids' => '2,3',
    ),

6. further adjustments in the frontend

Depending on the layout of the website, further adjustments may be necessary. If, for example, a vertical navigation on the left-hand side is used in the standard language, which perhaps also displays sub-pages via a flyout menu, it may be necessary to move this navigation to the right-hand side for the Arabic language and also to change the direction of the flyout. However, these are adjustments that have to be made using CSS. As already mentioned under point 4, you could simply integrate adapted CSS files for Arabic. In the same way, i.e. via the condition, you could also integrate adapted JavaScript files if required.

7. translate texts from extensions

Not every extension comes with an Arabic language file by default. But you can easily add your own translations using TypoScript.

As an example, the text of the "More" button of the extension ws_flexslider is translated here, both for Arabic and for German:

plugin.tx_wsflexslider._LOCAL_LANG {
	ar.more = أكثر
	en.more = Learn more
}

The names of the elements can be found in the language files of an extension. These so-called labels are stored in an XML or XLF file. In our example with the extension ws_flexslider, this would be the file

typo3conf/ext/ws_flexslider/Resources/Private/Language/locallang.xml

Updated: 17.07.2024