دليل دعم الأرقام العربية والهندية في تطبيقات الويب

فريق كودينُشِر في آخرُ تحديثٍ
دليل دعم الأرقام العربية والهندية في تطبيقات الويب

ابدأ بالقاعدة التي توفّر عليك أسابيع من الإصلاحات: اعرض الرقم بالصيغة التي يتوقعها مستخدمك، واخزنه دائمًا بأرقام لاتينية في قاعدة البيانات. دعم الأرقام العربية والهندية داخل تطبيق ويب ليس ترفًا بصريًا، بل قرار يمسّ الفواتير والبحث والتقارير وحتى معدل إتمام الطلبات. رأيت متجرًا في الرياض يفقد طلبات لأن حقل الجوال كان يرفض «٠٥٥» المكتوبة بالأرقام الهندية. السبب؟ سطر تحقّق واحد نُسي. سنمشي خطوة بخطوة، بلغة يفهمها صاحب المشروع لا المبرمج فقط.

ما الفرق بين الأرقام العربية والهندية فعليًا؟

الأرقام التي نكتبها 1234 تُسمّى تقنيًا «أرقامًا عربية» لأنها وصلت أوروبا عبر العرب، أما ٠١٢٣٤ فتُسمّى في معايير يونيكود «الأرقام العربية‑الهندية» (Arabic‑Indic) وتشغل النطاق U+0660 إلى U+0669. الاسمان متبادلان في الحديث اليومي، والمهم أنهما شكلان مختلفان لقيمة عددية واحدة.

هذا الالتباس في التسمية أول فخ يقع فيه فريق العمل. تطلب «أرقامًا عربية» فيصلك 0123، وتطلب «أرقامًا هندية» فيسألك المطوّر: تقصد الديفاناغري؟ لا. الديفاناغري هي ०१२३ المستخدمة في الهند، ولا علاقة لها بما نستخدمه في مصر أو الخليج.

عمليًا، ثلاث مجموعات تهمّك:

  • اللاتينية (0‑9): السائدة في واجهات الخليج، ومطلوبة في المعرّفات والأكواد.
  • العربية‑الهندية (٠‑٩): مألوفة في مصر والسودان واليمن، ولدى كبار السن في دول الخليج.
  • الفارسية الممتدة (۰‑۹): شبيهة جدًا، لكن ٤ و٥ و٦ تُرسم بشكل مختلف، وهي ما يستخدمه المستخدم الإيراني أو الأفغاني.

ولماذا تهمّك المجموعة الثالثة؟ لأن من يكتب من لوحة مفاتيح فارسية سيُدخل ۵ بدل ٥، وأي دالة تحويل تتجاهل هذا النطاق ستُسقط الرقم بصمت. تذكّر أيضًا الفواصل: العلامة العشرية العربية هي ٫، وفاصل الآلاف ٬، وعلامة النسبة ٪. ثلاثة رموز مختلفة عن نظيراتها اللاتينية، وثلاث فرص إضافية للخطأ في أول جدول مالي تبنيه.

لماذا يهمّ هذا الاختيار في السوق الخليجي تحديدًا؟

افتح أي تطبيق بنك خليجي كبير. ستجد الأرصدة بأرقام لاتينية، حتى داخل الواجهة العربية بالكامل. ليس هذا إهمالًا في التعريب، بل عرف بصري ترسّخ في السعودية والإمارات والكويت خلال عشرين سنة. ومن يخالفه بلا سبب واضح يبدو تطبيقه غريبًا لا «أصيلًا».

لكن الصورة ليست بالأبيض والأسود. جمهورك هو من يحدّد القرار:

  • تطبيق مالي أو لوحة تحكّم للأعمال: التزم باللاتينية. المحاسب سينسخ الأرقام إلى Excel، والأرقام الهندية ستدخل كنص لا كقيمة قابلة للجمع.
  • خدمة حكومية أو تعليمية أو صحية تخدم فئات أكبر سنًا: أتِح خيار العرض بالأرقام الهندية داخل الإعدادات.
  • محتوى ديني أو تراثي أو مصاحف رقمية: الأرقام الهندية هنا هي المتوقّعة، ورقم الآية باللاتينية سيبدو نشازًا للقارئ.

