حاسبة ارتفاع السطر في CSS

ما ارتفاع السطر في CSS؟

ارتفاع السطر هو المسافة بين خطي أساس سطرين متتاليين من النص. ويمكنك في CSS كتابته بأربع صور — عددًا مجردًا مثل 1.5، أو نسبةً مئوية مثل 150%، أو طولًا مثل 24px، أو وحدةً نسبيةً إلى الخط مثل 1.5em — وعند العنصر الذي تصرّح فيه قد تعطي الأربع النتيجة نفسها تمامًا. فعلى جذر 16 بكسل تعطي كلها 24 بكسل.

وتكفّ عن كونها شيئًا واحدًا ما إن يرثها شيء، وليس الفرق نزوةً من نزوات المتصفحات بل مكتوبٌ في المواصفة. فمعيار CSS 2.2 يعرّف القيمة المحسوبة لارتفاع السطر بأنها القيمة المصرَّح بها إن كانت عددًا، وبأنها القيمة المطلقة إن كانت طولًا أو نسبةً مئوية. فالعدد يُورَث عددًا فيضربه كل متفرع في حجمه هو، أما ما عداه فيُورَث طولًا ثابتًا لا يتغير بعدها أبدًا.

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

كيف تستعملها

1. أدخل حجم الجذر وارتفاع السطر الذي كتبته. القيمة ووحدتها أداتا تحكّم منفصلتان، فتستطيع أن تثبّت القيمة وتغيّر الوحدة وحدها. وهذا أسرع طريق إلى رؤية مقصد الصفحة كلها.
2. اسرد أحجام الخطوط التي تظهر في صفحتك. العناوين والتعليقات وكل ما ليس بحجم الجذر. والقيم الافتراضية متوالية أحجام معتادة، فلك أن تدعها كما هي لترى شكل المشكلة.
3. انظر عمود النسبة ثم بدّل الوحدة إلى «بلا وحدة». كل سطر مؤشَّر بالتلامس صندوقُ سطره لا يزيد على نصّه هو. والانتقال إلى عدد مجرد يعيد حساب كل سطر على حجمه هو، فتختفي التأشيرات.

لماذا ليست 150% هي 1.5

خذ القيم الافتراضية في الصفحة: جذر 16 بكسل مع line-height: 150%، ومتوالية أحجام هي 16 و20 و25 و31 و39 و49 و61 بكسل. تُحلّ النسبة المئوية مرةً واحدة، على الجذر، فتصير 24 بكسل. ثم ترث الأحجام السبعة كلها 24 بكسل — لا 150% من أنفسها، بل أربعةً وعشرين بكسلًا صمّاء.

وعند 16 بكسل تكون النسبة 1.5، وهي ما طلبت. وعند 25 بكسل تصير 0.96، والنسبة دون الواحد تعني أن صندوق السطر أقصر من النص الذي فيه، فتتراكب السطور المتتالية فعلًا. وعند 61 بكسل تصير النسبة 0.39: إذ ما زال العنوان ينال 24 بكسلًا من صندوق السطر لنصٍّ ارتفاعه 61 بكسلًا. فخمسة من الأحجام السبعة تنتهي عند 1.0 أو دونه، وستة من السبعة تقع دون 1.5 التي يطلبها المعيار 1.4.12 من WCAG لنص الفقرات.

واكتب 1.5 بلا وحدة فلا يتغير شيء آخر: ينال 16 بكسل أربعةً وعشرين، وينال 25 بكسل 37.5، وينال 61 بكسل 91.5. وكل سطر نسبته 1.5. ولا يتراكب شيء، لأن كل عنصر يجري ضربه بنفسه.

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

والذي يجعل هذا ينجو من مراجعة الشفرة أن التصريحين لا يُفرَّق بينهما حقًّا حيث كتبتهما. فبمسحٍ لكل أحجام المتفرعات من 8 بكسل إلى 96، تتفق 1.5 و150% عند حجم واحد فقط — الجذر — وتختلفان في الأحجام الـ176 الأخرى. فنص المتن يبدو سليمًا، فيبدو التصريح سليمًا.

حدود معلنة

وحدة em طول، فتسلك هنا سلوك النسبة المئوية تمامًا، وrem طول أيضًا. ولا تختلف الثلاث إلا فيما تُحلّ عليه: فـem والنسبة المئوية تستعملان حجم خط العنصر المصرِّح، أما rem فتستعمل الجذر دائمًا. فإن صرّحت عند الجذر — وهو موضعها المعتاد — انهارت الثلاث إلى العدد نفسه، ولهذا بالذات يفوت هذا الفرق بهذه السهولة.

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

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

وأخيرًا، النسبة فوق الواحد ليست مريحةً بالضرورة. فـ1.05 تجتاز اختبار التراكب ويبقى النص عسيرَ القراءة. فتأشيرة التصادم أرضيةٌ لا توصية.

لماذا هي مجانية؟

هي حساب يجري في متصفحك. ولا خادم يقوم بالعمل، فلا شيء يُحاسَب عليه ولا حساب يُنشأ.

ولا يُرفع شيء ولا يُحفظ شيء. أعد تحميل الصفحة تجدها قد نسيت إعداداتك.