RTL direction

Lang and direction of the document

The plugin publishes the active language in lang and applies dir according to directions. Languages without an override use LTR.

// Inside the options of the module:
directions: { ar: 'rtl' }

// Inside a component:
const i18n = useI18n()
i18n.switchLocale('ar')

/* CSS with logical properties */
.content {
  padding-inline: 1.5rem;
  margin-inline: auto;
  text-align: start;
}

Logical properties

Use padding-inline, margin-inline and text-align: start so the layout follows the direction of the content. UIContainer already uses logical margins and padding.

On this site the documentation shell speaks the language of the page in LTR (Spanish in the Arabic playground), while the playground result declares the language and direction of its catalog. That way you can read the instructions and check the Arabic block in RTL.