Bagus Belajar Komputer

Pada kesempatan kali ini saya akan membahas tentang tag<bdi> yang berada pada html 5, tag ini baru diperkenalkan di HTML5. Tag <bdi> ini adalah singkatan dari bi-directional isolation. Tag <bdi> berfungsi mengisolasi atau membatasi bagian dari teks yang dapat diformat dalam style atau aturan yang berbeda dari teks lain selain yang diatur menggunakan tag <bdi> itu. Elemen ini berguna ketika meletakkan konten yang dibuat atau dihasilkan oleh pengguna dengan directionality/arah yang tidak diketahui.

Berikut contoh penggunaan dari tag <bdi> :

<!DOCTYPE html>
<html>
<body>

<p>Dalam contoh di bawah, nama pengguna akan ditampilkan bersama dengan jumlah poin dalam kontes. Jika elemen bdi tidak didukung dalam browser, nama pengguna dari pengguna Arab akan mengacaukan teks (algoritma bidirectional akan menempatkan tanda titik dua dan nomor "90" di samping kata "User" bukan di sebelah kata "points"".).

</p>

<ul>
<li>User <bdi>hrefs</bdi>: 60 points</li>
<li>User <bdi>jdoe</bdi>: 80 points</li>
<li>User <bdi>احمد</bdi>: 90 points</li>
</ul>

</body>
</html>

Maka akan menghasilkan tampilan sebagai berikut, jika tag bdi disupport oleh browser :

Dalam contoh di bawah, nama pengguna akan ditampilkan bersama dengan jumlah poin dalam kontes. Jika elemen bdi tidak didukung dalam browser, nama pengguna dari pengguna Arab akan mengacaukan teks (algoritma bidirectional akan menempatkan tanda titik dua dan nomor "90" di samping kata "User" bukan di sebelah/di bagian kata "points").

User hrefs: 60 points
User jdoe: 80 points
User احمد: 90 points

Untuk tag baru dari HTML5 ini, tidak semua browser sudah mensupportnya. Untuk sekarang ini yang sudah mensupport adalah Mozilla Firefox dan Google Chrome, sedangkan yang lain belum. Berikut ini tampilan ketika menjalankan tag <bdi> dalam beberapa browser :

Google Chrome

Opera

Internet Explorer

Mozilla Firefox

Dari keempat browser di atas terlihat jika Mozilla firefox dan Google Chrome dapat menampilkan sesuai dengan setingan dari tag bdi, yaitu poin akan ditampilkan setelah nama seperti pada nama di atasnya, sedangkan pada Opera dan Internet Explorer urutan dari nama dan poin akan terbalik.
Demikian sekilas tentang fungsi dari tag bdi yang merupakan fitur baru dalam HTML5, semoga bermanfaat.

Nama : Rahmawan Bagus Trianto
NIM : A11.2010.05199
Kelompok : A11.4513

Bagus Belajar Komputer

Monday, October 15, 2012

Tag bdi dalam HTML5

0 comments:

Post a Comment

Kategori