Right-to-Left (RTL) Language Support in AEM

Generally the websites are read from left to right and default language set by any web browser is in English which is left-to-right. At times we get the requirement to support RTL (right-to-left) languages like Arabic, Hebrew, etc. Thus we introduce this RTL support in our code base.

Introduction to RTL

RTL support is not about translating text to Arabic, but rather developing web pages and websites that do not break or become unreadable when used with right-to-left languages such as Arabic or Hebrew when we select language in AEM.

How we implemented RTL support in AEM

There are 3 steps followed to implement RTL implementation in AEM.

1. Adding the RTL CSS Plugin in Node Package Manager
2. Webpack Configuration changes in the Brands
3. Generating clientlib-all-rtl folder manually for RTL

STEP 1: Adding the RTL CSS Plugin in Package Manager

We have added the “rtlcss-webpack-plugin“ and “filemanager-webpack-plugin“ in package.json which is an open source NPM package used for converting the original CSS and generating the RTL CSS files.

Installation process of NPM packages:

npm install rtlcss-webpack-plugin

npm install filemanager-webpack-plugin — save-dev

STEP 2: Webpack Configuration changes in the Brands

As a next step, we have added the configuration in ‘webpack.config.js’ for generating the RTL.css file. Then referring to the path we placed the generated file into “clientlib-all-rtl” Reference screenshots can be found below.

Add the plugin to webpack configuration:

import RtlCssPlugin from ‘rtlcss-webpack-plugin’;
FileManagerPlugin = require(‘filemanager-webpack-plugin’);

Example:

plugins: [
    new RtlCssPlugin(
        {
            filename: '[name].bundle-rtl.css'
        }
    ),
    new FileManagerPlugin({
        events: {
            onStart: {
            },
            onEnd: {
                copy: [
                    {
                        source: `${siteConfig.outputPath}/site.bundle.js`,
                        destination: `${siteConfig.rtlPath}/site.bundle.js`,
                    }
                ],
                move: [
                    {
                        source: `${siteConfig.outputPath}/site.bundle-rtl.css`,
                        destination: `${siteConfig.rtlPath}/site.bundle-rtl.css`,
                    }
                ],
            },
        },
    }),
],

Note: This will create the normal site.bundle.css and an additional site.bundle.rtl.css

STEP 3: Generated clientlib-all-rtl folder manually for RTL

Once we have created the “clientlib-all-rtl’’ folder manually for all the RTL language, we have the files content.xml, css.txt, and js.txt for referring to the RTL CSS.

Within the content.xml file we need to refer to categories=”[exampleproject.all.rtl]”. Make sure to add the `dir` HTML tag in the basepage.html as highlighted.

This `dir` comes from the respective page component sling model (here we have used the base page as a sling model). Please refer to the below code.

public String getDir() {

    Locale locale = currentPage.getLanguage();
    String language = locale.getLanguage();
    if ("iw".equals(language)||"ar".equals(language)||"fa".equals(language)|| "ur".equals(language)) {
        return LANG_DIR_RTL;
    } else {
        return LANG_DIR_LTR;
    }
}

In your code that returns the active clientlibs for a page, add logic so that AEM includes the RTL clientlib when a RTL language is assigned.

Code Snippet:

String langDir = getDir();
if (langDir.equals(“rtl”)) {
    int categoryItem = 0;
    String category;
    while (categories.size() > categoryItem) {
        category = categories.get(categoryItem) + "." + “rtl”;
        categories.remove(categoryItem);
        categories.add(categoryItem, category);
        categoryItem++;
    }
}
clientLibCategories = categories.toArray(new String[0]);

After all of the above changes, we need to execute ‘npm install’ and then run the build for the RTL changes in the Browser. Next time you load a page of your website in the default English language, you should see dir=”ltr” in the HTML indicating the left-to-right direction.

Now when we select the ‘Arabic’ language in the Language masters, we can see the page content right-to-left aligned, with dir=”rtl” in the HTML. A sample screenshot with changes reflected as below.