Guides

RTL and i18n

Logical CSS properties, document direction and locale — one component tree for LTR and RTL.

Logical CSS

Texuli styles use logical properties (margin-inline, padding-block, inline-size, border-inline-start). You do not maintain a mirrored stylesheet for Arabic or Hebrew UIs.

dir and lang

Set dir and lang on the document or a subtree. Pass a locale into date and number components when they format text. Keep user-facing strings translatable — no hard-coded direction in copy.

<html lang="ar" dir="rtl">
  <!-- or a subtree -->
  <div dir="rtl" lang="ar">
    <Field label="المدينة">…</Field>
  </div>
</html>

Live RTL

Toggle direction on the demo; the field label and description flip with the writing mode.

Live · logical layout and dir

مثال للقراءة من اليمين إلى اليسار.

Components use logical properties (inline-size, padding-inline). Set dir on a subtree or the document — no mirrored CSS forks.