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:
Any unequal styles that refer to left
and right
keywords will need to be reversed for RTL languages.
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
.
There are three techniques to achieve this:
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.
[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.
Paragraph
base style, custom style or go to the Styles
tab of a Paragraph
element+
button next to the root-level Default
labelPrefix
[dir="ltr"]
as your prefix, then click Add
[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.
This also has full browser support, but requires original values to be unset.
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.
Paragraph
base style, custom style or go to the Styles
tab of a Paragraph
elementp
element if no child/pseudo/combinator selector is specified.+
button next to the root-level Default
labelPrefix
[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.
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.
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.
text-align
dropdown, when the property is enabled in style builder.Border width
, Border style
and Border color
sub-properties in style builder.If this content did not answer your questions, try searching or contacting our support team for further assistance.
Wed Mar 26 2025 01:08:22 GMT+0000 (Coordinated Universal Time)