إدارة الواصلات باستخدام CSS

Joe Medley
Joe Medley

في العديد من اللغات المكتوبة، من الممكن تقسيم السطور بين المقاطع وكذلك بين الكلمات. ويتم ذلك غالبًا لكي يتم وضع المزيد من الأحرف في سطر من النص بهدف تقليل عدد الأسطر في منطقة النص، وبالتالي توفير المساحة. في هذه اللغات، تتم الإشارة إلى الفاصل بصريًا باستخدام واصلة ('-').

يحدِّد مستوى 3 من وحدة نص CSS سمة الواصلات للتحكّم في حالات عرض الواصلات للمستخدمين وسلوكها عند عرضها. بدءًا من الإصدار 55، ينفِّذ Chrome سمة الواصلات. وفقًا للمواصفات، تحتوي سمة الواصلات على ثلاث قيم: none وmanual وauto. لتوضيح ذلك، نحتاج إلى استخدام واصلة لينة (­) كما هو موضّح في المثال التالي:

Google ipsum dolor sit amet, consectetur adipiscing e­lit.

علامة الفاصل الناعم هي علامة لن تظهر إلا عند وقوعها في نهاية الحدّ. تعتمد طريقة عرض هذا الواصلة في الإصدار 55 من Chrome أو الإصدارات الأحدث على قيمة سمة CSS hypens.

-webkit-hyphens: manual;
hyphens: manual;

يؤدي الجمع بين هذه العوامل إلى الحصول على نتيجة مثل هذه:

لقطة شاشة لخط واحد

يُرجى ملاحظة أنّ الواصلة الناعمة غير مرئية. في جميع الحالات، عندما تتلاءم كلمة تحتوي على الواصلة الناعمة في سطر واحد، ستكون الواصلة غير مرئية. الآن، لنطّلِع على طريقة عمل القيم الثلاث للواصلة.

عدم استخدام أيّ منها

في المثال الأول، تم ضبط سمة الواصلات على none. ويؤدي ذلك إلى منع عرض المدّة الهادئة. يمكنك التأكّد من ذلك من خلال تعديل حجم النافذة لكي لا تلائم الكلمة "elit" السطر المرئي من النص.

Google ipsum dolor sit amet, consectetur adipiscing e­lit.

استخدام الدليل

في المثال الثاني، تم ضبط خاصية الواصلات على manual، ما يعني أنّ الواصلة الخفيفة لن تظهر إلا عندما يقطع الهامش الكلمة "elit". يمكنك مجددًا confirm this by adjusting the window size.

Google ipsum dolor sit amet, consectetur adipiscing e­lit.

استخدام الإعداد التلقائي

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

Google ipsum dolor sit amet, consectetur adipiscing elit.