RTL
RTL is an MVP goal. Fragiola uses **logical properties on the inline axis**:
RTL is an MVP goal. Fragiola uses logical properties on the inline axis:
ps/pe (padding-inline-start/end), border-s/border-e
(border-inline-start/end), start/end. The block axis stays physical
(pt, pb, border-t, border-b).
Why logical
A pe-8 on a menu item with an indicator automatically flips to the other
side in RTL. A pr-8 does not — it stays on the right regardless of
direction, which is wrong in RTL.
Where no logical utility exists
Use the rtl: variant. This includes directional icons, which are easy to
forget — a chevron pointing right in LTR should point left in RTL.
Switching
There is no built-in direction control. To preview RTL, set dir="rtl" on the
<html> element — either from your browser devtools for a quick look, or in
your own app's root layout:
<html dir="rtl">A missing ps/pe is invisible until someone flips the direction — which is
why flipping dir manually is the fastest way to find them. A consumer app
that wants a persistent direction switch can wire its own control that sets
this attribute, the same way next-themes does for data-theme.