متن از پیش فرمت شده در HTML – المان <pre>

المان <pre> در HTML برای نمایش متن از پیش فرمت شده (Preformatted text) به کار می‌رود. در واقع متن داخل المان <pre> دقیقا مطابق با شیوه نگارش در کد اچ‌تی‌ام‌ال با حفظ فاصله ها و خط های موجود در متن رندر می‌شود.

برای حفظ فرمت متن کافیست متن موردنظر را مابین تگ شروع <pre> و تگ پایان </pre> قرار دهید.

جزئیات المان <pre> و حفظ فرمت متن در HTML

در HTML به صورت پیشفرض فاصله های اضافی و ایجاد خطوط جدید داخل متن نادیده گرفته می‌شود. به عنوان مثال پاراگراف زیر را در نظر بگیرید.

<p>فاصله‌های اضافی و خطوط       مختلف داخل متن
در این المان     نادیده گرفته
می‌شوند</p>

این پاراگراف معمولا مشابه با نمونه زیر رندر می‌شود. همانطور که مشاهده می‌کنید در این حالت فاصله های اضافی مابین کلمات و خطوط جدید داخل متن حذف می‌شوند.

حذف فاصله های اضافی و خطوط جدید داخل متن در HTML

اما با قرار دادن متن داخل یک المان <pre> (مشابه با نمونه زیر)، متن به همان شکل اصلی رندر می‌شود.

<pre>فاصله‌های اضافی و خطوط       مختلف داخل متن
در این المان     حفظ
می‌شوند</pre>

نتیجه رندر این المان چیزی مشابه با نمونه زیر خواهد بود.

حفظ فاصله ها و خطوط موجود در متن با کمک المان pre در HTML

نمایش اسکی آرت (ASCII art) و حفظ خطوط و فاصله ها در متون سورس کدها از جمله کاربردهای رایج برای المان <pre> به شمار می‌رود.

ایجاد اسکی آرت و حفظ فاصله و خطوط متن در سورس کد در اچ تی ام ال با کمک المان pre
نمونه‌ای از کد HTML و نتیجه آن برای نمایش سورس کد و ایجاد اسکی آرت با کمک المان <pre>

همانطور که در مثال‌های فوق مشاهده می‌کنید معمولا به صورت پیشفرض، متن داخل المان <pre> با یک فونت تک فاصله (Monospaced font) نمایان می‌شود.

بازگشت به فهرست مجموعه آموزشی HTML

امیرحسین شهسواری

عاشق دنیای رایانه و فناوری به خصوص برنامه نویسی هستم؛ یادگرفتن و البته یاد دادن چیزای جالبی که یاد گرفتم باعث خوشحالیم میشه و از اولویت‌های اصلی زندگیم به حساب میاد. از مدیریت و نوشتن در تک دیک هم واقعا لذت می‌برم :)

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.