وهناك بُعد تنظيمي كذلك. الفاتورة الإلكترونية في السعودية، ضمن نظام «فاتورة» من هيئة الزكاة والضريبة والجمارك، تُلزمك بإظهار البيانات باللغة العربية، بينما تُبنى الحقول التقنية داخل رمز الاستجابة السريعة على قيم رقمية قياسية أي لاتينية. اخلط بين الاثنين وستحصل على فاتورة أنيقة الشكل يرفضها المدقّق.

أضف إلى ذلك رمز الريال السعودي الجديد الذي أعلنه البنك المركزي السعودي مطلع 2025. من يبني شاشة أسعار اليوم يحتاج خطًّا يدعم هذا الرمز إلى جانب الأرقام، وإلا ظهر مربّع فارغ محلّه. تفاصيل صغيرة كهذه تفصل بين تطبيق يبدو محليًا فعلًا وآخر مُعرَّب على عجل، تمامًا كما يفعل ضبط الاتجاه من اليمين إلى اليسار في تجربة القراءة.

كيف أعرض الأرقام الهندية دون تعديل كل شاشة يدويًا؟

استخدم واجهة التنسيق المدمجة في المتصفح: Intl.NumberFormat مع لاحقة نظام الترقيم داخل رمز اللغة. كتابة new Intl.NumberFormat('ar-SA-u-nu-arab') تعطيك ٠١٢٣٤، بينما 'ar-SA-u-nu-latn' تعطيك 01234. سطر واحد يتحكّم بالتطبيق كله، بلا جداول استبدال يدوية ولا دوال مبعثرة بين الملفات.

الفكرة أن تُخزّن تفضيل المستخدم في مكان واحد — إعدادات الحساب مثلًا — ثم تمرّره إلى دالة تنسيق مركزية تستدعيها كل الشاشات. ولماذا هذا أفضل من البحث والاستبدال؟ لأن الاستبدال الأعمى يعطب معه أرقام الطلبات وروابط الصفحات ورموز التحقّق، فتكتشف أن رقم الطلب #4821 صار #٤٨٢١ داخل قاعدة البيانات نفسها.

نصيحة من تجربة مباشرة: مرّر التاريخ والوقت إلى الدالة ذاتها. الاستدعاء toLocaleDateString('ar-SA-u-nu-arab-ca-islamic-umalqura') يُخرج التاريخ الهجري بتقويم أم القرى وبالأرقام الهندية معًا، وهو بالضبط ما يتوقّعه مستخدم سعودي في شاشة المواعيد.

وعلى جانب التنسيق البصري، أضف هذه اللمسات الثلاث:

  • font-variant-numeric: tabular-nums لتتساوى عروض الأرقام في الجداول، فلا ترقص الأعمدة عند كل تحديث للأرصدة.
  • سمة lang="ar" على عنصر HTML، إذ يعتمد عليها المتصفح في اختيار الخط والشكل الصحيح.
  • ضبط direction وunicode-bidi، حتى لا تنقلب «الغرفة 12ب» إلى «ب12 الغرفة» أمام المستخدم.

وإن كنت تبني بلا كود، فمنصة عربية تفهم اللغة أصلًا توفّر عليك هذا كله؛ اطّلع على طريقة عمل منصة بناء التطبيقات بالذكاء الاصطناعي ووصف ما تريده بالعربية مباشرة.

القاعدة الذهبية: العرض شيء والتخزين شيء آخر

اكتبها على لوح الفريق بخط عريض: لا تُخزَّن الأرقام الهندية أبدًا في قاعدة البيانات. صيغة العرض تُطبَّق في اللحظة الأخيرة قبل أن تصل العين، والقيمة تُحفظ لاتينية نظيفة. من يخالف هذه القاعدة يدفع الثمن بعد ستة أشهر، حين يطلب مستثمر تقريرًا فتكتشف أن نصف المبالغ نصوص لا أرقام.

ما الذي يتعطّل تحديدًا؟

  • الترتيب: قاعدة البيانات تضع ٢ بعد ١٠ لأنها تعاملهما كحروف.
  • الحساب: أي عملية جمع أو متوسط تُخرج فراغًا أو صفرًا.
  • البحث: من يكتب 1055 لن يعثر على الطلب ١٠٥٥ إطلاقًا.
  • التصدير: Excel يرى نصًا، والمحاسب يرى كارثة صغيرة.
  • الربط الخارجي: بوابة الدفع أو شركة الشحن ترفض الحقل فورًا.

