RTL Layout Support

RTL Layout Support RTL (Right-to-Left) layout diperlukan untuk bahasa seperti Arab, Ibrani, Farsi, dan Urdu. Mendukung RTL bukan hanya membalik teks — seluruh…

RTL (Right-to-Left) layout diperlukan untuk bahasa seperti Arab, Ibrani, Farsi, dan Urdu. Mendukung RTL bukan hanya membalik teks — seluruh layout harus di-mirror.

Mengaktifkan RTL

<!-- Set dir attribute di html tag -->
<html lang="ar" dir="rtl">

<!-- Atau dinamis per elemen -->
<div dir="auto">مرحبا بالعالم</div>

// React: set dir berdasarkan locale
function App({ locale }) {
  const dir = ["ar", "he", "fa", "ur"].includes(locale) ? "rtl" : "ltr";

  return (
    <html lang={locale} dir={dir}>
      <body>{/* ... */}</body>
    </html>
  );
}

CSS Logical Properties — Kunci RTL

/* ❌ PHYSICAL properties — tidak berubah di RTL */
.sidebar {
  margin-left: 20px;
  padding-right: 16px;
  text-align: left;
  border-left: 2px solid blue;
}

/* ✅ LOGICAL properties — otomatis flip di RTL */
.sidebar {
  margin-inline-start: 20px;   /* left di LTR, right di RTL */
  padding-inline-end: 16px;    /* right di LTR, left di RTL */
  text-align: start;           /* left di LTR, right di RTL */
  border-inline-start: 2px solid blue;
}

/* Mapping lengkap */
/* Physical       → Logical */
/* left           → inline-start */
/* right          → inline-end */
/* top            → block-start */
/* bottom         → block-end */
/* width          → inline-size */
/* height         → block-size */
/* margin-left    → margin-inline-start */
/* padding-right  → padding-inline-end */

Flexbox & Grid di RTL

/* Flexbox otomatis reverse di RTL ✅ */
.nav {
  display: flex;
  gap: 1rem;
  /* flex-direction: row secara otomatis menjadi RTL */
}

/* Grid juga otomatis ✅ */
.layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  /* Kolom 250px akan di kanan di RTL */
}

Tailwind CSS RTL Support

<!-- Tailwind v3.3+ mendukung rtl: dan ltr: modifier -->
<div class="ltr:ml-4 rtl:mr-4">...</div>

<!-- Atau gunakan logical properties (Tailwind v3.3+) -->
<div class="ms-4">...</div>  <!-- margin-inline-start -->
<div class="me-4">...</div>  <!-- margin-inline-end -->
<div class="ps-4">...</div>  <!-- padding-inline-start -->
<div class="pe-4">...</div>  <!-- padding-inline-end -->
<div class="text-start">...</div>  <!-- text-align: start -->

Ikon & Gambar yang Perlu Di-flip

/* Ikon arah perlu di-mirror */
.icon-arrow {
  /* Otomatis flip di RTL */
  transform: scaleX(1); /* default LTR */
}
[dir="rtl"] .icon-arrow {
  transform: scaleX(-1); /* mirror untuk RTL */
}

/* JANGAN flip: */
/* ❌ Logo, brand marks */
/* ❌ Angka (termasuk jam) */
/* ❌ Ikon universal (play, checkbox) */
/* ❌ Gambar dan foto */

Testing RTL

// Chrome DevTools: Force RTL
// Elements panel → <html> → tambah dir="rtl"

// Atau bookmarklet
javascript:document.dir = document.dir === "rtl" ? "ltr" : "rtl";

RTL Layout Support — i18n