Home›Docs›Basic›Text Direction

Text Direction

Last updated: 16 days ago

Category: Basic

Direction refers to the writing direction. Latin and Chinese scripts are written left-to-right (LTR), while Arabic and Hebrew are written right-to-left (RTL), often requiring RTL configuration.

Scrollable Container16 days agoDisplay & Align16 days agoText Direction16 days agoContainer16 days agoFlex Layout16 days agoGrid Layout17 days ago

Introduction

There are three main text direction systems in the world:

Left-to-right, then top-to-bottom (horizontal): Latin scripts (English, French, German etc.) and Simplified Chinese
Right-to-left, then top-to-bottom (horizontal): Arabic and Hebrew
Top-to-bottom, then right-to-left (vertical): Traditional Chinese, Japanese and Mongolian

Due to web characteristics, the first two directions (LTR and RTL) are primarily used. Since LTR is the default web direction, this document focuses on RTL configuration.

dir=rtl

Set dir="rtl" on the html root node to enable right-to-left text direction.

                      
                        <html dir="rtl">
                            <head></head>
                            <body></body>
                        </html>

Output
HTML
JS

```
                
                
            
```

                
                setattrrtl.onclick = ()=>{
                    document.documentElement.setAttribute('dir', 'rtl');
                }
                setattrltr.onclick = ()=>{
                    document.documentElement.setAttribute('dir', 'ltr');
                }

RTL Styles

For local text direction control, set direction: rtl on specific elements. However, practice shows this alone doesn't fully implement RTL layout - you also need to manually handle:

Alignment direction
Margin direction
Padding direction
Position direction

Output
HTML
JS

Germany plays a central role in the European Union and is known for its precision engineering, strong industrial base, and political stability. The country has a rich history that spans from classical music and philosophy to major 20th-century events. Today, Germany is a champion of green energy, automotive excellence, and global diplomacy. Cities like Berlin and Munich combine historical depth with modern innovation.

The United States has the world’s largest economy and plays a dominant role in international politics, defense, technology, and entertainment. It is a federal republic with a diverse population and a strong tradition of democracy and free enterprise. From Silicon Valley to Hollywood, the U.S. drives global trends in science, media, and culture. Its institutions, military reach, and entrepreneurial spirit shape much of the modern world.
```
                
                
            
```

                
                let box = orca.getEl('#dirbox');
                setcssrtl.onclick=()=>{
                    box.style.setProperty('direction', 'rtl');
                }
                setcssltr.onclick=()=>{
                    box.style.setProperty('direction', 'ltr');
                }

For simple RTL text arrangement, we recommend using built-in CSS classes:

_rtl: Right-to-left arrangement
_ltr: Left-to-right arrangement

Output
HTML
JS

Germany plays a central role in the European Union and is known for its precision engineering, strong industrial base, and political stability. The country has a rich history that spans from classical music and philosophy to major 20th-century events. Today, Germany is a champion of green energy, automotive excellence, and global diplomacy. Cities like Berlin and Munich combine historical depth with modern innovation.

The United States has the world’s largest economy and plays a dominant role in international politics, defense, technology, and entertainment. It is a federal republic with a diverse population and a strong tradition of democracy and free enterprise. From Silicon Valley to Hollywood, the U.S. drives global trends in science, media, and culture. Its institutions, military reach, and entrepreneurial spirit shape much of the modern world.
```
                
                
            
```

                
                let box = orca.getEl('#dirbox2');
                setcssrtl2.onclick=()=>{console.log(10);
                    box.classList.remove('_ltr');
                    box.classList.add('_rtl');
                }
                setcssltr2.onclick=()=>{
                    box.classList.remove('_rtl');
                    box.classList.add('_ltr');
                }

Container

16 days ago

Display & Align