وسم <pre> في HTML: شرح عملي مع أمثلة واستخدامات مهمة

ما هو وسم <pre> في HTML؟

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

في الوضع الافتراضي، تتجاهل المتصفحات معظم أنواع المسافات البيضاء داخل HTML، مثل المسافات المتعددة، والانتقال إلى سطر جديد، وTab. لكن عند استخدام وسم <pre>، يتم الحفاظ على هذا التنسيق كما هو.

عادةً ما يُعرض النص داخل <pre> بخط من نوع monospace، ويمكن تعديل ذلك بسهولة عبر CSS إذا رغبت في تخصيص المظهر.

الصيغة الأساسية لوسم <pre>

مثل كثير من عناصر HTML، يحتاج وسم <pre> إلى وسم إغلاق وهو </pre>.

<pre>Hello World, this text is inside a pre tag, all white spaces are preserved</pre>

النتيجة تكون الحفاظ على كل المسافات والتنسيقات المكتوبة داخل الوسم كما هي.

كيف يتعامل HTML مع المسافات بدون وسم <pre>؟

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

مثال على المسافات بدون <pre>

<div>
  <p>There are extra white spaces in the next two words, but they are ignored by the browser: Hello       World</p>
</div>

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

p, pre {
  font-size: 1.2rem;
}

الحفاظ على المسافات باستخدام وسم <pre>

عند وضع النص داخل وسم <pre>، تظهر المسافات المتعددة كما كُتبت تماماً، وهو ما يجعله مثالياً لعرض التنسيقات الحساسة.

مثال على المسافات مع <pre>

<div>
  <p>There are extra white spaces in the next two words, made visible by the <code>pre</code> tag:</p>
  <pre>Hello       World</pre>
</div>

استخدام Tab داخل HTML مع وبدون <pre>

علامات Tab تُهمل غالباً في العناصر العادية، لكن عند استخدام <pre> يتم الاحتفاظ بها وعرضها بصرياً.

بدون وسم <pre>

<div>
  <p>There are tabs between the next words, but they're ignored by the browser: I'm		a camper</p>
</div>

مع وسم <pre>

<div>
  <p>There are tabs between the next words, made visible with the <code>pre</code> tag:</p>
  <pre>I'm		a camper</pre>
</div>

فواصل الأسطر مع وبدون وسم <pre>

من أبرز فوائد وسم <pre> أنه يحافظ على الانتقال إلى سطر جديد داخل النص، على عكس العناصر العادية التي قد تعرضه بشكل مختلف.

فواصل الأسطر بدون <pre>

<div>
  <p>There are line breaks between the next words:
I'm
a
camper</p>
</div>

فواصل الأسطر مع <pre>

<div>
  <p>There are line breaks between the next words:</p>
  <pre>I'm
a
camper</pre>
</div>

عرض المقاطع البرمجية باستخدام <pre> و<code>

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

عرض كود بدون وسم <pre>

<div>
  <h3>Some CSS Resets</h3>
  <p>Did you know you can remove the default padding and margin browsers insert onto web pages?</p>
  <code>* { padding: 0; margin: 0; box-sizing: border-box; }</code>
</div>

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

عرض كود مع وسم <pre>

<div>
  <h3>Some CSS Resets</h3>
  <p>Did you know you can remove the default padding and margin browsers insert to web pages?</p>
  <pre><code>* { padding: 0; margin: 0; box-sizing: border-box; }</code></pre>
  <p>Now you know that.</p>
</div>

أفضل ممارسة هنا هي استخدام <pre><code>...</code></pre> عند عرض الأكواد الطويلة، لأن ذلك يحافظ على المحاذاة والمسافات ويجعل القراءة أسهل للمطورين والمتعلمين.

استخدام وسم <pre> في الرسومات النصية

لا يقتصر دور وسم <pre> على الأكواد فقط، بل يمكن استخدامه أيضاً في ما يُعرف بالرسومات النصية أو ASCII Art، حيث تعتمد النتيجة النهائية على ترتيب الأحرف والمسافات بدقة.

رسمة نصية بدون <pre>

<div>
  <p>
^^^^^^^^^^^^^^^^^^^^^
<> <> <> ^ I'm Kolade, ^
<> <> ^ Web developer from ^
<> <> <> ^^^^ Nigeria. ^
<> ^ I'm proud to be a ^
<> ^ Camper. ^
<> <> <> ^^^^^^^^^^^^^^^^^^^^^
<> <> <> <> <> <> <> <> <> <> <> <> <> <> <> <> <> <> <>
  </p>
</div>

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

رسمة نصية مع <pre>

<div>
  <pre>
^^^^^^^^^^^^^^^^^^^^^
<> <> <> ^ I'm Kolade, ^
<> <> ^ Web developer from ^
<> <> <> ^^^^ Nigeria. ^
<> ^ I'm proud to be a ^
<> ^ Camper. ^
<> <> <> ^^^^^^^^^^^^^^^^^^^^^
<> <> <> <> <> <> <> <> <> <> <> <> <> <> <> <> <> <> <>
  </pre>
</div>

مشكلة أشرطة التمرير داخل وسم <pre> وكيفية حلها

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

مثال على المشكلة

<div>
  <pre>These are some lorem texts: Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet rem nam ea nihil fuga doloribus voluptatem sed officiis iusto. Eveniet quaerat sit quisquam consequatur necessitatibus totam placeat, ut unde nesciunt.</pre>
</div>

لحل هذه المشكلة، يمكن استخدام الخاصية white-space في CSS بالقيمة pre-wrap، ما يسمح بالتفاف السطور الطويلة مع الإبقاء على التنسيق الأساسي.

pre {
  white-space: pre-wrap;
}

متى يُفضَّل استخدام وسم <pre>؟

• عند عرض أمثلة برمجية متعددة الأسطر.
• عند الحاجة إلى الحفاظ على المسافات أو علامات Tab.
• في الشروحات التقنية والوثائق البرمجية.
• عند عرض نصوص ذات تنسيق حساس مثل القصائد أو الرسومات النصية.
• في المشاريع التعليمية التي تحتاج إلى مطابقة الشكل المكتوب مع الشكل المعروض.

نصائح عملية لتحسين استخدام <pre>

1. استخدم <code> داخل <pre> عند عرض الأكواد البرمجية.
2. تجنب وضع نصوص طويلة جداً داخل <pre> بدون معالجة التفاف الأسطر.
3. أضف تنسيق CSS مناسباً لتحسين القراءة، مثل لون الخلفية والهوامش الداخلية.
4. اختبر عرض المحتوى على الهاتف، لأن العناصر من هذا النوع قد تسبب تمريراً أفقياً.
5. استخدم الوسم فقط عندما يكون الحفاظ على التنسيق ضرورياً فعلاً، وليس لكل النصوص.

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

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