والحل بسيط ورخيص: دالة «تطبيع» واحدة تعمل عند كل مدخل. تأخذ ما كتبه المستخدم، وتحوّل نطاق ٠‑٩ ونطاق ۰‑۹ إلى 0‑9، وتبدّل ٫ بنقطة عشرية، وتحذف فواصل الآلاف والمسافات غير الظاهرة. المسافات الخفية تحديدًا هي ما يلتهم ساعات التشخيص، لأن نسخ رقم من واتساب يجرّ معه أحيانًا محرف اتجاه غير مرئي لا تراه أبدًا على الشاشة.

ضع الدالة على الخادم لا في المتصفح فقط. المتصفح يمكن تجاوزه، والخادم خط الدفاع الأخير. ثم اجعلها بندًا ثابتًا في مراجعة الكود؛ يساعدك على ذلك تنظيم التعاون داخل المشروع بحيث لا يضيف أحد حقلًا جديدًا دون تمريره عليها.

حقول الإدخال ولوحة المفاتيح: حيث تضيع الطلبات

مستخدم يفتح موقعك من آيفون بلوحة مفاتيح عربية سيكتب رقم جواله بالأرقام الهندية، ببساطة لأن هذا ما تعرضه اللوحة. وإن كان حقلك يتحقّق بنمط يقبل 0‑9 فقط، فسيرى رسالة «رقم غير صحيح» دون أن يفهم السبب. الرقم يبدو سليمًا تمامًا أمام عينيه. هذه من أشرس مشكلات التحويل في المنطقة، وأكثرها هدوءًا.

ما ينفع فعلًا:

  • inputmode="numeric" أو type="tel" لأرقام الجوال، فتظهر لوحة الأرقام مباشرة وتقلّ فرص الخلط.
  • تطبيع فوري أثناء الكتابة: يكتب ٠٥ فيتحوّل بصريًا إلى 05 أمامه. سلوك واضح، بلا مفاجآت عند الإرسال.
  • قبول اللصق بكل الصيغ: حقول رمز التحقّق تفشل كثيرًا لأن المستخدم يلصق ١٢٣٤٥٦ من الرسالة النصية.
  • رسائل خطأ صريحة: «أدخل الرقم بصيغة 05xxxxxxxx» أنفع بكثير من «قيمة غير صالحة».

انتبه للبحث كذلك. طبّع كلمة البحث بالطريقة نفسها التي طبّعت بها البيانات المخزّنة، وإلا فمن يبحث عن فاتورة ٢٠٢٦ لن يجد شيئًا. الحيلة المجرَّبة: احفظ نسخة مطبَّعة من الحقول القابلة للبحث بجوار النسخة الأصلية، ثم ابحث داخلها.

ولا تعتمد على maxlength وحده مع الأرقام الهندية. بعض المحارف تُحسب حرفًا واحدًا، لكن قد يلتصق بها محرف اتجاه فيصير الطول 11 بدل 10. اختبر الحقل باللصق من واتساب لا بالكتابة فقط. جرّبها مرة واحدة وستفهم لماذا أصرّ على هذه النقطة الصغيرة.

سياقات لا تُقرَّب فيها الأرقام الهندية إطلاقًا

ليست كل الأرقام متساوية. بعضها بيانات موجّهة للبشر، وبعضها معرّفات موجّهة للآلات. التمييز بينهما يوفّر عليك دعمًا فنيًا لا ينتهي.

حافظ على اللاتينية دائمًا في: الآيبان، أرقام البطاقات، الرموز البريدية، رقم السجل التجاري، الرقم الضريبي، معرّفات الطلبات، الروابط، وأكواد الخصم. الآيبان السعودي مثلًا يبدأ بحرفي SA ويتكوّن من 24 خانة؛ إظهاره بأرقام هندية يجعل نسخه إلى تطبيق البنك أمرًا مستحيلًا عمليًا.

