HTML / رموز الحدود

الناشر :كودا فوكس -

HTML / رموز الحدود

طريقة عرض رموز الحدود

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

HTML / رموز الحدود


الأحرف التي نستخدمها لعرض الحدود يمكن وضعها بأسلوب عشري (Decimal) أو بأسلوب سداسي عشري (Hexadecimal).

قاعدة عامة

عند استخدام الأسلوب Decimal يجب إضافة &# قبل وضع أحرف الرمز.

عند استخدام الأسلوب Hexadecimal يجب إضافة &#x قبل وضع أحرف الرمز.

كما أنه يُفضّل دائماً وضع فاصلة منقوطة ; بعد كتابة أحرف الرمز وهذا أمر اختياري ولكننا ننصح بفعله.

أمثلة على رموز الحدود

المثال 1: رموز الحدود الأساسية

📋 

<!DOCTYPE html>
<html>
    <head>
		<!-- ليظهر بشكل أوضح CSS يواسطة كود p هنا قمنا بتغيير نوع و حجم خط الوسم -->
        <style>
            p { font-family: Helvetica, Arial, Sans-Serif; font-size: 26px; }
        </style>
    </head>
    <body>
       <p/>المثال الأول<p> <!-- ─ :الرموز التالية جميعها سيتم عرضها هكذا --> 
        <p>&#9472;</p>
        <p>&#x2500;</p>
 <p/>المثال الثاني<p><!-- ━ :الرموز التالية جميعها سيتم عرضها هكذا --> 
        <p>&#9473;</p>
        <p>&#x2501;</p>
 <p/>المثال الثالث<p> <!-- │ :الرموز التالية جميعها سيتم عرضها هكذا --> 
        <p>&#9474;</p>
        <p>&#x2502;</p>
        <p/>المثال الرابع<p><!-- ┃ :الرموز التالية جميعها سيتم عرضها هكذا --> 
        <p>&#9475;</p>
        <p>&#x2503;</p>
    </body>
</html>

هذا المثال يحتوي على رموز الحدود الأساسية: &#9472;, &#9473;, &#9474;, &#9475;.

المثال 2: رموز حدود متقدمة

📋 

 &#9476;  (Box Drawings Light Triple Dash Horizontal) - &#x2504;
 &#9477;  (Box Drawings Heavy Triple Dash Horizontal) - &#x2505;
 &#9478;  (Box Drawings Light Triple Dash Vertical) - &#x2506;
 &#9479;  (Box Drawings Heavy Triple Dash Vertical) - &#x2507;

هذا المثال يحتوي على رموز حدود متقدمة: &#9476;, &#9477;, &#9478;, &#9479;.

جدول رموز الحدود

