RTL و LTR

پشتیبانی دوجهته در NOVAADMIN «وصله‌شده» نیست؛ از پایه ساخته شده است. تمام استایل‌ها با ویژگی‌های منطقی (logical properties) نوشته شده‌اند و هیچ‌جا margin-left یا left: 0 دستی وجود ندارد.

نحوه کار

لایه	روش
ریشه سند	`<html dir="rtl">` یا `<html dir="ltr">`
بوت‌استرپ	نسخه RTL یا LTR به‌صورت پویا جایگزین می‌شود
CSS پروژه	`inset-inline`, `margin-inline`, `padding-block`, `border-inline-start`
آیکن‌های جهت‌دار	کلاس `flip-rtl`
چیدمان‌های خاص	گرید بدون تعیین جهت (auto-flow) یا `grid-auto-flow: column`

/* نمونه از سایدبار */
.app-sidebar {
  inline-size: var(--nv-sidebar-w);
  inset-inline-start: 0;
  border-inline-end: 1px solid var(--nv-border);
}
.app-main {
  margin-inline-start: var(--nv-sidebar-w);
}

تغییر جهت در زمان اجرا

import { theme } from './js/core/theme.js';
theme.toggleDirection();
// یا
theme.set('direction', 'ltr');

یا از دکمه‌ای با data-direction-toggle. (از نسخه ۱.۱ گزینه جهت از پنل شخصی‌سازی حذف شده و جهت همراه زبان عوض می‌شود.)

نکات مهم برای کامپوننت‌ها

دراپ‌دان‌ها: پنل با inset-inline-start/end تراز می‌شود؛ از dropdown-menu--end استفاده کنید تا در هر دو جهت درست باز شود.
نمودارها: محورها با rtl: true در src/js/core/charts.js تنظیم می‌شوند و اعداد همیشه لاتین و چپ‌به‌راست رندر می‌شوند (--nv-numeric).
تقویم و کانبان: ستون‌ها از منطق گرید پیروی می‌کنند؛ جابه‌جایی کارت‌ها با SortableJS و ذخیره ترتیب در localStorage.
برگه چاپ فاکتور: جهت بر اساس جهت صفحه تنظیم می‌شود و اعداد با dir="ltr" جدا می‌شوند.
فرم‌ها: آیکون‌های داخل ورودی با padding-inline-start فاصله می‌گیرند، نه padding-left.

آیکن‌های جهت‌دار

<i class="bi bi-arrow-left flip-rtl" aria-hidden="true"></i>

کلاس flip-rtl در src/scss/utilities/_helpers.scss تعریف شده و در حالت rtl آیکن را ۱۸۰ درجه می‌چرخاند.

تست دوجهته

با Ctrl + Shift + L (یا دکمه [data-direction-toggle]) جهت را عوض کنید.
این صفحه‌ها را در هر دو جهت بررسی کنید: dashboards/analytics.html، crm/pipeline.html، apps/calendar.html، apps/email.html، finance/invoice-details.html، ui/tables.html.
مطمئن شوید هیچ نوار افقی اضافه (overflow) ایجاد نمی‌شود و پنل‌های شناور از لبه صفحه بیرون نمی‌زنند.

نکته: اگر کامپوننت سفارشی می‌سازید، هرگز از left/right/top/bottom استفاده نکنید

اگر ناچار بودید، نسخه [dir='rtl'] را کنار آن بنویسید و دلیلش را کامنت کنید.

هشدار: بوت‌استرپ RTL را با CSS سفارشی روی [dir='rtl'] بازنویسی نکنید؛ فقط از توکن‌های منطقی استفاده کنید تا دو حالت از یک منبع تغذیه شوند

RTL and LTR

Bidirectional support in NOVAADMIN is not "patched on"; it is built in from the ground up. All styles are written with logical properties and there is no manual margin-left or left: 0 anywhere.

How it works

Layer	Approach
Document root	`<html dir="rtl">` or `<html dir="ltr">`
Bootstrap	The RTL or LTR build is swapped in dynamically
Project CSS	`inset-inline`, `margin-inline`, `padding-block`, `border-inline-start`
Directional icons	The `flip-rtl` class
Special layouts	Direction-agnostic grids (auto-flow) or `grid-auto-flow: column`

/* example from the sidebar */
.app-sidebar {
  inline-size: var(--nv-sidebar-w);
  inset-inline-start: 0;
  border-inline-end: 1px solid var(--nv-border);
}
.app-main {
  margin-inline-start: var(--nv-sidebar-w);
}

Changing direction at runtime

import { theme } from './js/core/theme.js';
theme.toggleDirection();
// or
theme.set('direction', 'ltr');

Or use a button with data-direction-toggle. (Since version 1.1 the direction option has been removed from the customizer and the direction changes together with the language.)

Important notes for components

