المسافات في HTML: كيفية إضافة مسافة غير قابلة للكسر باستخدام  

مقدمة: لماذا لا تعمل المسافات المتعددة في HTML كما تتوقع؟

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

في هذا الدليل، ستتعرف على الطريقة الصحيحة لإضافة مسافات متعددة في HTML، كما ستفهم متى تستخدم  ، ومتى يكون من الأفضل الاعتماد على   و .

ما هي الكيانات النصية Character Entities في HTML؟

الكيانات النصية هي صيغ خاصة تُستخدم لعرض رموز قد يعتبرها المتصفح جزءاً من بنية الصفحة بدلاً من كونها نصاً عادياً. على سبيل المثال، الرمزان < و> يُستخدمان عادة لفتح الوسوم وإغلاقها في HTML. لذلك، إذا كتبت هذين الرمزين مباشرة داخل النص، فقد يفسرهما المتصفح على أنهما جزء من وسم وليس محتوى مرئياً.

لحل هذه المشكلة، يمكن استخدام الكيانات التالية:

• < لعرض الرمز <
• > لعرض الرمز >
•   لعرض مسافة غير قابلة للكسر

هذه الكيانات تمنحك تحكماً أدق في طريقة عرض النص داخل المتصفح، خصوصاً في الحالات التي لا تكفي فيها لوحة المفاتيح وحدها.

كيفية إضافة مسافة غير قابلة للكسر باستخدام  

بشكل افتراضي، حتى لو أضفت عشرات المسافات العادية داخل الشيفرة، سيعرض المتصفح مسافة واحدة فقط. وهنا يأتي دور  ، وهو اختصار لعبارة Non-Breaking Space، أي مسافة لا تُدمج بسهولة ولا تسمح بانكسار النص عند موضعها.

مثال بدون استخدام  

في المثال التالي، تمت كتابة النص بمسافات عادية فقط:

<div>
  <p>
    Lemurs are primates found exclusively in the isolated island of Madagascar.
    Lemurs are primates just like apes and monkeys, but they evolved independently and are unique.
    The numbers of lemurs are dwindling due to poaching and other destructive human activities.
    Lemurs are worth more than $2 Trillion. In fact, no amount of money can ever buy one.
    So, protect lemurs!
  </p>
</div>

ولتوضيح النتيجة بصرياً، يمكن استخدام تنسيقات CSS التالية:

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  max-width: 800px;
  margin: 0 auto;
  font-size: 2rem;
}

span {
  background-color: #2ecc71;
}

مثال باستخدام   لإضافة مسافات متعددة

إذا أردت إنشاء عدد واضح من المسافات داخل السطر، يمكنك تكرار   حسب الحاجة:

<div>
  <p>
    Lemurs &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; are primates found exclusively in the isolated island of Madagascar.
    Lemurs are primates just like apes and monkeys, but they evolved independently and are unique.
    The numbers of lemurs are dwindling due to poaching and other destructive human activities.
    Lemurs are worth more than $2 Trillion. In fact, no amount of money can ever buy one.
    So, &nbsp; &nbsp; &nbsp; &nbsp; protect lemurs!
  </p>
</div>

في هذا المثال، أُضيفت خمس مسافات بين أول كلمتين، وأربع مسافات قبل العبارة الأخيرة. ولأن كل   يمثل مسافة واحدة، أصبح بالإمكان التحكم الدقيق في شكل النص داخل الصفحة.

متى نستخدم   و  بدلاً من تكرار  ؟

إذا كنت بحاجة إلى عدد أكبر من المسافات، فإن تكرار   مرات كثيرة قد يجعل الشيفرة أقل أناقة. لذلك، يوفر HTML بدائل مفيدة:

•   وتمثل غالباً مسافتين
•   وتمثل غالباً أربع مسافات

يمكنك الجمع بينها وبين   للحصول على العدد المطلوب من الفراغات بطريقة أوضح:

