CodeBlanks Logo Icon CodeBlanks

Wbr ve bdi, bdo

HTML kursu · Orta seviye · Ders 5/67

Satır kırılım noktaları ve çift yönlü metin kontrolünü öğrenirsin.

wbr: satır kırılımı fırsatı

<wbr> etiketi satır kırılımı için bir fırsat noktası koyar. Uzun bir sözcük ya da bağlantı taşarsa, tarayıcı buradan böler; taşmazsa hiçbir şey yapmaz. Boş bir etikettir; kapanışsız yazılır.

Örnek: uzunbirlesikkelime<wbr>buradanbol. Eğer 'uzunbirlesikkelimeburadanbol' taşarsa, tarayıcı <wbr> konumundan böler. Böylece okuyucu uzun bağlantı ya da teknik sözcükleri rahatça izler.

bdi ve bdo: yön kontrolü

<bdi> etiketi yönü bilinmeyen metni izole eder. Kullanıcıdan gelen bir ad, sağdan sola ya da soldan sağa olabilir; bunu <bdi> içine alınca çevresindeki metnin yönü bozulmaz.

<bdo> etiketi ise metnin yönünü zorla değiştirir. dir özniteliği rtl (sağdan sola) ya da ltr (soldan sağa) olur. Örnek: <bdo dir="rtl">1234-5678</bdo>. bdi yalıtır, bdo zorlar.

Uygulama bdi, bdo ve wbr yaz

Body içine üç paragraf ekle. Birinci paragrafta metin Yazan: olsun, sonra bir <bdi> etiketi içinde kullanici-123, sonra - 10 puan. İkinci paragrafta bir <bdo> etiketi olsun; dir="rtl" özniteliğiyle ve içinde 1234-5678. Üçüncü paragrafta uzun bir metin olsun: uzunbirlesikkelime harfleri, sonra bir <wbr> etiketi, sonra buradanbol harfleri.

Örnek çözümü göster
<body>
  <p>Yazan: <bdi>kullanici-123</bdi> - 10 puan</p>
  <p><bdo dir="rtl">1234-5678</bdo></p>
  <p>uzunbirlesikkelime<wbr>buradanbol</p>
</body>

Kendini test et

  1. Metnin yönünü zorla değiştirmek için hangi etiket kullanılır?

    • <bdi>
    • <dir>
    • <bdo>
    • <rtl>
    Cevabı göster

    <bdo> — Doğru. bdo dir özniteliğiyle yönü zorla değiştirir.

  2. bdo etiketini tamamla

    <____ dir="rtl">Bu satır sağdan sola</bdo>
    Cevabı göster
    <bdo dir="rtl">Bu satır sağdan sola</bdo>
  3. Etiketi rolüyle eşleştir

    <wbr>
    Satır kırılım fırsatı
    <bdi>
    Yön izolasyonu
    <bdo>
    Yön zorlama
    <br>
    Satır sonu

Orta seviye bölümündeki tüm dersler