كلمتان في CSS تصلحان العناوين القبيحة: text-wrap

تنهي تصميم قسم hero نظيفًا، ثم يلتف العنوان فتبقى كلمة واحدة بائسة في السطر الأخير. الحل المعتاد هو <br> ثابت أو مسافة غير قابلة للكسر — وهو حل ينهار بمجرد تغيّر النص أو تصغير الشاشة. يوجد الآن حل حقيقي، وهو قيمتان في CSS لا يزال معظم المطورين لا يلجؤون إليهما.

balance: للنصوص القصيرة مثل العناوين

تطلب text-wrap: balance من المتصفح أن يوزّع عدد الأحرف بالتساوي على كل الأسطر، فينقسم العنوان ذو السطرين إلى نصفين متقاربين بدل أن يترك كلمة يتيمة في السطر الثاني.

h1, h2, h3, .card-title {
  text-wrap: balance;
}

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

pretty: لنصوص المحتوى

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

p, li, figcaption {
  text-wrap: pretty;
}

القاعدة العملية: balance للعناوين وpretty للفقرات. استخدام balance في المقالات الطويلة مجرد إهدار لوقت المتصفح، وستصطدم بحد الأسطر على أي حال.

اضبطها مرة واحدة على مستوى المشروع

أضع هذا في الطبقة الأساسية (base layer) ليحصل كل مشروع عليه دون تفكير:

@layer base {
  :is(h1, h2, h3, h4, blockquote) {
    text-wrap: balance;
  }
  :is(p, li, dd) {
    text-wrap: pretty;
  }
}

ولأنها CSS عادية مع تدهور سلس (graceful degradation)، فالمتصفحات التي لا تدعمها تعود للالتفاف العادي — لا شيء يتعطل، وكل ما تخسره هو اللمسة الجمالية. هذا يجعلها إضافة بلا مخاطر لأي نظام تصميم، بما في ذلك قوالب المتاجر الإلكترونية التي أبنيها على Salla وZid، حيث تلتف عناوين المنتجات بشكل لا يمكن توقعه عبر آلاف الأصناف.

الخلاصة

احذف وسوم <br> اليدوية من العناوين وأضف سطرين إلى ملف الأنماط الأساسي. text-wrap: balance للعناوين وtext-wrap: pretty للنصوص. ستحصل على التفاف صحيح طباعيًا يصمد أمام تغيير النص والترجمة وكل أحجام الشاشات — مجانًا.