RTL (Right to Left)

Ask AI
View as MarkdownAsk Claude

Fylgja CSS offers seamless support for right-to-left (RTL) languages like Arabic and Hebrew without requiring additional CSS or prefixed RTL utility classes.

Fylgja CSS automatically applies the correct styles to ensure a proper RTL layout.

RTL Language Layout

When working with RTL languages, it’s essential not only to translate text but also to mirror the layout to align with the text direction for a semantically correct presentation.

To enable RTL behavior, ensure the following HTML attributes are set:

  • Add dir="rtl" to the <html> element.
  • Set an appropriate language attribute, such as lang="ar", on the <html> element.

This setup enables RTL functionality, eliminating the need for extra CSS or plugins. 😉

RTL-Aware Utilities

This mirroring isn’t limited to the base styles. Fylgja only ships RTL-aware utilities, so the Utilities package behaves the same way.

Spacing, alignment, and positioning are built on logical properties (margin-inline, inset-inline, text-start, and so on) rather than physical left/right ones.

As a result, there are no directional variants to swap: the same utility that adds inline-start spacing in LTR adds it on the opposite side in RTL, automatically.

Forcing a Specific Text Direction

If you need to force a left-to-right (LTR) layout regardless of the language or text direction, apply one of the following:

  • Add dir="ltr" to the specific HTML element where you want this behavior.
  • Use the CSS property direction: ltr; to enforce LTR on the desired element.

FAQ

Do I need a separate RTL stylesheet or RTL-prefixed utility classes?

No, Fylgja CSS automatically mirrors the layout for RTL languages once dir="rtl" is set. There's no separate RTL stylesheet or rtl:-prefixed classes to add.

What's the minimum setup needed to enable RTL?

Add dir="rtl" and an appropriate lang attribute (e.g. lang="ar") to the <html> element.

Can I force part of a page to stay LTR inside an RTL page?

Yes, add dir="ltr" to that specific element, or apply direction: ltr; in CSS to enforce it locally.

Do Fylgja's utilities work in RTL, or just the base styles?

All of them. Fylgja only ships RTL-aware utilities; spacing, alignment, and positioning are built on logical properties (e.g. margin-inline, inset-inline, text-start) instead of physical left/right, so they mirror automatically under dir="rtl" with no directional variants to swap.