Right to left styling for the Web

An understanding of how to handle right to left text in HTML

5 min readSep 26, 2022

Developing and authoring a right-to-left(RTL) website is an unconventional task, even for an experienced frontend developer. With growing market demand it has become essential for developers to understand what it takes to develop RTL-compatible websites

Why RTL?

There are a few languages in the world (Arabic, Hebrew, etc.) that read their texts right-to-left rather than left-to-right. Adding RTL support for your website is simple and can greatly increase its market. In order to cater to RTL languages, developers must adapt their development process in particular ways.

How to support RTL

In Web applications supporting RTL languages, everything is reversed or flipped, including text, scroll bars, progress indicators, buttons etc. Let’s look at some development guidelines to support RTL.

Add dir and lang to HTML

Add dir="rtl" on the <html> element. The browser interprets the dir tag and automatically flips and renders the content of the website.
Add an appropriate lang attribute, like lang="ar", on the <html> element. The lang global attribute helps define the language of an element: the language that non-editable elements are written in, or the language that the editable elements should be written in by the user

Adjust CSS to support RTL rendering

Having learned that the browser interprets the direction tag, let’s see how it interprets CSS. Let’s take an example of a card which contains an image and text adjacent to each other.

We can see that the card on the right has text right to left rendered, but the margin and the image are not interpreted right-to-left. In order to support RTL, our CSS needs to be modified.

Modifying directional property values
Floating the image to the right and applying margin to its left will fix the rendering.

.media img {
    float: right;
    margin-left: 20px;
}

*Using dir* attribute to override CSS for both RTL and LTR applications

This approach is straightforward, and easy to understand but also increases the amount of CSS we need to write. Let’s take a look at alternate approaches…

Use logical CSS properties
It is possible to automatically align our content right-to-left, without the hassle of writing additional CSS. Use ‘logical properties’ like ‘start’ and ‘end’, rather than ‘left’ or ‘right’.

Using logical properties by default makes it easier to localise content or include text with a different direction.

Modify our code to remove float on the image and add margin-right via margin-inline-end.

.media {
    display: flex;
}.media img {
    margin-inline-end: 20px;
}

Create multiple stylesheets
Sometimes, logical properties do not yield the desired results — in such cases, we must rely on overriding property values with the dir attribute. This will bulk up the CSS and we might want to optimise it by moving all right-to-left CSS to a separate file.

.wrapper {
    position: absolute;
    left: 0;
}.media {
  float: left;
  margin-left: 20px;
}

Create an rtl.css file that will include all RTL overrides. This file can be selectively loaded based on the locale (language).

[dir="rtl"].wrapper {
    right: 0;
    left: initial;
}[dir="rtl"].media {
    float: right;
    margin-right: 20px;
}

For large projects, it is advisable to modularise and compile to a single rtl.output.css file.

Automate RTL styles
Compiling two separate CSS files, one for traditional LTR languages and one for RTL, is another way to optimise. Tools like RTLCSS helps us to create an RTL counterpart for our CSS automatically.

output.css
p {
    padding-left: 1em;
    font-size: 1rem;
}

output.rtl.css:
p {
    padding-right: 1em;
    font-size: 1rem;
}

RTLCSS comes with full support for all direction-sensitive CSS properties. Further, it provides processing directives (ignore, prepend, replace, remove, rename etc.) through CSS comments, so it can be explicitly controlled. Check out how RTLCSS works here.

More on logical properties

CSS Logical Properties and Values provide the ability to control layout through logical, rather than physical, direction and dimension mappings. Logical properties define direction‐relative equivalents of their corresponding physical properties

Thinking about start and end rather than left and right will be useful when dealing with layout methods such as CSS grid layout or flex box which follow the same patterns

Commonly used logical values with interoperable support on all major browsers —

text-align: start | end
justify-content: flex-start | flex-end
align-content: flex-start | flex-end
grid-column-start: <value>
grid-column-end: <value>
inline-size: <width>
margin-block-start/end: <value>
margin-inline-start/end: <value>
padding-block-start/end: <value>
padding-inline-start/end: <value>
border-inline-start/end: <value>

Please refer to test results for browser support of logical properties and values.

Finally

This article aims to briefly explain the specifics of working on RTL websites. Please refer to the links provided for more information.

Authoring HTML: Handling Right-to-left Scripts

This document provides advice to content authors using HTML markup and CSS style sheets about how to create pages for…

www.w3.org

Structural markup and right-to-left text in HTML

This article looks at ways of handling text direction for structural markup in HTML, ie. at the document level and for…