اسم الرمز الرمز Decimal Hexadecimal الوصف
خط أفقي خفيف ─ &#9472; &#x2500; Box Drawings Light Horizontal
خط أفقي ثقيل ━ &#9473; &#x2501; Box Drawings Heavy Horizontal
خط عمودي خفيف │ &#9474; &#x2502; Box Drawings Light Vertical
خط عمودي ثقيل ┃ &#9475; &#x2503; Box Drawings Heavy Vertical
خط ثلاثي خفيف أفقي ┄ &#9476; &#x2504; Box Drawings Light Triple Dash Horizontal
خط ثلاثي ثقيل أفقي ┅ &#9477; &#x2505; Box Drawings Heavy Triple Dash Horizontal
خط ثلاثي خفيف عمودي ┆ &#9478; &#x2506; Box Drawings Light Triple Dash Vertical
خط ثلاثي ثقيل عمودي ┇ &#9479; &#x2507; Box Drawings Heavy Triple Dash Vertical
خط رباعي خفيف أفقي ┈ &#9480; &#x2508; Box Drawings Light Quadruple Dash Horizontal
خط رباعي ثقيل أفقي ┉ &#9481; &#x2509; Box Drawings Heavy Quadruple Dash Horizontal
خط رباعي خفيف عمودي ┊ &#9482; &#x250A; Box Drawings Light Quadruple Dash Vertical
خط رباعي ثقيل عمودي ┋ &#9483; &#x250B; Box Drawings Heavy Quadruple Dash Vertical
خط خفيف لأسفل وإلى اليمين ┌ &#9484; &#x250C; Box Drawings Light Down And Right
خط خفيف لأسفل وثقيل إلى اليمين ┐ &#9485; &#x250D; Box Drawings Down Light And Right Heavy
خط ثقيل لأسفل وخفيف إلى اليمين └ &#9486; &#x250E; Box Drawings Down Heavy And Right Light
خط ثقيل لأسفل وإلى اليمين ┘ &#9487; &#x250F; Box Drawings Heavy Down And Right
خط خفيف لأسفل وإلى اليسار ┌ &#9488; &#x2510; Box Drawings Light Down And Left
خط خفيف لأسفل وثقيل إلى اليسار ┐ &#9489; &#x2511; Box Drawings Down Light And Left Heavy
خط ثقيل لأسفل وخفيف إلى اليسار └ &#9490; &#x2512; Box Drawings Down Heavy And Left Light
خط ثقيل لأسفل وإلى اليسار ┘ &#9491; &#x2513; Box Drawings Heavy Down And Left
خط خفيف لأعلى وإلى اليمين ┌ &#9492; &#x2514; Box Drawings Light Up And Right
خط خفيف لأعلى وثقيل إلى اليمين ┐ &#9493; &#x2515; Box Drawings Up Light And Right Heavy
خط ثقيل لأعلى وخفيف إلى اليمين └ &#9494; &#x2516; Box Drawings Up Heavy And Right Light
خط ثقيل لأعلى وإلى اليمين ┘ &#9495; &#x2517; Box Drawings Heavy Up And Right
خط خفيف لأعلى وإلى اليسار ┌ &#9496; &#x2518; Box Drawings Light Up And Left
خط خفيف لأعلى وثقيل إلى اليسار ┐ &#9497; &#x2519; Box Drawings Up Light And Left Heavy
خط ثقيل لأعلى وخفيف إلى اليسار └ &#9498; &#x251A; Box Drawings Up Heavy And Left Light
خط ثقيل لأعلى وإلى اليسار ┘ &#9499; &#x251B; Box Drawings Heavy Up And Left
خط خفيف عمودي وإلى اليمين │ &#9500; &#x251C; Box Drawings Light Vertical And Right
خط عمودي خفيف وثقيل إلى اليمين ┃ &#9501; &#x251D; Box Drawings Vertical Light And Right Heavy
خط ثقيل لأعلى وإلى اليمين لأسفل خفيف ┌ &#9502; &#x251E; Box Drawings Up Heavy And Right Down Light
خط ثقيل لأسفل وإلى اليمين لأسفل خفيف ┐ &#9503; &#x251F; Box Drawings Down Heavy And Right Up Light
خط عمودي ثقيل إلى اليمين خفيف └ &#9504; &#x2520; Box Drawings Vertical Heavy And Right Light
خط عمودي خفيف لأسفل وإلى اليمين ┘ &#9505; &#x2521; Box Drawings Down Light And Right Up Heavy
خط لأعلى وإلى اليمين لأسفل خفيف ┌ &#9506; &#x2522; Box Drawings Up Light And Right Down Heavy
خط ثقيل عمودي لأسفل وإلى اليمين ┐ &#9507; &#x2523; Box Drawings Heavy Vertical And Right
خط عمودي خفيف لليسار │ &#9508; &#x2524; Box Drawings Light Vertical And Left
خط عمودي خفيف وثقيل إلى اليسار ┃ &#9509; &#x2525; Box Drawings Vertical Light And Left Heavy
خط ثقيل لأعلى وإلى اليسار لأسفل خفيف ┌ &#9510; &#x2526; Box Drawings Up Heavy And Left Down Light
خط ثقيل لأسفل وإلى اليسار لأسفل خفيف ┐ &#9511; &#x2527; Box Drawings Down Heavy And Left Up Light
التسميات

إرسال تعليق

أحدث أقدم

نموذج الاتصال