GSAP SplitText يكسر العربية، والمشكلة ليست في الكتابة من اليمين إلى اليسار

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

22 من أصل 47 مصدر تقسيم في هذا الترميز تطلب الحروف، وهي أول ما يلقاه الزائر: روابط القائمة الأربعة كلها، وكل رابط في التذييل، وخمسة من أقسام الصفحة الرئيسية. سجّل تسليم المرحلة العاشرة 23 مصدرًا يطلب الحروف و201 عقدة حرف في الصفحة الرئيسية الإنجليزية يوم كُتب؛ ويقيس الترميز اليوم 22 مصدرًا، وتقيس جولة golden في 2026-08-24 عدد 187 عقدة. كل زوج صحيح في تاريخه، ولهذا يحمل كلٌّ منهما تاريخه.

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

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

أيّ الحروف يتّصل، ومن أيّ جهة، بيانات منشورة لا فلكلور. إصدار 17.0.0 من ArabicShaping.txt، المؤرَّخ 2025-08-14، يحمل 834 مدخلة، منها 615 ثنائية الوصل و153 يمينية الوصل؛ والباقي يساري الوصل أو مسبِّب للوصل أو غير موصول أو شفّاف. وتحليل الملف محليًّا في 2026-08-26 يعطي جوابًا لكل حرف في أي نص تنشره، والجدول أدناه يعطيه للكلمة التي بدأ منها كل هذا.

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

التمييز هنا قابل للتنفيذ لا بلاغيّ. فالدالّة التي تقرّر هل يجوز تقسيم مستند إلى حروف تقرأ اللغة لا الاتجاه، ويؤكّد اختبار الوحدة أن مستندًا عبريًّا معلَنًا من اليمين إلى اليسار يعيد false، بينما تعيد ar وar-SY وAR كلها true. والربط بالاتجاه كان سيحذف الحروف من العبرية لسبب لا يصحّ عليها، وكان سيفوّت أي كتابة متّصلة مضبوطة من اليسار إلى اليمين.

على التأثير أن يحرّك كل جزء، والطريقة الرخيصة الوحيدة لتحريك الحبر هي transform. وتعرّف CSS Transforms Level 1 العنصر القابل للتحويل بأنه كل ما يحكم تخطيطَه نموذج الصندوق في CSS، إلا الصناديق السطرية غير المستبدَلة وصناديق أعمدة الجداول ومجموعاتها. والحرف الملفوف في span سطري عادي صندوق سطري غير مستبدَل، فالخاصية لا تُطبَّق أصلًا — تُهمَل إهمالًا، ولا تُحسَب صفرًا.

في هذا المستودع القياس، لأن المتصفّح يكذب بشأنه. يبلّغ Chrome عن المصفوفة من getComputedStyle سواء احتُرمت أم لم تُحترم، وطوال ثلاث مراحل تطوير كان كل حرف في الصفحة يحمل matrix(1, 0, 0, 1, 0, -70) ولم يتحرّك واحد منها بكسلًا واحدًا. والأداة الأمينة الوحيدة كانت قراءة المستطيل المحيط بالحرف قبل التمرير فوقه وبعده، عند عرض نافذة ثابت.

إذن inline-block إلزامي للتأثير، وinline-block صندوق سطري ذرّي — سياق تنسيق قائم بذاته، وبالتالي حدّ. وترفض CSS Text Level 3 أن تعد بأي شيء عبره: عرض وحدة المحرف الطباعية التي يقسمها حدُّ عنصرٍ غير معرَّف، وتحذّر المواصفة المؤلّفين من أن تقسيم العناقيد الكتابية أو الروابط بحدود العناصر قد يعطي نتائج غير متّسقة أو غير مرغوبة. والمتطلَّبان متعارضان بحكم المواصفة لا بحكم التنفيذ.

والأمر أسوأ من اختيار مباشر بينهما، وهذا الجزء يُغفَل عادةً. فتحليل الثغرات في الكتابة العربية من W3C، المحدَّث في 2026-03-30 والمستند إلى بلاغ فُتح في فبراير 2020، يسجّل أن WebKit يكسر الوصل بمجرّد أن يحيط أي ترميز بالحرف — قبل تطبيق أي أنماط إطلاقًا. أما Gecko وBlink فيحفظان الوصل مع الأنماط التي لا تغيّر رسم الحرف، وتفشل الثلاثة جميعًا حين يختلف font-weight أو font-style أو font-size عبر الحدّ. فالترميز المجرّد لكل حرف لا يضمن شيئًا، وinline-block يضمن الكسر.

الخسارة قابلة للعدّ، فتستحق أن تُعدّ. قطع Zain الثلاث المنشورة تحمل جداول تشكيل متطابقة — 610 رسوم و590 مدخلة cmap في كل قطعة، و161,096 بايتًا للمجموعة — وجدول GSUB فيها يحمل 39 استبدالًا للصورة الأولية و39 للوسطية و83 للنهائية و36 رابطة إلزامية. وكل واحد من هذه الاستبدالات الموضعية الـ161 سياقيّ: لا يعمل إلا حين يقع الحرف في مقطع مع جيرانه.

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

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

