العربية والاتجاه، كلغة أولى لا كإضافة.

#تقويم هجري / أم القرى، مدمج أصلًا

يحمل DatePicker وDateRangePicker مبدّلًا بين الميلادي والهجري داخل التقويم. انتقل إلى الهجري فيعرض كل يوم تاريخ أم القرى وتحته اليوم الميلادي، فتقابل بين التقويمين دون مغادرة الحقل. والقيمة المخزّنة دائمًا Date أصلية، والعرض الهجري للعرض فقط.

• مبدّل ميلادي ↔ هجريعنصر داخل النافذة، مُفعّل افتراضيًا. أو ثبّت تقويمًا واحدًا بخاصية calendar.
• خلايا بتقويمينتطبع showSecondaryCalendar رقم اليوم في التقويم الآخر صغيرًا أسفل كل يوم.
• أرقام لاتينية دائمًاتُعرض الأرقام 0-9 لا الأرقام العربية-الهندية، وهو عرف النماذج والهويّات الحكومية السعودية.
• ترويسة أيام بلغة صحيحةتُقرأ أوائل الأيام ح ن ث ر خ ج س، حروف حقيقية لا “ال” مختزلة.

import { DatePicker } from '@dev-dga/react';// Hijri first, with the Gregorian day shown small under each cell.<DatePicker  label="تاريخ الميلاد"  defaultCalendar="hijri"  showSecondaryCalendar/>;

صدر إصلاح أوائل الأيام في @dev-dga 0.12.2؛ كانت النسخ الأقدم تختزل عدّة أيام إلى “ال”.

#القوائم المتداخلة تُرقّم بالعربية

ترقّم القائمة المرتّبة مستواها الأعلى 1-2-3 في الاتجاهين. أمّا العناصر المتداخلة فتُظهر اللغة: a-b-c في اليسار، وأ-ب-ج-د-ه في اليمين، وهو الترتيب الأبجدي العربي، مدفوعًا كليًا بـ @counter-style في CSS.

تستخدم القائمتان أدناه الترميز نفسه؛ الفارق هو الاتجاه فقط.

import { List, ListItem } from '@dev-dga/react';// Top level counts 1-2-3; nested items count a-b-c (LTR) / أ-ب-ج (RTL).<List variant="ordered" aria-label="خطوات الطلب">  <ListItem>الأهلية</ListItem>  <ListItem level={2}>رقم الهوية</ListItem>  <ListItem level={2}>إثبات العنوان</ListItem>  <ListItem>المراجعة</ListItem></List>;

#اتصال الحروف محمي

العربية خط متصل، حروفها تترابط. والمباعدة (letter-spacing) التي تُحسّن الخط اللاتيني تُمزّق الكلمة العربية إلى حروف منفصلة. لذا يعيد النظام letter-spacing إلى normal في اليمين ولا يحوّل العربية إلى أحرف كبيرة، فتبقى العناوين مقروءة.

تضيف العيّنة الثانية letter-spacing: 0.25em، وهو تمامًا ما تفعله أدوات الخط اللاتيني. لا تطبّقها على العربية أبدًا.

/* Arabic is cursive. Tracking disconnects the glyphs. */[dir='rtl'] {  letter-spacing: normal; /* reset any Latin tracking */  text-transform: none;   /* never uppercase Arabic  */}

#الأسهم تتبع اتجاه القراءة

تنعكس دلالات لوحة المفاتيح مع التخطيط. في التبويبات والمنزلق والتقييم وشريط القوائم وشبكة التقويم، السهم الذي ينقل إلى التالي يتبع اتجاه القراءة: ففي اليمين يتقدّم السهم الأيسر ويرجع الأيمن. وينقل Home وEnd إلى الأول والأخير، مع محطة تنقّل واحدة.

• ← →التنقّل بين العناصر، منعكسًا في اليمين ليطابق اتجاه القراءة.
• Home Endالقفز إلى العنصر الأول / الأخير في المجموعة.
• Tabمحطة واحدة للمجموعة كلها، والأسهم تنقّل داخلها.

ركّز على عنصر أدناه وجرّب الأسهم، بدّل الاتجاه واشعر بانعكاسها.

import { Tabs, TabsList, TabsTrigger, TabsContent } from '@dev-dga/react';// Arrow keys, Home/End and roving focus are handled for you,// and invert automatically under dir="rtl". No key handlers.<Tabs defaultValue="overview">  <TabsList>    <TabsTrigger value="overview">نظرة عامة</TabsTrigger>    <TabsTrigger value="requests">الطلبات</TabsTrigger>  </TabsList>  <TabsContent value="overview">…</TabsContent></Tabs>;

#تخطيط واحد، تعكسه الخصائص المنطقية

لا شيء في هذه الصفحة يستخدم left أو right أو margin-left أو text-align: left. فالمسافات والحدود والمحاذاة كلها بخصائص منطقية: margin-inline وinset-inline-start وtext-align: start، فيكفي قلب dir واحد لعكس الشجرة كلها دون أي عمل لكل مكوّن. والبطاقة أدناه مكوّن واحد، ينعكس تلقائيًا.

ومكوّنات @dev-dga مكتوبة بالأسلوب نفسه: خصائص منطقية للتخطيط، فقلب الاتجاه يعكس كل صندوق دون فروع خاصة بالـ RTL.

/* Physical: needs a second rule for RTL, easy to forget. */.card { margin-left: 1rem; text-align: left; }/* Logical: mirrors automatically when dir flips. Write it once. */.card { margin-inline-start: 1rem; text-align: start; }

#المعرّفات السعودية تبقى يسارية داخل العربية

رقم الهوية والآيبان ورقم الجوال +966 بيانات من اليسار إلى اليمين، حتى داخل جملة عربية. فلو تُركت لخوارزمية الاتجاه لقفزت + أو SA إلى الطرف الخطأ وصار الرقم غير مقروء. لذا يثبّت كل حقل قيمته بـ dir="ltr" و inputMode المناسب، فتنعكس التسمية ولا يختلّ الرقم.

التسميات والتخطيط تتبع اتجاه الصفحة، والقيم مثبّتة يسارية. القيم المعروضة نموذجية.

import { TextInput } from '@dev-dga/react';// The value is LTR data even inside an Arabic sentence: pin it.<TextInput  label="رقم الآيبان"  dir="ltr"  inputMode="text"  defaultValue="SA44 2000 0001 2345 6789 1234"/>;