HTML Tutorial

عنصر <bdi>

ما هي علامة <bdi>؟

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

استخدام علامة <bdi>

  • لعزل نص مكتوب بلغة مختلفة عن اللغة المحيطة به.
  • لعزل نص اتجاهه معاكس لاتجاه النص المحيط به.

خصائص علامة <bdi>

  • dir: تحدد اتجاه النص المعزول (rtl لليمين إلى اليسار، ltr لليسار إلى اليمين).

أمثلة على علامة <bdi>

<!-- عزل نص عربي في نص إنجليزي -->
<p>This is an English sentence. <bdi>هذه جملة عربية</bdi>.</p>

<!-- عزل نص يميني في نص يساري -->
<p dir="ltr">This is a left-to-right sentence. <bdi dir="rtl">هذه جملة من اليمين إلى اليسار</bdi>.</p>

مثال توضيحي لعلامة <bdi>

<!DOCTYPE html>
<html>
<head>
  <title>Exploring the &lt;bdi&gt; Tag</title>
</head>
<body>
  <p>
    This is an English paragraph. <bdi>This is an isolated Arabic phrase: هذه عبارة معزولة باللغة العربية</bdi>. This is the rest of the English paragraph.
  </p>
</body>
</html>

نصائح لتحسين إمكانية الوصول باستخدام علامة <bdi>

  • استخدم علامة لعزل النص الذي تريده من القراءات الآلية (مثل برامج قراءة الشاشة).
  • وضح اتجاه النص المعزول باستخدام خاصية dir.
  • تأكد من أن النص المعزول لا يتداخل مع النص المحيط به.