دعم العربية والخصائص المنطقية | تنسيق المكونات في React

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

لبناء مكونات احترافية تخدم الواجهات العربية (RTL) والإنجليزية (LTR) بنفس الكفاءة، تجنب الخصائص الفيزيائية الجامدة مثل margin-left وborder-left التي تنكسر عند عكس اتجاه الصفحة! اعتمد دائماً الخصائص المنطقية (CSS Logical Properties) مثل padding-inline وmargin-inline-start وborder-inline-start (أو صيغتها المضمنة borderInlineStart) لينعكس تصميم المكون تلقائياً بانسجام تام في كلتا اللغتين.

الصف 2 كود برمجي

HTML

function BilingualCallout() {
  return (
    <div className="rx-stack">
      <div dir="ltr" className="logical-note">
        LTR Start Edge
      </div>
      <div dir="rtl" className="logical-note">
        RTL Start Edge
      </div>
    </div>
  );
}

جرّب بنفسك

الصف 3 ملاحظة هامة

RTL and Logical CSS Properties دعم العربية والخصائص المنطقية

شرح صفوف ومحتوى الفقرة

جميع فقرات هذا الدرس (تنسيق المكونات في React)