HTML bdi tag | belajar <bdi> element

HTML Fadlullah Fadul December 3, 2018

Referensi Belajar HTML bdi tag. Tutorial dan panduan mengenai element <bdi>...</bdi>. Mencakup penjelasan yang disertai contoh kode penggunaan sebagai rujukan untuk materi belajar HTML elemen <bdi>.

Deskripsi
Penjelasan HTML bdi

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.

Sebagaimana diketahui, contoh arah tulisan Bahasa Indonesia ditulis dari kiri ke kanan, sedangkan Bahasa Arab ditulis dari kanan ke kiri. Apabila tidak menggunakan element bdi, maka tulisan dengan arah yang berbeda yang apabila digabungkan (satu kalimat), maka akan memiliki struktur arah tulisan yang tidak dikehendaki (berantakan).

Pada element bdi, attribute dir akan di-set value-nya menjadi auto, sehingga browser akan menampilkan arah tulisannya secara otomatis meskipun element induknya di-set dengan arah yang berbeda.

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

Global Attributes
Atribut Secara Global (Keseluruhan)

<bdi> tag mencakup global attributes, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags.

Silahkan, lihat referensi mengenai HTML Global Attribute

Event Attributes
Atribut event (Peristiwa)

<bdi> tag mencakup event attributes, yang artinya attribute tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian). Contoh: menjalankan script (JavaScript) ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya.

Silahkan, lihat referensi mengenai HTML Events Attribute

Example
Contoh HTML <bdi> element

HTML 
<p dir="ltr">Aku Cinta Kamu, Bahasa Arabnya adalah <bdi>أَناَ أُحِبُّكْ</bdi> </p>
Penjelasan:

Pada tulisan "Aku Cinta Kamu..." di dalam element <p> memiliki attribute "dir="ltr"" atau direction ltr (left-to-right) yang artinya tulisan dari kiri ke kanan. Seharusnya tulisan arab juga memiliki arah mengikuti induknya yaitu ltr, akan tetapi dengan bdi element maka tulisan arab berubah arah secara otomatis sebagaimana seharusnya yaitu rtl (righ-to-left) atau dari kanan ke kiri.

Contoh Lengkap

Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.

SOURCE
editor 
<!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>Budi</bdi>: 12 Tahun.</li>
      <li>Nama: <bdi>Intan</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>Budi</bdi>: 12 Tahun.</li>
      <li>Nama: <bdi>Intan</bdi>: 20 Tahun.</li>
      <li>Nama: إيان: 18 Tahun.</li>
    </ul>
    <p> Struktur tulisan berantakan, seharusnya 18 terletak sebelum Tahun.</p>

    <hr />

    <h4>Contoh 3</h4>
    <p>Tidak Menggunakan bdi element, tetapi bdi diganti dengan <code>b</code> element</p>
    <ul>
      <li>Nama: <bdi>Budi</bdi>: 12 Tahun.</li>
      <li>Nama: <bdi>Intan</bdi>: 20 Tahun.</li>
      <li>Nama: <b>إيان</b>: 18 Tahun.</li>
    </ul>
    <p> Struktur tulisan berantakan, seharusnya 18 berada terletak sebelum Tahun.</p>

  </body>
</html>
SHARE
Previous Article Next Article