أما بقية ما وجب قياسه في هذه القطع الثلاث — السِّنّة والألف وقيمة size-adjust التي تقرنها بالخط اللاتيني — ففي قياس خط عربي حين لا يعني ارتفاع x شيئًا.

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

وأضافت إعادة الكتابة في 3.13، المنشورة في 29 أبريل 2025 وعلى npm في اليوم التالي، معالجة aria وautoSplit وonSplit وdeepSlice وmask والتقطيع المبني على Intl.Segmenter، ولم تذكر الكتابة من اليمين إلى اليسار في أي موضع. والبحث في المصدر المنشور للإصدار 3.15.0 — الأحدث على npm منذ 2026-04-13 — في 2026-08-26 عن rtl أو direction أو arabic أو cursive أو shap أو bidi أو joining لا يعيد شيئًا، وتقسيم الحروف ما زال الاستدعاء نفسه بالدقّة الافتراضية كما كان في 3.13.0.

// SplitText، دون تغيير من 3.13.0 حتى 3.15.0:
//   _charSegmenter = new Intl.Segmenter()
 
const seg = new Intl.Segmenter()
seg.resolvedOptions().granularity
// 'grapheme' — الافتراضي، وهو المشكلة كلها
 
function pieces(word) {
  return [...seg.segment(word)].length
}
 
pieces('تواصل')   // 5  — five isolated forms, one misspelt word
pieces('العربية') // 7
pieces('لا')      // 2  — an obligatory ligature, cut in half
pieces('عبّود')    // 4  — the shadda stays put: marks survive
 
// المنصّة تقدّم الجواب سلفًا، ولا يطلبه أي مُقسِّم
const byWord = new Intl.Segmenter('ar', { granularity: 'word' })

من الإجحاف أن نسمّي هذا عيبًا في GSAP. فأي مكتبة تلفّ كل عنقود كتابي في صندوق تصطدم بالجدار نفسه، وكذلك تقسيم مكتوب باليد على حروف نصّ: الجدار هو CSS Transforms Level 1 مع CSS Text Level 3، لا تنفيذٌ بعينه. والإصلاح الوحيد المتاح على مستوى المكتبة هو التقطيع بدقّة الكلمة في الكتابات المتّصلة — وهو ما تقدّمه المنصّة سلفًا، كما يُظهر آخر سطر في القائمة — ولا يفعله أي مُقسِّم شائع من تلقاء نفسه.

وIntl.Segmenter تحسين حقيقي على التقسيم بتعبير نمطي، ويستحق الأمر دقّة في وصف ما حسّنه. فهو يبقي العلامات المركّبة ملتصقة بحرفها، فتبقى كلمة تحمل شدّة أربعة مقاطع لا خمسة. لكنه لا يستطيع أن يعين على الوصل، لأن الوصل ليس مسألة تقطيع — إنه مسألة تشكيل، تُحسم بعد التقطيع، بالجيران الذين وضعهم التقطيع للتوّ في صناديق أخرى.

متى قُبل أن القرار لا يمكن أن يعيش في CSS، صار العلاج صغيرًا. دالّة خالصة تأخذ أنواع التقسيم المكتوبة وكتابة المستند، وتحذف الحروف حين تكون الكتابة متّصلة، وتجعل الكلمات حدًّا أدنى للنتيجة — لأن مصدرًا لم يطلب إلا الحروف كان سينقسم إلى لا شيء البتّة، والتأثير الذي لا يجد أجزاءً لا يتحرّك.

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

export const JOINED_SCRIPT_LANGS = Object.freeze(['ar'])
 
export function isJoinedScript({ lang = '' } = {}) {
  const tag = String(lang).slice(0, 2).toLowerCase()
  return JOINED_SCRIPT_LANGS.includes(tag)
}
 
function trimmed(type) { return type.trim() }
function notChars(type) { return type && type !== 'chars' }
 
export function splitTypesFor(raw, script = {}) {
  const types = splitTypesFrom(raw)
  if (!isJoinedScript(script)) return types
  const kept = types.split(',').map(trimmed).filter(notChars)
  // المصدر الذي يطلب الحروف وحدها كان سينقسم إلى لا شيء البتّة،
  // والتأثير الذي لا يجد أجزاءً لا يتحرّك.
  return (kept.length ? kept : ['words']).join(', ')
}

ثلاثة تأثيرات تستهلك الأجزاء، وكلٌّ منها يتدهور على نحو مختلف. فتدحرج الحروف ومسارات البطل المشدودة إلى التمرير تتراجع عبر ترتيب موثَّق — حروف، ثم كلمات، ثم أسطر، ثم لا شيء — فتتدحرج على المستند العربي كلمات كاملة وتنساب كذلك. أما مسح الشكل البيضوي فيحترس بدل أن يتراجع، فيبقى البيضوي يفتح والأسطر تسافر، ولا يغيب إلا التتابع لكل حرف. وورقة الأنماط توافق في محدِّد واحد لا في قاعدتين قد تنحرف إحداهما عن الأخرى، فتُعلي أيّ وحدة وُجدت.

