الفرق بين المراجعتين ل"HTML/pre"

المراجعة الحالية بتاريخ 09:21، 18 فبراير 2018

يُمثِّل العنصر <pre> نصًا منسقًا مسبقًا (preformatted text)، والنص الموجود داخل هذا العنصر يُعرَض بخطٍ ذي عرضٍ ثابت (monospaced font) كما هو مكتوب في الملف المصدري تمامًا، وستُعرَض الفراغات الموجودة كما هي.

مثال عن استخدام العنصر <pre> لعرض شيفرة CSS بسيطة:

<!-- شيفرة CSS -->
<pre>
body {
  color:red;
}
</pre>

بطاقة العنصر

تصنيفات المحتوى	محتوى تنظيمي.
المحتوى المسموح	محتوى عادي.
الوسم المختصر	لا يمكن حذف أيّ من وسمَي البداية أو النهاية.
العناصر الأب	أي عنصر يقبل المحتوى التنظيمي.
واجهة DOM	`HTMLPreElement`

دعم المتصفحات

Chrome	Firefox	Edge	Safari	Opera
مدعوم	مدعوم	مدعوم	مدعوم	مدعوم

الخاصيات

يمكن استخدام الخاصيات العامة في هذا العنصر.

أصبحت الخاصيتان cols و width (اللتان تحددان العدد الأمثل للمحارف في السطر) مهملتين في HTML5 ولا يجب استخدامهما في الصفحات الحديثة.

التنسيق الافتراضي

أغلبية المتصفحات تعرض العنصر <pre> مع ضبط الخاصية display إلى block، والخاصية font-family إلى monospace (خط ذو عرض ثابت)، والخاصية white-space إلى pre، وجعل الهامش margin العلوي والسفلي مساويًا إلى 1em والهامش الأيمن والأيسر مساويًا إلى 0:

pre {
  display: block;
  font-family: monospace;
  white-space: pre;
  margin: 1em 0;
}

مصادر ومواصفات

معيار HTML Living Standard.
مواصفة HTML5.
مواصفة HTML 4.01، أهملت هذه المواصفة الخاصية cols.

@@ سطر 3: / سطر 3: @@
 مثال عن استخدام العنصر <code><nowiki><pre></nowiki></code> لعرض شيفرة CSS بسيطة: <syntaxhighlight lang="html">
-<!-- Some example CSS code -->
+<!-- شيفرة CSS -->
 <pre>
 body {
@@ سطر 12: / سطر 12: @@
 </syntaxhighlight>
+== بطاقة العنصر ==
 {| class="wikitable" style="width: 100%;"
 |-
@@ سطر 49: / سطر 50: @@
 أصبحت الخاصيتان <code>cols</code> و <code>width</code> (اللتان تحددان العدد الأمثل للمحارف في السطر) مهملتين في HTML5 ولا يجب استخدامهما في الصفحات الحديثة.
+== التنسيق الافتراضي ==
+أغلبية المتصفحات تعرض العنصر <code><nowiki><pre></nowiki></code> مع ضبط الخاصية <code>[[CSS/display|display]]</code> إلى <code>block</code>، والخاصية <code>[[CSS/font-family|font-family]]</code> إلى <code>monospace</code> (خط ذو عرض ثابت)، والخاصية <code>[[CSS/white-space|white-space]]</code> إلى <code>pre</code>، وجعل الهامش <code>[[CSS/margin|margin]]</code> العلوي والسفلي مساويًا إلى <code>1em</code> والهامش الأيمن والأيسر مساويًا إلى <code>0</code>:<syntaxhighlight lang="css">
+pre {
+  display: block;
+  font-family: monospace;
+  white-space: pre;
+  margin: 1em 0;
+}
+</syntaxhighlight>
 ==مصادر ومواصفات==