tRikSonic
Tema

HTML bdi Tag

Terakhir diperbarui : 24 Mei 2018 - 07.02
html bdi Tag - Belajar html <bdi>, html <bdi> mempunyai definisi Bi-Directional Isolation, Element ini digunakan pada rentang teks yang akan terisolasi dari element disekitarnya dengan tujuan menciptakan jalur teks 2 arah, kiri ke kanan dan kanan - kekiri.
background html
Sebagai contoh, pada umumnya website dan blog di indonesia kebanyakan menggunakan format teks dari kiri ke kanan attribute ltr (left to right). Jika dalam dalam penulisan artikel murni secara keseluruhan menggunankan format ltr, hal tersebut bukan menjadi masalah.
Tapi bagaimana jika suatu website atau blog yang menggunakan 2 jalur penulisan dari kanan ke kiri dan dari kiri ke kanan, misal penulisan teks bahasa indonesia + teks bahasa arab, disini lah element <bdi> berfungsi.
Element <bdi> digunakan agar Penulisan dengan jalur 2 arah atau melawan jalur yang ada tersusun dan terbaca dengan baik oleh browser dan user.

Contoh html element <bdi> :

<p>
  Mari kita mengucapkan 
  <bdi>بِسْــــــــــــــــــمِ اللهِ الرَّØ­ْÙ…َÙ†ِ الرَّØ­ِÙŠْÙ…ِ</bdi> 
  sebelum memulai acara ini
</p>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo Triksonic</title>
</head>
<body>

<p>
  Mari kita mengucapkan 
  <bdi>بِسْــــــــــــــــــمِ اللهِ الرَّØ­ْÙ…َÙ†ِ الرَّØ­ِÙŠْÙ…ِ</bdi> 
  sebelum memulai acara ini
</p>

</body>
</html>

Global Attributes:

Element <bdi> mencakup Global Attributes HTML.

Event Attributes:

Element <bdi> mencakup Event Attributes HTML.

Browser Support :

Desktop

Chrome16
Safari?
Firefox10
Opera?
IE?
Edge?

Mobile

Android Webview?
Chrome Android?
Edge Mobile?
Firefox Android10
Opera Android?
iOs Safari?
Samsung Internet?

Default CSS :

Browser yang support dengan element <bdi>, biasanya mempunyai nilai default :
bdi {
  unicode-bidi: -webkit-isolate;
}
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.