Include the millions who read from right to left
Natura11y includes localization support for the 12 right-to-left (RTL) languages around the world:
- Arabic
- Aramaic
- Azeri
- Divehi
- Fula
- Hebrew
- Kurdish
- N'Ko
- Persian
- Rohingya
- Syriac
- Urdu
Direction and Language HTML Attributes
Two key HTML attributes affect the localization of an document: direction (dir
) and language (lang
). Both attributes should be present on the <html>
tag.
The dir
attribute declares the default text direction. A value of ltr
sets a left to right text direction. While a value of rtl
sets a right to left text direction.
The lang
attribute sets the document's default language. A value of en
sets the language to English.
A document written in Arabic, for example, requires both dir="rtl"
and a lang="ar"
attributes (Figure 1, line 3).
CSS Logical Properties
Natura11y declares all text alignment, margin, padding, position, and border styles using CSS Logical Properties.
With the aformentioned dir="rtl"
attribute present on the html
tag, all left and right directional styles flip automatically.
Did you know?
The association between hermit crabs and their shelters has significantly influenced their biology.
Flipping Icons
Natura11y's directional icons flip horizontally when the dir="rtl"
attribute is present. Consider the following directional icons:
Arrow Left
Double Chevron Left
Checkbox Checked
Confirm
Arabic Example
The example below illustrates how an Arabic page flows within the Natura11y Framework: