recent
أخبار ساخنة

rtl-text-tools: حل مشاكل النص العربي وRTL في المواقع والتطبيقات

bbkiwi2011
الصفحة الرئيسية
rtl-text-tools لحل مشاكل النص العربي واتجاه RTL في JavaScript
rtl-text-tools لمعالجة مشاكل النص العربي واتجاه RTL والنصوص ثنائية الاتجاه في JavaScript
تنبيه هام: هذا الدليل موجه للمطورين وأصحاب المواقع الذين يواجهون مشاكل في عرض النصوص العربية وRTL واختلاط اتجاهات الكتابة. إذا كنت تبحث عن حل للكتابة العربية داخل Photoshop أو Illustrator، فهذا ليس الحل المناسب لك؛ راجع دليل أداة XRTL بدلاً من ذلك.

ما المشكلة التي تحلها المكتبة؟

المشكلة في دعم النص العربي واختلاط النص العربي والإنجليزي لا تكمن دائماً في تنسيقات الواجهة أو ضبط اتجاه النص عبر dir="rtl". تظهر المشكلة عند معالجة النصوص ثنائية الاتجاه وفق خوارزمية Unicode Bidirectional Text، خصوصاً عندما تجتمع العربية مع نصوص LTR مثل الروابط والأرقام وعلامات الترقيم.

تأتي مكتبة rtl-text-tools التي طورها المطور Homayoun Mohammadi كخيار خفيف الوزن وبلا أي مكتبات خارجية معتمدة (Zero-dependency) لمعالجة نصوص RTL وإصلاح التشوهات النصية الشائعة:

  • علامات الترقيم: قفز النقطة أو الفاصلة أو علامة الاستفهام إلى بداية السطر الأيمن بشكل مقلوب.
  • نقاط الحذف الثلاثية (...): ظهور النقاط على اليمين قبل بداية الكلام بدلاً من نهايته.
  • الأقواس المنعكسة: ظهور الأقواس باتجاهات معكوسة تشوه سياق القراءة.
  • تداخل عناوين IP والروابط: انكسار الروابط الإنجليزية وأرقام الإصدارات داخل الجمل العربية.

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

تثبيت المكتبة عبر NPM

تعمل المكتبة كمكتبة JavaScript/TypeScript ويمكن استخدامها في المتصفح وبيئات JavaScript المختلفة مثل Node.js مع دعم سلس لـ React:

npm install rtl-text-tools

تجربة عمومية: اختبار 4 حالات حقيقية

قمنا باختبار الوظائف المنفصلة التي تقدمها المكتبة (مثل convertPunctuation، moveEllipsis، wrapLTR، وtoArabicDigits) على نصوص عربية مختلطة لمعاينة النتيجة العمليّة:

1. علامات الترقيم المكسورة

النص الخام: مرحبا, كيف حالك?
بعد convertPunctuation: تحول الفاصلة والإنجليزية إلى الفواصل وعلامات الاستفهام العربية الصحيحة: مرحبا، كيف حالك؟

2. الروابط داخل النصوص العربية

النص الخام: رابط الموقع: https://example.com
بعد wrapLTR: يتم تغليف الرابط بعلامات التحكم بـ Unicode لمنع اختلال الجملة مجاورته: رابط الموقع: ‪https://example.com‬

3. عناوين IP ورقم الإصدار

النص الخام: الإصدار 1.2.0 والـ IP هو 192.168.1.1
بعد toPersianDecimal: تتعامل الدالة مع الأرقام العشرية بطريقة تحافظ على تسلسل الأرقام الذي يتضمن نقاطاً، مثل أرقام الإصدارات وعناوين IP، بدلاً من تحويل كل رقم منفرد إلى رقم فارسي.

4. نقاط التوقف الثلاثية (Ellipsis)

النص الخام: تحميل الملف...
بعد moveEllipsis: تصحيح تموضع النقاط لتكون في البداية البصرية المناسبة لاتجاه القراءة الأيمن: ...تحميل الملف

دقة المعالجة بين العربية والفارسية (lang: arabic)

نقطة جوهرية يجب الانتباه لها عند استخدام الدالة الشاملة fixRTL؛ افتراضياً تقوم المكتبة بتحويل الأرقام إلى الأرقام الفارسية (۱-۲-۳). إذا كان تطبيقك موجهاً بالكامل باللغة العربية، يجب عليك تمرير الخيار { lang: 'arabic' } بشكل صريح.

import { fixRTL, toArabicDigits } from 'rtl-text-tools';

// التحويل المباشر للأرقام العربية
toArabicDigits("العدد 100"); // النتيجة الصحيحة: "العدد ١٠٠"

// المعالجة الافتراضية (تستخدم الأرقام الفارسية)
fixRTL('مرحبا, رقم 123...'); 
// النتيجة: "...مرحبا، رقم ۱۲۳"

// المعالجة الدقيقة المخصصة للغة العربية
fixRTL('مرحبا, رقم 123...', { lang: 'arabic' }); 
// النتيجة الصحيحة: "...مرحبا، رقم ١٢٣"

كما تتضمن المكتبة دوال مخصصة لتطبيع بعض أشكال الأحرف العربية (Arabic Normalization) مثل normalizeArabicAlef وnormalizeArabicYeh لتوحيد كتابة الألف والياء في قواعد البيانات.

التكامل مع React والواجهات البرمجية

يمكنك دمج المكتبة بسهولة في تطبيق React بفحص اتجاه النص تلقائياً عبر isRTL وتطبيق أنماط CSS المجهزة عبر getRTLStyles:

import React from 'react';
import { isRTL, getRTLStyles } from 'rtl-text-tools';

function DynamicMessage({ content }: { content: string }) {
  const isArabicRTL = isRTL(content);

  return (
    <div 
      style={isArabicRTL ? getRTLStyles() : undefined}
      dir={isArabicRTL ? 'rtl' : 'ltr'}
    >
      <p>{content}</p>
    </div>
  );
}

متى تحتاج المكتبة ومتى لا تحتاجها؟

تحتاج المكتبة إذا: لا تحتاج المكتبة إذا:
تعالج نصوصاً مدخلة من المستخدمين (User-generated Content) تخلط بين العربي والإنجليزي. موقعك نصوصه ثابتة (Static) ومصممة يدوياً بملفات اللغة.
ترسل إشعارات (Push Notifications) أو رسائل نصية مجردة من تنسيقات CSS. مشكلة العرض تكمن فقط في محاذاة النص وتصحيح text-align: right عبر CSS.
تحتاج لعمل التطبيع (Normalization) لبعض الأحرف والأرقام لتنظيف البيانات. تبحث عن حل لتنسيق النصوص العربية داخل برامج التصميم والجرافيكس.

رابط المشروع وحالة التحديثات

يمتاز المشروع بأنه نشط ومستمر التحديث مع تغطية اختبارات تبلغ 99% وفق وصف المشروع، وبدون أي اعتماديات خارجية (Zero-dependency):

google-playkhamsatmostaqltradentX