Tips & Tricks - Languages written from right to left

This article explains how to set a portal to use languages that are written from right to left.

If you use languages with different writing directions in a portal, the titles of elements in applications should be arranged above the elements. You could of course just use two different layouts - one for each writing direction. It is also possible to adjust Velocity files with custom, language-dependent CSS styles. These velocity files are located in the portal directory "/internal/system/vm/custom". The files are then included at a certain part of the page each time the page is loaded.

CSS rules

In CSS there is the text rule "rtl" (right to left), which can be set for the writing direction from right to left.

            direction: rtl;
        

This rule can be assigned to the universal selector.

            * {
direction:rtl;
}

        

The rule can also be used with a pseudo class for the language.

            *:lang(he) {
direction:rtl;
}

        

You can find detailed information here.

Implementation

Open the portal layout in the "Design" module.

On the left you will find the Layout section. In this example, a rule is applied to the top element - the surrounding container - in the structure. To begin with, select the Main Container in the structure.

Switch to the styles in the right-hand area and click on "Show CSS properties in grouped table" at the top of the column.

Change the value of the direction property of the surrounding container to "rtl". Publish the layout. Refresh your portal in the browser.

The writing direction has now been changed. The cursor will also begin at the right in edit elements.