العربية والاتجاه، مصممة كلغة أولى.

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

يتضمن 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"/>;