Right 2 Left Styling

Flip the page's direction Permalink for the section "Flip the page's direction"

What is "Right To Left" (RTL)? Permalink for the section "What is RTL?"

By default, the page direction is LTR ("Left To Right"). It's indicated by the <html>:

<html dir="ltr">
            

dir="ltr" is the default value, but you can change it for dir="rtl".

There are other ways to define the direction, but the best practice is to use the HTML element.

You can also define the dir parameter on other elements such as article or section if you have content in multiple languages that have different directions.

Why bother with RTL? Permalink for the section "Why bother with RTL?"

You should care because millions of people use RTL languages such as Arabic, Hebrew, or Urdu (Pakistan, India) every day.

The mirror effect Permalink for the section "the The mirror effect"

The direction is not the only difference. Converting LTR to RTL can have a huge impact on various aspects, such as alignments, spacing, or even the whole layout.

Using Flexbox and Grid is great in that perspective, as elements are correctly flipped when the page's direction changes.

Flexbox follows the writing mode of the document, for example:

<ul dir="ltr">
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>
<ul dir="rtl">
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>
            

The above codes give:

ABC 
CBA
            

The example above is pretty basic. There are many other element to take into account.

Deep dive into RTL Permalink for the section "Deep dive into RTL"

You'll find everything you need to know and useful resources on RTL Styling 101.