Dropdowns: the panel is aligned with inset-inline-start/end; use dropdown-menu--end so it opens correctly in both directions.
Charts: axes are configured with rtl: true in src/js/core/charts.js, and numbers are always rendered left-to-right (--nv-numeric).
Calendar and kanban: columns follow grid logic; cards are moved with SortableJS and their order is saved in localStorage.
Invoice print sheet: the direction follows the page direction and numbers are isolated with dir="ltr".
Forms: icons inside inputs are spaced with padding-inline-start, not padding-left.

Directional icons

<i class="bi bi-arrow-left flip-rtl" aria-hidden="true"></i>

The flip-rtl class is defined in src/scss/utilities/_helpers.scss and rotates the icon 180 degrees in rtl mode.

Bidirectional testing

Switch the direction with Ctrl + Shift + L (or the [data-direction-toggle] button).
Check these pages in both directions: dashboards/analytics.html, crm/pipeline.html, apps/calendar.html, apps/email.html, finance/invoice-details.html, ui/tables.html.
Make sure no extra horizontal scrollbar (overflow) appears and floating panels do not stick out past the page edge.

Tip: if you build a custom component, never use left/right/top/bottom

If you have to, write the [dir='rtl'] variant next to it and explain why in a comment.

Warning: do not override Bootstrap RTL with custom CSS on [dir='rtl']; use logical tokens only, so both modes are fed from a single source

RTL وLTR

دعم الاتجاهين في NOVAADMIN ليس «ترقيعاً»؛ بل مبني من الأساس. كُتبت جميع الأنماط بـ الخصائص المنطقية (logical properties) ولا يوجد في أي مكان margin-left أو left: 0 يدوي.

طريقة العمل

الطبقة	الأسلوب
جذر المستند	`<html dir="rtl">` أو `<html dir="ltr">`
Bootstrap	يُستبدل إصدار RTL أو LTR ديناميكياً
CSS المشروع	`inset-inline`, `margin-inline`, `padding-block`, `border-inline-start`
الأيقونات الاتجاهية	الفئة `flip-rtl`
التخطيطات الخاصة	شبكات لا تحدد الاتجاه (auto-flow) أو `grid-auto-flow: column`

/* مثال من الشريط الجانبي */
.app-sidebar {
  inline-size: var(--nv-sidebar-w);
  inset-inline-start: 0;
  border-inline-end: 1px solid var(--nv-border);
}
.app-main {
  margin-inline-start: var(--nv-sidebar-w);
}

تغيير الاتجاه وقت التشغيل

import { theme } from './js/core/theme.js';
theme.toggleDirection();
// أو
theme.set('direction', 'ltr');

أو عبر زر يحمل data-direction-toggle. (منذ الإصدار 1.1 أُزيل خيار الاتجاه من لوحة التخصيص وأصبح الاتجاه يتغير مع اللغة.)

ملاحظات مهمة للمكونات

القوائم المنسدلة: تُحاذى اللوحة بـ inset-inline-start/end؛ استخدم dropdown-menu--end لتنفتح بشكل صحيح في الاتجاهين.
المخططات: تُضبط المحاور بـ rtl: true في src/js/core/charts.js وتُعرض الأرقام دائماً من اليسار إلى اليمين (--nv-numeric).
التقويم وكانبان: تتبع الأعمدة منطق الشبكة؛ ويتم نقل البطاقات بـ SortableJS وحفظ الترتيب في localStorage.
ورقة طباعة الفاتورة: يُضبط الاتجاه حسب اتجاه الصفحة وتُعزل الأرقام بـ dir="ltr".
النماذج: تُباعد الأيقونات داخل الحقول بـ padding-inline-start لا padding-left.

الأيقونات الاتجاهية

<i class="bi bi-arrow-left flip-rtl" aria-hidden="true"></i>

الفئة flip-rtl معرّفة في src/scss/utilities/_helpers.scss وتدير الأيقونة ١٨٠ درجة في وضع rtl.

اختبار الاتجاهين

غيّر الاتجاه بـ Ctrl + Shift + L (أو بالزر [data-direction-toggle]).
افحص هذه الصفحات في الاتجاهين: dashboards/analytics.html وcrm/pipeline.html وapps/calendar.html وapps/email.html وfinance/invoice-details.html وui/tables.html.
تأكد من عدم ظهور شريط تمرير أفقي إضافي (overflow) وعدم خروج اللوحات العائمة عن حافة الصفحة.

ملاحظة: إذا أنشأت مكوّناً مخصصاً، فلا تستخدم أبداً left/right/top/bottom

وإن اضطررت، فاكتب نسخة [dir='rtl'] بجانبه واشرح السبب في تعليق.

تحذير: لا تُعِد كتابة Bootstrap RTL بـ CSS مخصص على [dir='rtl']؛ استخدم الرموز المنطقية فقط ليتغذى الوضعان من مصدر واحد