Live demo — this example is server-driven; run the showcase locally for the interactive version.

Right-to-left

PatternFly's CSS handles RTL out of the box: set dir="rtl" on the root and the components mirror automatically. The trick is keeping data (URLs, IDs, codes) LTR with nested dir="ltr".

Examples

Form

A form wrapped in <code class="ws-code">dir="rtl"</code> — labels, controls and the "Save" alignment mirror automatically.

إنشاء حساب جديد

Dashboard

A mini dashboard wrapped in <code class="ws-code">dir="rtl"</code> — tiles and tables flip horizontally.

طلبات في الدقيقة

4 820

زمن الاستجابة

182 ms

معدل الأخطاء

0.42 %

الخدمة	الإصدار	الحالة
الطلبات	v2.14.1	ناجح
الدفع	v1.8.0	جارٍ
البحث	v3.0.0	ناجح

Usage

Set dir="rtl" on <html> (or on a wrapping element) and PatternFly's stylesheet does the rest. Keep technical strings — URLs, IDs, version numbers, code blocks — wrapped in dir="ltr" so they don't reverse.