اختيار الخط العربي للمواقع والتطبيقات: دليل للمطورين

خطوات عملية لاختبار الخط العربي في المواقع والتطبيقات، من اتجاه الكتابة وتضمين الخط إلى الأداء ودعم الحروف.

لماذا الخط العربي في الويب أصعب من الإنجليزي؟

عند إعداد واجهة عربية، اختبر اتجاه الكتابة وعرض الحروف والتشكيل في الصفحة الفعلية:

خطوط قد تكون متوفرة على بعض الأنظمة

قد تتوفر خطوط مثل Arial وTimes New Roman على بعض الأنظمة، لكن لا تفترض وجود خط بعينه لدى جميع الزوار. أضف قائمة خطوط بديلة واختبر شكل النص عند غياب الخط الأساسي.

للويندوز:

أمثلة لخطوط عربية يمكن اختبارها

هذه أمثلة للمقارنة وليست ترتيباً للأفضل؛ افحص الترخيص والتغطية اللغوية لكل خط من مصدره.

طرق تضمين الخطوط العربية في الموقع

الطريقة 1: استخدام Google Fonts

<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;700&display=swap" rel="stylesheet">

body {
  font-family: 'Cairo', sans-serif;
  text-align: right;
}

الطريقة 2: تضمين خط مخصص (@font-face)

@font-face {
  font-family: 'MyArabicFont';
  src: url('/fonts/my-font.woff2') format('woff2'),
       url('/fonts/my-font.woff') format('woff');
  font-display: swap;
}

الطريقة 3: خطوط CDN

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

قواعد RTL للمطورين

إعداد HTML:

<html lang="ar" dir="rtl">

تحدد خاصية dir اتجاه النص في HTML؛ استخدمها على مستوى المستند أو العنصر بحسب المحتوى.

إعداد CSS:

/* الإعداد العام */
body {
  text-align: right;
  font-family: 'Cairo', sans-serif;
}

/* للمحتوى الإنجليزي داخل موقع عربي */
.english-content {
  text-align: left;
}

عيّن dir="ltr" على عنصر المحتوى الإنجليزي نفسه بدلاً من الاعتماد على تنسيق CSS وحده.

اختبار Flexbox مع RTL:

.container {
  display: flex;
}

عيّن dir="rtl" على الحاوية في HTML، ثم اختبر ترتيب العناصر واتجاهها على الواجهة الفعلية.

تأثير الخط على سرعة الموقع

حجم الملف ومؤشرات الأداء:

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

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

تقنيات تحسين الأداء:

1. اختر استراتيجية عرض الخط

يحدد font-display سلوك عرض النص أثناء تحميل الخط. راجع الخيارات واختر ما يناسب الواجهة؛ المثال التالي يستخدم swap ولا يمثل الإعداد الأنسب لكل موقع.

@font-face {
  font-family: 'MyFont';
  src: url('font.woff2') format('woff2');
  font-display: swap; /* يعرض النص فوراً بخط بديل ثم يستبدله */
}

2. Preload للخطوط الحرجة فقط

<link rel="preload" href="/fonts/arabic-font.woff2" as="font" type="font/woff2" crossorigin>

3. تقليل المحارف عند الحاجة

يمكن تجهيز مجموعة فرعية من المحارف لتقليل ما يُحمَّل، بشرط أن تسمح الرخصة بذلك وأن تشمل المجموعة كل الحروف والتشكيل الذي يحتاجه المحتوى.

التحقق من دعم الخط للعربية

فحص حالة التحميل:

console.log(document.fonts.check('16px "MyArabicFont"'));

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

الأحرف الأساسية للاختبار:

"ب ت ث ج ح خ ص ض ع غ — اكتب هذا للتأكد من دعم الحروف الكاملة"

أمثلة للمقارنة حسب نوع الموقع

هذه نقاط بداية للاختبار وليست ترتيباً أو ضماناً للملاءمة.

نوع الموقع خطوط يمكن اختبارها ما ينبغي اختباره
متجر إلكتروني Cairo, Tajawal وضوح أسماء المنتجات والأسعار
موقع أخبار Noto Naskh قراءة فقرات طويلة
موقع مؤسسي Amiri, Scheherazade وضوح النص على الأجهزة المستهدفة
تطبيق جوال Cairo, IBM Plex Arabic الحجم والتحميل على الهاتف
منصة تعليمية Noto Kufi وضوح الحروف والتشكيل للفئة المستهدفة

خلاصة

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

مراجع تقنية