---
title: "Right-to-left (RTL) languages - styling considerations"
date: "2020-06-10T11:52:00+00:00"
summary: "Optimize your website for right-to-left languages with our comprehensive guide. Learn essential styling techniques, including scoping methods and logical CSS properties, to create seamless multilingual user experiences."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/right-left-rtl-languages-styling-considerations"
id: "5aa8a4a4-abf1-463d-af95-5c6fdfe97708"
---

Table of contents will be added

Overview
--------

There are a number of languages that are read from right-to-left (RTL), rather than left-to-right (LTR). When a website is viewed in one of these languages, content is displayed in a mirrored layout.

Some styles need to be optimised for RTL. These are all directional-based styles:

*   Text-align
*   Padding
*   Margin
*   Border
*   Position
*   Float

Any unequal styles that refer to `left` and `right` keywords will need to be reversed for RTL languages.

### Example

`padding-left: 10px` would become `padding-right: 10px`.

**If the** `padding-left` **and** `padding-right` **values are equal, no action is required.**

This methodology can be applied to all other directional-based styles, not just `padding`.

How do I make my content optimised for RTL languages?
-----------------------------------------------------

There are three techniques to achieve this:

1.  Scope directional styles for LTR and RTL
2.  Scope directional style overrides for RTL only
3.  Use logical CSS properties

### 1\. Scope directional styles for LTR and RTL

For full browser support, this is the preferred solution, as it will work in Internet Explorer 11 and below and doesn't require style overrides.

#### CSS example for a paragraph element

    [dir="ltr"] p {
        padding-left: 10px 
    }
    
    [dir="rtl"] p {
        padding-right: 10px
    }

This uses the HTML attribute `dir` to determine which styles get applied for a specific language. This attribute is automatically added to the html element when using the Drupal core `Language` module.

#### How to apply to a Site Studio base style, custom style or element style

1.  For this example, create a `Paragraph` base style, custom style or go to the `Styles` tab of a `Paragraph` element
2.  Open the style tree
3.  Click the `+` button next to the root-level `Default` label
4.  Select `Prefix`
5.  Add `[dir="ltr"]` as your prefix, then click `Add`
6.  Repeat steps 2-4, adding a prefix of `[dir="rtl"]`

You should apply any directional styles directly to these prefix selectors, unless the directional style needs to be applied to a child, pseudo or combinator selector. In this case, add the relevant selector to your style tree first. 

### 2\. Scope directional style overrides for RTL only

This also has full browser support, but requires original values to be unset.

#### CSS example for a paragraph element

    p {    
        padding-left: 10px
    }
    
    [dir="rtl"] p {
        padding-left: unset
        padding-right: 10px
    }

The `unset` value is critical here so that inheritance isn't broken, which would happen if `0` was used to reset the value.

#### How to apply to a Site Studio base style, custom style or element style

1.  For this example, create a `Paragraph` base style, custom style or go to the `Styles` tab of a `Paragraph` element
2.  Add styles as you would usually do. These would apply directly to the `p` element if no child/pseudo/combinator selector is specified.
3.  Open the style tree
4.  Click the `+` button next to the root-level `Default` label
5.  Select `Prefix`
6.  Add `[dir="rtl"]` as your prefix, then click `Add`

Apply any RTL-specific directional styles directly to this prefix selector, unless the directional style needs to be applied to a child, pseudo or combinator selector. In this case, add the relevant selector to your style tree first. 

### 3\. Use logical CSS properties

This is the most efficient and easiest to maintain solution, but is **not supported in Internet Explorer 11 and below**. If you need to support this browser, do not use this technique.

Logical CSS properties make directional styles easier to maintain, because `left` and `right` keywords are replaced with `start` and `end` (or `inline-start` and `inline-end`) - these take into account the direction and dynamically flip without intervention.

#### Currently supported properties

Legacy CSS property/value

Logical property/value

`text-align: left`

`text-align: start`

`text-align: right`

`text-align: end`

`padding-left`

`padding-inline-start`

`padding-right`

`padding-inline-end`

`margin-left`

`margin-inline-start`

`margin-right`

`margin-inline-end`

`border-left`

`border-inline-start`

`border-right`

`border-inline-end`

For `padding`, `margin` and `border` there are also `block-start` and `block-end` keywords, as `top` and `bottom` replacements.

#### How to apply to a Site Studio base style, custom style or element style

*   **Text-align:** the new options have been added to the `text-align` dropdown, when the property is enabled in style builder.
*   **Padding and margin:** the new options can be enabled through the property group ellipsis menu in style builder.
*   **Border:** the new options can be enabled through the property group ellipsis menu for the `Border width`, `Border style` and `Border color` sub-properties in style builder.

Final thoughts
--------------

*   If IE11 and below doesn't need to be supported, use the new logical properties.
*   For properties that have no logical equivalent (float and position), either avoid using those properties entirely, or use the first technique above to scope both LTR and RTL styles where needed.