Right-to-left (RTL) languages - styling considerations

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.