Flip the page's direction Permalink for the section "Flip the page's direction"
- The above toggle does not move because I've added the
dirattribute on this section
- Centered elements (e.g.,
text-align: center;) stay centered
- The main structure does not move because body has display grid and items are centered
- Positioned elements flip
- Elements without
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
dir="ltr" is the default value, but you can change it for
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
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:
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.