وأرقام الهواتف حالة خاصة. اعرضها لاتينية دائمًا، واحفظها بالصيغة الدولية: 966+ للسعودية، 971+ للإمارات، 965+ للكويت، 974+ لقطر، 973+ للبحرين، 968+ لعُمان. وحين يكتب المستخدم 05 في البداية، حوّلها تلقائيًا. لا تجعله يخمّن الصيغة المطلوبة.

أما المبالغ والتواريخ والكميات والنسب، فهذه مساحة العرض المرن. استخدم منسّق العملة القياسي بدل تجميع النص يدويًا، لأن موضع رمز العملة في العربية يختلف عنه في الإنجليزية، وكذلك شكل الفاصلة العشرية.

  • الفواتير المطبوعة وملفات PDF: اللاتينية أأمن، خصوصًا إن كانت ستُدقَّق ضريبيًا.
  • الرسائل النصية القصيرة: بعض البوابات تعامل الأرقام الهندية كمحارف يونيكود، فيهبط سقف الرسالة من 160 إلى 70 محرفًا وترتفع التكلفة.
  • ملفات CSV وExcel: لاتينية بلا استثناء، وإلا فلا حسابات ولا معادلات.

نقطة الرسائل هذه يعرفها من دفع فاتورة حملة تسويقية مضاعفة. تكلفة صامتة، وسببها محرفان اثنان.

ما القوالب والخطوط التي تسهّل عليك المهمة؟

ابدأ من قالب عربي مُعدّ أصلًا للاتجاه من اليمين إلى اليسار، ثم اختر خطًا يحتوي أشكال الأرقام الهندية داخله. هذان القراران وحدهما يختصران معظم العمل اليدوي. الخطوط المجرَّبة: IBM Plex Sans Arabic، وNoto Naskh Arabic، وCairo، وTajawal. بعض الخطوط المزخرفة تفتقر إلى هذه المحارف فيظهر مربّع صغير مكان الرقم.

كيف تتأكّد قبل الالتزام بخط معيّن؟ افتح صفحة تجريبية واكتب فيها سطرًا واحدًا يجمع ٠١٢٣٤٥٦٧٨٩ مع 0123456789 مع الرمز ٪ والفاصلة ٫. إن ظهر أي مربّع فارغ، استبعد الخط فورًا. دقيقتان تكفيان، وتوفّران عليك اكتشاف المشكلة داخل فاتورة عميل.

وانتبه لوزن الخط. الأرقام الهندية في الأوزان الخفيفة جدًا تصبح رفيعة إلى حدّ يصعب قراءتها على شاشة الجوال تحت شمس الظهيرة، وهذا سياق واقعي تمامًا لمن يستخدم تطبيق توصيل في جدة أو الدوحة. اختر وزنًا متوسطًا للأرقام داخل الجداول.

  • ابدأ من قالب جاهز: تصفّح سوق القوالب العربية واختر واحدًا يعرض الأرقام بالشكل الذي تريده أصلًا.
  • ثبّت الخط محليًا: لا تعتمد على تحميله من خدمة خارجية قد تُحجب أو تبطؤ.
  • وحّد الخط بين الواجهة وملفات PDF: أكثر أعطال الطباعة سببها خط غير مضمَّن في الملف.

وإن أردت التوسّع في التفاصيل التقنية خطوة بخطوة، فـمركز التوثيق يشرح إعدادات اللغة والاتجاه والخطوط بأمثلة عملية جاهزة للنسخ.

قائمة اختبار قبل الإطلاق

قبل أن تدفع تطبيقك للمستخدمين، امشِ على هذه القائمة بنفسك. لا تحتاج خبرة تقنية؛ تحتاج نصف ساعة وهاتفًا واحدًا وجهاز كمبيوتر.

  • الخط: تحقّق من ظهور ٠‑٩ بلا مربّعات فارغة في كل الأوزان المستخدمة.
  • الجداول: هل تتراصف الأعمدة بعد تحديث القيم؟ إن كانت ترقص فأنت بحاجة إلى tabular-nums.
  • النص المختلط: اكتب «الشقة 12 ب، الدور 3» وتأكّد أن الترتيب لم ينقلب.
  • الطباعة: صدّر فاتورة PDF وافتحها على جهاز آخر؛ مشكلات تضمين الخطوط تظهر هنا فقط.
  • اللصق: الصق رقم جوال ومبلغًا من محادثة واتساب داخل الحقول.
  • البحث: ابحث عن الرقم ذاته بالصيغتين وتأكّد أن النتيجة واحدة.
  • التصدير: افتح ملف Excel وجرّب دالة جمع على عمود المبالغ.
  • الاتساق: لا تخلط صيغتين في الشاشة الواحدة؛ سعر بالهندية وكمية باللاتينية يبدو عطلًا برمجيًا لا خيارًا مقصودًا.

