Internationalization

RTL Support

Full right-to-left layout mirroring for Arabic, Hebrew, Farsi, and other RTL languages. Add dir="rtl" to your <html> element and ply handles the rest.

Setup

Basic Usage

Set dir="rtl" on the <html> element for a full page RTL layout, or on any container for scoped RTL.

<!-- Full page RTL -->
<html lang="ar" dir="rtl">

<!-- Scoped RTL section -->
<div dir="rtl">
  <p>This content flows right-to-left.</p>
</div>

Layout

Grid Mirroring

The grid system automatically mirrors in RTL mode. Columns that start from the left will start from the right instead.

LTR (default):

Sidebar

Main Content

RTL (dir="rtl"):

الشريط الجانبي

المحتوى الرئيسي

<div dir="rtl">
  <div class="units-row">
    <div class="unit-25">Sidebar</div>
    <div class="unit-75">Main Content</div>
  </div>
</div>

Components

Navigation

Navbars automatically mirror in RTL. Items align to the right and flow leftward.

Components

Forms

Form labels align right, select arrows flip to the left side, and input groups reverse their prepend/append order.

Mirrored

Mirrored Utilities

Directional utilities like margin-left, padding-right, float-left, text-left, and text-right are automatically mirrored inside dir="rtl".

LTR Class	RTL Behavior
`text-left`	Becomes `text-align: right`
`text-right`	Becomes `text-align: left`
`margin-left`	Becomes `margin-right`
`margin-right`	Becomes `margin-left`
`margin-left-auto`	Becomes `margin-right: auto`
`float-left`	Becomes `float: right`
`float-right`	Becomes `float: left`

Bidirectional

Logical Property Helpers

For truly bidirectional layouts, use CSS logical property utilities that work correctly in both LTR and RTL without mirroring overrides.

Class	Description
`margin-inline-start`	Margin on the start side (left in LTR, right in RTL)
`margin-inline-end`	Margin on the end side (right in LTR, left in RTL)
`padding-inline-start`	Padding on the start side
`padding-inline-end`	Padding on the end side
`border-inline-start`	Border on the start side
`border-inline-end`	Border on the end side

<!-- Works in both LTR and RTL automatically -->
<div class="margin-inline-start padding-inline-end">
  Content with directional spacing
</div>

Control

Opting Out

Use no-rtl on any element inside an RTL context to force LTR direction. Useful for code blocks, phone numbers, or other content that should always be left-to-right.

هذا النص يتدفق من اليمين إلى اليسار.

const greeting = "Hello, World!";

<div dir="rtl">
  <p>Arabic text flows right-to-left.</p>
  <pre class="no-rtl"><code>Code stays left-to-right.</code></pre>
</div>