Hallo semuanya masih bersama saya di artikel tutorial dumet school, kali ini saya akan kembali membahas tentang HTMl yaitu kali ini mengenal tag element <bdi> pada html.

 

bdi adalah kepanjangan dari Bi-Directional Isolation yang berarti isolasi dua arah.

HTML element <bdi> digunakan untuk mengisolasi diri terhadap arah tulisan yang mungkin berbeda dari element lain di sekitarnya.

kita sudah banyak mengetahui kalau tipe tulisan dari beberbagai negara dan bangsa sangat lah bermacam-macam, kita ambil contoh saja tulisan indonesia arah tulisanya dari kiri ke kanan dan arab dari kanan ke kiri, seandainya kita menuliskan tulusan indonesia dan arab dalam satu kalimat maka hasilnya akan berantakan arah tulisanya nah gunanya element BDI ini adalah untuk mengcontrol secara auto sesuai dengan arah tulisanya.,

Penggunaan bdi element sangat berguna ketika mengumpulkan nama user yang beragam bahasa dan tulisan tanpa diketahui arah tulisanny

 

setelah kita mengetahui dan mengenal <bdi>  mari kita coba membuatnya dengan code html berikut :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo</title>
  </head>
  <body>
    <h3>Perhatikan perbedaan arah tulisan dari ketiga contoh berikut:</h3>
    <p>
      Perhatikan dengan seksama perbedaan struktur tulisan Arab dari contoh masing-masing.
    </p>
    <hr />
    <h4>Contoh 1</h4>
    <p>Menggunakan bdi element:</p>
    <ul>
      <li>Nama: <bdi>indah</bdi>: 12 Tahun.</li>
      <li>Nama: <bdi>diday</bdi>: 20 Tahun.</li>
      <li>Nama: <bdi>إيان</bdi>: 18 Tahun.</li>
    </ul>
    <p>Arah tulisan, sesuai dengan apa yang diharapkan </p>

    <hr />

    <h4>Contoh 2</h4>
    <p>Tidak Menggunakan bdi element:</p>
    <ul>
      <li>Nama: <bdi>Buduk</bdi>: 12 Tahun.</li>
      <li>Nama: <bdi>Indul</bdi>: 20 Tahun.</li>
      <li>Nama: إيان: 18 Tahun.</li>
    </ul>
    <p> Struktur tulisan berantakan, seharusnya 18 terletak sebelum Tahun.</p>

    <hr />

   

  </body>
</html>

 

oke penjelasanya adalah jika secara default tulisan dengan element <p> adalah satu arah left-to-right dengan di tambahkanya element <bdi> tulisan arab tidak akan ikut terbawa element <p> tetapi menjadi right-to-left.

oke seperti itulah tadi artikel tentang mengenal tag element <bdi> pada html , sampai bertemu pada artikel selanjutnya .