` with the HTML `dir` attribute set to either `"ltr"` (left-to-right) or `"rtl"` (right-to-left). When `dir="rtl"` is applied, the browser automatically mirrors: - Text alignment (right-aligned by default for RTL scripts). - Inline element flow (right-to-left). - Punctuation placement. - Bi-directional text rendering (Unicode BiDi algorithm). No CSS, no JavaScript — purely the standard HTML `dir` attribute. ## When to use Use `direction/1` when: - Displaying user-generated content that may be in an RTL language (Arabic, Hebrew, Farsi, Urdu, etc.). - Building internationalised UI where a section must switch direction independently of the page-level direction. - Isolating RTL content inside an otherwise LTR page. For full-page RTL support, set `dir` on the `` element instead. ## Examples ### Basic LTR (default) <.direction dir="ltr">Hello World ### Arabic RTL text <.direction dir="rtl">مرحبا بالعالم ### Hebrew with custom font <.direction dir="rtl" class="font-serif text-lg">

שלום עולם

### Conditional direction based on locale <.direction dir={if @locale in ~w(ar he fa ur), do: "rtl", else: "ltr"}> <.card> <.card_content>{@content} ### Multilingual chat message <%!-- In a chat app, each message detects its own direction --%> <%= for message <- @messages do %> <.direction dir={message.direction} class="mb-2">

{message.body}

<% end %> ### RTL navigation sidebar <.direction dir="rtl"> ## Accessibility notes Setting `dir` on a container element is the W3C-recommended approach for marking bidirectional text regions. Screen readers and braille displays use this attribute to determine reading order and text pronunciation direction for languages such as Arabic and Hebrew. # `direction` Renders a `

` wrapper with the specified text direction. Sets the HTML `dir` attribute so the browser renders all descendant text in the correct direction. Punctuation, inline elements, and implicit text alignment all respond accordingly without requiring additional CSS. ## Example <.direction dir="rtl" class="text-lg">

مرحبا بالعالم

## Attributes * `dir` (`:string`) - Text direction. `"ltr"` (default) for left-to-right languages (English, French, etc.). `"rtl"` for right-to-left languages (Arabic, Hebrew, Farsi, Urdu). Defaults to `"ltr"`. Must be one of `"ltr"`, or `"rtl"`. * `class` (`:string`) - Additional CSS classes applied to the wrapper `

`. Defaults to `nil`. * Global attributes are accepted. HTML attributes forwarded to the root `

` element (e.g. `lang`, `data-*`). ## Slots * `inner_block` (required) - Content inside the direction wrapper. All descendant text and inline elements respect the `dir` attribute. --- *Consult [api-reference.md](api-reference.md) for complete listing*