والتكلفة الصادقة هي حجم الحبيبة (grain). تحمل الصفحة الرئيسية الإنجليزية 187 حرفًا موزَّعة على 28 كلمة، أي 6.68 جزءًا للكلمة مشتقًّا من مجاميع الموقع كلّه لا مقيسًا رابطًا رابطًا، ويتتابع التدحرج 0.02 ثانية لكل جزء — فنصّ لاتيني من ثمانية حروف يتتابع على 0.14 ثانية، بينما نصّ عربي من كلمة واحدة له جزء واحد ولا تتابع فيه أصلًا. التأثير ينجو، وتخشُن حبيبته بنحو سبعة أضعاف. والكلمة هي الوحدة التي يدركها القارئ العربي على أي حال.

ثم كشف تغيير الوحدة عيبًا ثانيًا لم يبلّغ عنه أحد. كان التدحرج يسافر ناقص مئة في المئة من صندوق الحرف، بينما كانت الورقة العربية قد وسّعت صندوق سطر النصّ إلى 1.55 وأنزلت التوأم الذي يقصده التدحرج إلى 2em — فكانت الكلمة الداخلة تحطّ 0.45em تحت الخارجة، في كل رابط عربي في الموقع. وصار التدحرج الآن يقرأ إزاحة التوأم من قيمة text-shadow المحسوبة بدل أن يفترض صندوق حرف، ويحتفظ بالقيم المسجَّلة حدًّا أدنى فقط للعناصر التي لا ترسم توأمًا.

وقيمة 1.55 ليست تفضيلًا بل حدٌّ أدنى محسوب، وحسابه في الحدّ الأدنى المقيس لارتفاع السطر العربي.

تقرأ البوابة كتابة المستند مرة واحدة، من العنصر الجذر، ولا تعود إليها. وإلا لكانت 55 مصدرًا في الصفحة الرئيسية 55 قراءة لحقيقة واحدة كتبها البناء على المستند ولا تتغيّر بعده — و55 فرصة لقراءتها على نحو مختلف. وهذا صحيح من جهة الكلفة وصحيح من جهة الاتّساق، ويجعل الفحص سؤالًا عن المستند لا عن التشغيلة.

وهذا قيد حقيقي له عواقب في الاتجاهين، وذِكره خير من إخفائه.

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

وذلك المقطع العربي الوحيد داخل مستند لاتيني هو أيضًا ما يقرّر كيف يُحمَّل الخط العربي — التقاط مقطع عربي واحد بـ unicode-range.

العطل الثاني حقيقي، وليس ذنب العربية، وله علاج. تقول CSS Writing Modes Level 4 إن كل الصناديق السطرية الذرّية عدا العناصر السطرية المستبدَلة تُعامَل معاملة المحارف المحايدة دائمًا. وتقسيم الحروف يحوّل كل حرف إلى صندوق سطري ذرّي، فتصير الكلمة اللاتينية داخل فقرة من اليمين إلى اليسار مقطعًا من محايدات — والمقطع المحايد يأخذ اتجاه الفقرة. ولا تستطيع خوارزمية الاتجاهين إنقاذه، لأن كل حرف صار مقطعًا بذاته ولم يبقَ للخوارزمية ما تُبقيه معًا.

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

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

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

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

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

والبوابة التي تمسكه اليوم مقصورة على المرشَّح عن قصد، وهذا ما يستحق الدفاع عنه لا الاعتذار عنه. فكل بوابة أخرى في ذلك المجلد تقارن البناء الجديد بالنسخة المرجعية؛ وهذه لا تستطيع، لأن الصفحات العربية في المرجع تنشر الخطّين اللذين استُبدلا عمدًا. والمقارنة التي أُبطل أساسها عن قصد ليست تغطية — بل جولة حمراء خلف صفّ استثناء دائم.

والافتراض الحامل سطر واحد: المستند العربي فيه صفر عقدة حرف، والإنجليزي فيه أكثر من صفر. والفحص المرافق يتأكد أن المستند العربي ما زال فيه ما يُحرَّك، ويبلّغ عن 26 كلمة و43 سطرًا. والمسارات تأتي من بيان المسارات المنشور لا من قائمة مكتوبة في الشيفرة، فالمسار الذي يُضاف إلى الموقع مسار تغطّيه البوابة دون أن يتذكّر أحد إضافته — الجولة المقتبسة هنا مسحت 20 مسارًا عربيًّا، والبيان يعلن 19 اليوم لأن صفحة مشروع حُذفت منذ ذلك الحين.

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

ونشر ثلاث لغات من مصدر واحد أحد الأمور الأربعة التي بُني عليها هذا الموقع — التخصّصات الأربعة.