<div>
  <p>
    Lemurs &emsp; &nbsp; are primates found exclusively in the isolated island of Madagascar.
    Lemurs are primates just like apes and monkeys, but they evolved independently and are unique.
    The numbers of lemurs are dwindling due to poaching and other destructive human activities.
    Lemurs are worth more than $2 Trillion. In fact, no amount of money can ever buy one.
    So, &ensp; &ensp; protect lemurs!
  </p>
</div>

في السطر السابق:

• تم استخدام   مرة واحدة مع   مرة واحدة للحصول على خمس مسافات
• وتم استخدام   مرتين للحصول على أربع مسافات

لماذا تعتبر المسافة غير القابلة للكسر مهمة في تنسيق المحتوى؟

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

من أبرز الأمثلة على ذلك:

• المبالغ المالية مثل $2 Trillion
• التواريخ
• الاختصارات والأحرف الأولى
• الوحدات القياسية مثل 10 kg
• الأسماء المركبة أو المصطلحات التي لا يُفضّل فصلها

مثال على انكسار النص دون  

في الشيفرة التالية، قد ينفصل المبلغ المالي إلى سطرين مختلفين، وهو ما يضعف قابلية القراءة:

<div>
  <p>
    Lemurs are primates found exclusively in the isolated island of Madagascar.
    Lemurs are primates just like apes and monkeys, but they evolved independently and are unique.
    Th numbers of lemurs are dwindling due to poaching and other destructive human activities.
    Lemurs are worth more than <span>$2 Trillion.</span>
    In fact, no amount of money can ever buy one.
    So, protect lemurs!
  </p>
</div>

مع تنسيقات CSS التالية:

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  max-width: 800px;
  margin: 0 auto;
  font-size: 2rem;
}

span {
  background-color: #2ecc71;
}

الحل: استخدام   لمنع الانفصال بين الكلمات

يمكن معالجة المشكلة بسهولة عبر وضع   بين الكلمتين:

<div>
  <p>
    Lemurs are primates found exclusively in the isolated island of Madagascar.
    Lemurs are primates just like apes and monkeys, but they evolved independently and are unique.
    Th numbers of lemurs are dwindling due to poaching and other destructive human activities.
    Lemurs are worth more than <span>$2 &nbsp; Trillion.</span>
    In fact, no amount of money can ever buy one.
    So, protect lemurs!
  </p>
</div>

بهذه الطريقة، سيُعرض المبلغ كاملاً كوحدة واحدة، مما يمنح النص مظهراً أكثر احترافية ويقلل من احتمالات إرباك القارئ.

أفضل الممارسات عند استخدام المسافات في HTML

• استخدم   عندما تحتاج إلى منع انكسار كلمة أو عبارة بين سطرين.
• لا تفرط في استخدام المسافات لإنشاء محاذاة بصرية؛ فالأفضل غالباً الاعتماد على CSS مثل margin وpadding.
• استعمل   و  عندما تريد كتابة شيفرة أوضح بدلاً من تكرار   مرات كثيرة.
• اختبر النتيجة على الشاشات الصغيرة، لأن سلوك التفاف النص قد يختلف بحسب عرض العنصر.
• احرص على استخدام المسافات غير القابلة للكسر في المواضع التي تؤثر فعلاً في الفهم، مثل الأسعار والوحدات والتواريخ.

الخلاصة التقنية

تُعد   من أبسط الأدوات وأكثرها فاعلية في HTML عندما تحتاج إلى التحكم في المسافات أو منع انكسار أجزاء معينة من النص. ومع أن استخدامها مفيد جداً في حالات محددة، فإن الحلول التصميمية العامة يجب أن تعتمد على CSS لا على تكرار المسافات داخل المحتوى. باختصار: استخدم   لتحسين القراءة، و  و  لتقليل التكرار، واحتفظ دائماً ببنية نظيفة وسهلة الصيانة داخل الشيفرة.