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.
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
| Chrome | 16 |
|---|---|
| Safari | ? |
| Firefox | 10 |
| Opera | ? |
| IE | ? |
| Edge | ? |
Mobile
| Android Webview | ? |
|---|---|
| Chrome Android | ? |
| Edge Mobile | ? |
| Firefox Android | 10 |
| Opera Android | ? |
| iOs Safari | ? |
| Samsung Internet | ? |
Default CSS :
Browser yang support dengan element
<bdi>, biasanya mempunyai nilai default :
bdi {
unicode-bidi: -webkit-isolate;
}