RTL Support

Apex includes built-in RTL (Right-to-Left) support for internationalization. Perfect for Arabic, Hebrew, and other RTL languages.

How It Works

Apex uses logical properties that automatically adapt to the document direction. When you set dir="rtl" on your HTML element, all utilities with directional properties will flip automatically.

Automatic Flipping

• margin-left → margin-right
• padding-left → padding-right
• left → right
• border-left → border-right

Logical Properties

• start (inline-start)
• end (inline-end)
• inset-inline-start
• text-align: start

RTL Examples

RTL Layout

See how layout utilities automatically flip in RTL mode.

RTL Content

This content flows right-to-left

HTML

<div dir="rtl" class="flex items-center gap-4 p-4 bg-gray-50 rounded-lg">
  <div class="w-16 h-16 bg-blue-500 rounded flex items-center justify-center text-white font-bold">
    A
  </div>
  <div class="flex-1">
    <h3 class="font-semibold text-gray-900">RTL Content</h3>
    <p class="text-gray-600 text-sm">This content flows right-to-left</p>
  </div>
  <button class="px-4 py-2 bg-blue-500 text-white rounded">
    Button
  </button>
</div>

RTL Spacing

Margin and padding utilities automatically adapt to text direction.

ml-4 (becomes mr-4 in RTL)

mr-4 (becomes ml-4 in RTL)

HTML

<!-- LTR: margin-left: 1rem -->
<!-- RTL: margin-right: 1rem -->
<div dir="rtl">
  <div class="ml-4">Margin Start (logical)</div>
  <div class="mr-4">Margin End (logical)</div>
</div>

<!-- Physical properties stay fixed -->
<div class="border-l-4 border-blue-500 pl-4">
  Physical left border
</div>

RTL Flexbox

Flexbox layouts maintain their visual structure in RTL mode.

Start

Center

End

HTML

<div dir="rtl" class="flex justify-between items-center gap-4">
  <div class="bg-blue-500 text-white px-4 py-2 rounded">
    Start (visual right in RTL)
  </div>
  <div class="bg-green-500 text-white px-4 py-2 rounded">
    Center
  </div>
  <div class="bg-purple-500 text-white px-4 py-2 rounded">
    End (visual left in RTL)
  </div>
</div>

RTL Text Alignment

Text alignment utilities work with logical properties.

text-left (in RTL = right)

text-right (in RTL = left)

text-start (logical)

text-end (logical)

HTML

<div dir="rtl">
  <p class="text-left">Text left (becomes right in RTL)</p>
  <p class="text-right">Text right (becomes left in RTL)</p>
  <p class="text-start">Text start (logical)</p>
  <p class="text-end">Text end (logical)</p>
</div>

Implementation

1. Set HTML Direction

HTML

<!-- In your HTML head -->
<html lang="ar" dir="rtl">

<!-- Or set dynamically with JavaScript -->
<script>
  document.documentElement.dir = 'rtl';
  document.documentElement.lang = 'ar';
</script>

2. React/Next.js with next-intl

// middleware.ts
import createMiddleware from 'next-intl/middleware';

export default createMiddleware({
  locales: ['en', 'ar', 'he'],
  defaultLocale: 'en'
});

// Automatically handles RTL for Arabic and Hebrew
// The dir attribute is set based on locale

Important Considerations

• Use logical properties (start/end) when possible for better RTL support
• Icons and images may need manual adjustment in RTL layouts
• Test with actual RTL content, not just flipped LTR text
• Consider bidirectional text with mixed content

Supported Languages

🇸🇦

Arabic

🇮🇱

Hebrew

🇮🇷

Persian

🇵🇰

Urdu

How It Works

Apex uses logical properties that automatically adapt to the document direction. When you set dir="rtl" on your HTML element, all utilities with directional properties will flip automatically.

Automatic Flipping

• margin-left → margin-right
• padding-left → padding-right
• left → right
• border-left → border-right

Logical Properties

• start (inline-start)
• end (inline-end)
• inset-inline-start
• text-align: start

RTL Examples

RTL Layout

See how layout utilities automatically flip in RTL mode.

RTL Content

This content flows right-to-left

HTML

<div dir="rtl" class="flex items-center gap-4 p-4 bg-gray-50 rounded-lg">
  <div class="w-16 h-16 bg-blue-500 rounded flex items-center justify-center text-white font-bold">
    A
  </div>
  <div class="flex-1">
    <h3 class="font-semibold text-gray-900">RTL Content</h3>
    <p class="text-gray-600 text-sm">This content flows right-to-left</p>
  </div>
  <button class="px-4 py-2 bg-blue-500 text-white rounded">
    Button
  </button>
</div>

RTL Spacing

Margin and padding utilities automatically adapt to text direction.

ml-4 (becomes mr-4 in RTL)

mr-4 (becomes ml-4 in RTL)

HTML

<!-- LTR: margin-left: 1rem -->
<!-- RTL: margin-right: 1rem -->
<div dir="rtl">
  <div class="ml-4">Margin Start (logical)</div>
  <div class="mr-4">Margin End (logical)</div>
</div>

<!-- Physical properties stay fixed -->
<div class="border-l-4 border-blue-500 pl-4">
  Physical left border
</div>

RTL Flexbox

Flexbox layouts maintain their visual structure in RTL mode.

Start

Center

End

HTML

<div dir="rtl" class="flex justify-between items-center gap-4">
  <div class="bg-blue-500 text-white px-4 py-2 rounded">
    Start (visual right in RTL)
  </div>
  <div class="bg-green-500 text-white px-4 py-2 rounded">
    Center
  </div>
  <div class="bg-purple-500 text-white px-4 py-2 rounded">
    End (visual left in RTL)
  </div>
</div>

RTL Text Alignment

Text alignment utilities work with logical properties.

text-left (in RTL = right)

text-right (in RTL = left)

text-start (logical)

text-end (logical)

HTML

<div dir="rtl">
  <p class="text-left">Text left (becomes right in RTL)</p>
  <p class="text-right">Text right (becomes left in RTL)</p>
  <p class="text-start">Text start (logical)</p>
  <p class="text-end">Text end (logical)</p>
</div>

Implementation

1. Set HTML Direction

HTML

<!-- In your HTML head -->
<html lang="ar" dir="rtl">

<!-- Or set dynamically with JavaScript -->
<script>
  document.documentElement.dir = 'rtl';
  document.documentElement.lang = 'ar';
</script>

2. React/Next.js with next-intl

// middleware.ts
import createMiddleware from 'next-intl/middleware';

export default createMiddleware({
  locales: ['en', 'ar', 'he'],
  defaultLocale: 'en'
});

// Automatically handles RTL for Arabic and Hebrew
// The dir attribute is set based on locale

Important Considerations

• Use logical properties (start/end) when possible for better RTL support
• Icons and images may need manual adjustment in RTL layouts
• Test with actual RTL content, not just flipped LTR text
• Consider bidirectional text with mixed content