الاتساق تحديدًا هو ما ينساه الجميع. قد يعرض النظام السعر بصيغة والخصم بصيغة أخرى لأن أحدهما وصل من واجهة برمجية خارجية. اختبر الشاشة كاملة، لا العنصر المعزول.

وبعد المرور على القائمة، وثّق قرارك كتابةً: أي صيغة افتراضية، وأين الاستثناءات، ومن يملك صلاحية التعديل. راجع خطوات نشر تطبيق الويب قبل الإطلاق، وإن واجهتك حالة غريبة فـفريق الدعم أسرع من ليلة كاملة من التجارب العشوائية.

خلاصة الأمر أن السؤال ليس «أيّ الصيغتين أجمل»، بل «من يقرأ هذا الرقم ولماذا». اجعل التخزين لاتينيًا صارمًا، وافتح باب العرض لتفضيل المستخدم، وضع دالة تطبيع واحدة على كل المدخلات. ثلاث قواعد تكفي لتفادي معظم المشكلات التي أراها في مشاريع خليجية جديدة. وإن أردت تجربة ذلك عمليًا على نموذج صغير، ابدأ مجّانًا وابنِ شاشة أسعار واحدة بالصيغتين. عشر دقائق وتتضح الفكرة.

Frequently Asked Questions

هل أستخدم الأرقام الهندية في تطبيق موجّه للسعودية والإمارات؟

الافتراضي الأفضل هو الأرقام اللاتينية، لأنها ما اعتاده مستخدم الخليج في تطبيقات البنوك والجهات الحكومية والمتاجر. أضف خيارًا في الإعدادات لمن يفضّل الأرقام الهندية، خاصة إن شمل جمهورك فئات أكبر سنًا أو محتوى دينيًا وتراثيًا. القاعدة العملية: اللاتينية افتراضًا، والهندية خيارًا متاحًا لا إجباريًا.

كيف أمنع رفض حقل رقم الجوال حين يكتبه المستخدم بالأرقام الهندية؟

حوّل المدخل قبل التحقّق لا بعده. مرّر النص على دالة تطبيع تبدّل ٠‑٩ و۰‑۹ بأرقام لاتينية، وتحذف المسافات ومحارف الاتجاه غير المرئية، ثم طبّق قاعدة التحقّق. اجعل الدالة تعمل على الخادم أيضًا، لأن التحقّق في المتصفح وحده يمكن تجاوزه بسهولة، وخصوصًا مع اللصق من الرسائل.

هل تؤثر الأرقام الهندية على تكلفة الرسائل النصية أو على الفاتورة الإلكترونية؟

نعم في الحالتين. كثير من بوابات الرسائل تعامل الأرقام الهندية كمحارف يونيكود، فينخفض سقف الرسالة من 160 محرفًا إلى نحو 70 وتتضاعف التكلفة. أما الفاتورة الإلكترونية في السعودية فتعتمد حقولها التقنية على قيم رقمية قياسية لاتينية، لذا احتفظ بالبيانات المخزّنة والمشفّرة بالصيغة اللاتينية دائمًا.

ما أسرع طريقة لاختبار دعم الأرقام في تطبيقي قبل الإطلاق؟

أنشئ صفحة تجريبية واحدة تجمع رقمًا لاتينيًا وآخر هنديًا ومبلغًا بعملة وتاريخًا هجريًا ورمز ٪ والفاصلة ٫. افتحها على جوال وحاسوب، وصدّرها إلى PDF، والصق فيها رقمًا من واتساب. أي مربّع فارغ أو انقلاب في الترتيب سيظهر خلال دقائق قبل أن يراه عميل حقيقي.

اقرأْ أيضًا