قصّ النصّ

القطع يقع عند النهاية المنطقية للسطر، وهي الحافّة اليسرى في العربية، و text-overflow يتكفّل بذلك وحده دون قاعدة إضافية منك. والذي يُفسده هو direction: ltr التي يضعها كثيرون على الحاوية لضبط شكل الأرقام أو أسماء الملفّات: نهاية السطر تنتقل إلى اليمين، فتأكل النقاط أوّل الجملة العربية وتُبقي آخرها. وإذا كانت القيمة قد تأتي بأي اتجاه، ضع dir="auto" أو unicode-bidi: plaintext على العنصر المقصوص نفسه؛ ولا يكفي لفّ القيمة بـ <bdi> هنا لأنه يعزل ترتيبها ولا ينقل النقاط، فالحافّة التي تُقصّ تتبع اتجاه الكتلة.

بعض التصاميم تستبدل النقاط بتلاشٍ تدريجي عند الحافّة، وهذا الشكل لا ينعكس من تلقاء نفسه لأن التدرّجات لا تقبل الكلمات المنطقية: في linear-gradient لا يوجد إلّا to right و to left، ولا وجود لـ to inline-end. فالقناع المكتوب to right يبقى على اليمين في العربية بينما القطع يقع على اليسار، فترى تلاشياً فوق نصّ سليم وحرفاً مبتوراً بلا تمويه. اكتب قاعدة صريحة داخل [dir="rtl"] تقلبه إلى to left، وينطبق الأمر نفسه على mask-image. والمساحة المحجوزة للقناع تُكتب padding-inline-end، فـ padding-right ثابتة تترك الفجوة عند الحافّة الخطأ.

سلسلة JavaScript مخزّنة بالترتيب المنطقي دائماً: أوّل عنصر فيها هو أوّل محرف يُقرأ، في العربية كما في الإنجليزية. فابنِ القطع من الوسط على هذا الترتيب مباشرةً، ولا تحاول «تصحيحه» بعكس السلسلة أو بالاعتماد على ما تراه على الشاشة، لأن الترتيب البصري ناتج خوارزمية bidi لحظة الرسم وليس طريقة تخزين النصّ. والفخّ الحقيقي أن موضع الفصل قد يقع داخل عنقود رسومي واحد، فتنفصل الشدّة أو الفتحة عن حرفها وتظهر معلّقة على النقاط؛ قسّم بـ Intl.Segmenter بدقّة grapheme قبل أن تقصّ.

text-overflow يحذف ما وقع عند الطرف البصري للسطر بعد أن ترتّبه خوارزمية bidi، والطرف البصري ليس بالضرورة آخر السلسلة منطقياً. ضع اسم ملفّ لاتينياً مثل Q4-report-final.pdf في آخر جملة عربية ودع السطر يفيض: القطع يبدأ من أوّل حروف الاسم، لأن المقطع اللاتيني يُرسم من اليسار إلى اليمين بينما ينتهي السطر عند اليسار، فيبقى الامتداد ظاهراً ويضيع الجزء الذي كان يفرّق بين ملفّ وآخر. لُفّ الاسم في <bdi> فهو يعزله ويحمل dir="auto" معاً، فيُحسب ترتيبه داخل حدوده وتتوقّف علامات الترقيم المجاورة عن الانتقال عبره؛ وإذا كان أوّل الاسم هو المهمّ فاقطع من الوسط في JavaScript ولا تترك الأمر لـ text-overflow.

الحصر بـ line-clamp يقصّ كل ما زاد عن ارتفاع مشتقّ من line-height، والحروف العربية تنزل تحت خطّ الأساس أكثر من اللاتينية: ذيول ج و ح و ي والنقاط تحتها. ومع line-height: 1.2 المألوف في الفقرات الإنجليزية يحلق overflow: hidden أسفل السطر الأخير فيبدو النصّ مبتوراً من تحت. ابدأ من line-height: 1.7 أو 1.8 في الفقرة العربية، وتذكّر أن الارتفاع الكلّي يكبر بنفس النسبة، فقد تحتاج سطرين حيث كانت الإنجليزية ثلاثة لتبقى البطاقة بنفس الطول.