وثائق CSS قابلة للتشغيل: line-height في CSS

Q: هل يجب أن تكون لـ line-height وحدة؟

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

Q: كيف أغيّر تباعد الأسطر في HTML؟

لا توجد في HTML سمة لتباعد الأسطر. استخدم خاصية CSS، مثلًا لتباعد مزدوج.

ماذا تفعل line-height

تضبط line-height ارتفاع كل سطر من النص. الفرق بين ذلك الارتفاع والارتفاع الذي يحتاجه الخط نفسه يُقسم نصفين ويُضاف فوق الحروف وتحتها، وهكذا تتحكم في المسافة بين الأسطر.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Line height</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 16px; color: #111827; }
    .row { display: flex; gap: 16px; align-items: flex-start; }
    p { margin: 0; width: 200px; padding: 8px; background: #e5e7eb; }
    .tight { line-height: 1; }
    .comfy { line-height: 1.5; }
    .double { line-height: 2; }
  </style>
</head>
<body>
  <div class="row">
    <p class="tight">line-height: 1. Lines touch and long text is hard to follow.</p>
    <p class="comfy">line-height: 1.5. Comfortable spacing for a paragraph.</p>
    <p class="double">line-height: 2. Double spacing, like a draft.</p>
  </div>
</body>
</html>

الفقرات الثلاث تستخدم خطًا بحجم 16px. ارتفاع الأسطر 16px و24px و32px.

القيم: بلا وحدة، طول، نسبة مئوية، normal

القيمة	مثال	ارتفاع السطر لنص بحجم 16px	يرثها الأبناء على شكل
رقم	`1.5`	24px	الرقم نفسه (1.5)، يُعاد حسابه لكل عنصر
طول	`24px`، `1.5em`، `1.5rem`	24px	الطول المحسوب (24px)
نسبة مئوية	`150%`	24px	الطول المحسوب (24px)
`normal`	`normal`	من الخط، غالبًا نحو 1.2	`normal`

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

لماذا القيمة بلا وحدة هي الخيار الافتراضي الصحيح

ارتفاع السطر 1.5em أو 150% يتحول إلى بكسلات على الأب، ويرث الأبناء تلك البكسلات. فيحصل الابن ذو الخط الأكبر على أسطر أقصر من حروفه. أما القيمة بلا وحدة 1.5 فتُورَّث كرقم وتُضرب في حجم خط كل ابن.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Unitless vs em</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; color: #111827; }
    .box { width: 220px; padding: 8px; margin-bottom: 12px; background: #e5e7eb; }
    .em { line-height: 1.5em; }       /* 21px, inherited as 21px */
    .unitless { line-height: 1.5; }   /* inherited as 1.5 */
    h2 { font-size: 32px; margin: 0; }
  </style>
</head>
<body>
  <div class="box em">
    <!-- line-height: 1.5em -->
    <h2 id="em-h">A heading that wraps</h2>
  </div>
  <div class="box unitless">
    <h2 id="num-h">A heading that wraps</h2>
  </div>
  <p id="out"></p>
  <script>
    const lh = (id) => getComputedStyle(document.getElementById(id)).lineHeight;
    document.getElementById('out').textContent =
      'em box heading: ' + lh('em-h') + ', unitless box heading: ' + lh('num-h');
  </script>
</body>
</html>

العنوانان كلاهما يلتف على سطرين. الأول يرث أسطرًا بارتفاع 21px لحروف بحجم 32px، فتتداخل أسطره. والثاني يحصل على أسطر بارتفاع 32 × 1.5 = 48px. اضبط line-height مرة واحدة على body كرقم، ولن تحتاج إليها معظم الصفحات مرة أخرى.

جرّب القيم بنفسك

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Line height tester</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    #sample { width: 320px; margin-top: 12px; padding: 8px; background: #e5e7eb; }
  </style>
</head>
<body>
  <label>line-height: <input id="val" value="1.5" size="12"></label>
  <p id="sample">Line height changes the space between the lines of this paragraph. Type a number, a length or a percentage and watch the gaps change.</p>
  <p><code id="out"></code></p>
  <script>
    const sample = document.getElementById('sample');
    const input = document.getElementById('val');
    const show = () => {
      sample.style.lineHeight = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(sample).lineHeight;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

جرّب 1 و2 و30px و200% وnormal. يعرض Chrome القيمة normal ككلمة لا كقيمة بالبكسل، لأن حجمها يأتي من الخط.

قيم جيدة لنص مريح للقراءة

نص الجسم: من 1.4 إلى 1.6. الأسطر الأطول تحتاج إلى ارتفاع سطر أكبر كي تجد العين بداية السطر التالي.
العناوين: من 1.1 إلى 1.3. النص الكبير بتباعد 1.5 يبدو كأسطر منفصلة لا كعنوان واحد.
الأزرار والتسميات ذات السطر الواحد: من 1 إلى 1.25، مع حشو للارتفاع.

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

توسيط سطر واحد من النص عموديًا

حين يحتوي الصندوق على سطر واحد بالضبط، فإن line-height مساوية لارتفاع الصندوق تضع النص في منتصفه العمودي، لأن المسافة الإضافية تُقسم بالتساوي فوقه وتحته:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Single line centering</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .badge {
      height: 40px;
      line-height: 40px;
      padding: 0 16px;
      width: max-content;
      background: #2563eb;
      color: white;
      border-radius: 20px;
    }
  </style>
</head>
<body>
  <div class="badge" id="badge">One line, centered</div>
</body>
</html>

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

الاختصار font

يضبط الاختصار font الحجم وارتفاع السطر معًا بشرطة مائلة:

body {
  font: 16px/1.5 system-ui, sans-serif; /* size 16px, line-height 1.5 */
}

يعيد الاختصار ضبط كل خاصية خط لا يذكرها (بما فيها line-height إلى normal حين تحذف الجزء الذي بعد الشرطة المائلة)، لذلك اكتبه قبل أي قواعد font-* مفردة.

أخطاء شائعة

استخدام em أو % على حاوية. يرث الأبناء طولًا ثابتًا. استخدم رقمًا بلا وحدة.
height ثابت على صندوق نص. حين يلتف النص أو يكبّر القارئ التباعد، يفيض. دع المحتوى يحدد الارتفاع.
نص جسم متراص جدًا. line-height: 1 تجعل الفقرات صعبة القراءة. ابدأ من 1.5.
توقع أن تضيف line-height مسافة بين الفقرات. هذا دور margin على الفقرات.
الاعتماد على normal. تتغير من خط لآخر، فيتحرك التخطيط حين يتغير الخط.

الأسئلة الشائعة

ماذا تفعل line-height في CSS؟

تضبط ارتفاع كل صندوق سطر في النص. المسافة الإضافية التي تتجاوز ارتفاع الخط نفسه تُقسم بالتساوي فوق الحروف وتحتها، لذلك تعني line-height الأكبر مسافة أكبر بين الأسطر.

هل يجب أن تكون لـ line-height وحدة؟

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

ما قيمة line-height الجيدة لنص الجسم؟

بين 1.4 و1.6 للفقرات، ونحو 1.1 إلى 1.3 للعناوين الكبيرة. توصيات WCAG من المستوى AAA تطلب 1.5 على الأقل في الفقرات.

ما هي line-height: normal؟

القيمة الافتراضية. يستخدم المتصفح قيمة من مقاييس الخط نفسه، عادةً نحو 1.2 لكنها تختلف من خط لآخر، فلا يمكن توقعها عبر الخطوط.

كيف أغيّر تباعد الأسطر في HTML؟

لا توجد في HTML سمة لتباعد الأسطر. استخدم خاصية CSS، مثلًا <p style="line-height: 2;"> لتباعد مزدوج.

مفاهيم ذات صلة