Text Direction Suite — 2 components for bidirectional (BiDi) text support in the PhiaUI rich text editor.
Provides LTR/RTL/Auto toggling and explicit directional block wrappers, enabling proper bidirectional content editing for mixed-language documents.
Components
text_direction_toggle/1— segmented button group for LTR / RTL / Auto directionbidi_text_block/1— block wrapper with explicitdirattribute for directional content
Example
<.text_direction_toggle id="dir-toggle" value={@text_direction} />
<.bidi_text_block id="rtl-para" direction={:rtl}>
<p>Arabic or Hebrew text here</p>
</.bidi_text_block>Summary
Functions
Renders a block-level wrapper with an explicit HTML dir attribute for
bidirectional text support.
Renders a segmented button group for switching between LTR, RTL, and Auto text directions.
Functions
Renders a block-level wrapper with an explicit HTML dir attribute for
bidirectional text support.
Sets the appropriate dir attribute ("ltr", "rtl", or "auto") on the
container <div>. When :rtl is active, the block receives text-right
alignment. When :auto, the browser uses unicode-bidi: plaintext to infer
direction from content.
Example
<.bidi_text_block id="arabic-block" direction={:rtl}>
<p>Some right-to-left content here.</p>
</.bidi_text_block>
<.bidi_text_block id="mixed-block" direction={:auto}>
<p>Content where direction is auto-detected.</p>
</.bidi_text_block>Attributes
id(:string) (required) - Unique identifier for the block.direction(:atom) - Explicit text direction for the block content. Defaults to:auto. Must be one of:ltr,:rtl, or:auto.class(:string) - Additional CSS classes for the container. Defaults tonil.- Global attributes are accepted.
Slots
inner_block(required) - Block content that should follow the specified direction.
Renders a segmented button group for switching between LTR, RTL, and Auto text directions.
The active button is highlighted with primary styling. Each button emits a
"text-direction:change" event with a direction value.
Uses role="radiogroup" with individual role="radio" buttons and proper
aria-checked state for screen reader accessibility.
Example
<.text_direction_toggle id="dir-toggle" value={:ltr} />
<.text_direction_toggle id="dir-toggle" value={:rtl} />Attributes
id(:string) (required) - Unique identifier for the toggle group.value(:atom) - Currently active direction. Defaults to:ltr. Must be one of:ltr,:rtl, or:auto.class(:string) - Additional CSS classes for the container. Defaults tonil.- Global attributes are accepted.