Rtl uyumlu işaretleme

RTL uyumlu tablo, form ve landmark yazmayı öğrenirsin.

RTL sayfa iskeleti

Bir RTL sayfa yazarken dir="rtl" özniteliğini <html> etiketine koyarsın; tüm sayfa sağdan sola akar. <header>, <nav>, <main> ve <footer> gibi landmark'lar yine aynı kalır; sadece görsel yön değişir.

Sayfanın bir bölümü LTR ise (örn. bir telefon numarası), o ögeye dir="ltr" verebilirsin. Bu, üst ögeden gelen yönü geçersiz kılar. Tek nokta: dir özniteliğini gerektiği yerde kullan; aşırı kullanma.

RTL tablo ve form

RTL bağlamda bir tablonun ilk sütun sağdan başlar; tarayıcı bunu dir="rtl" değerine göre otomatik yapar. Form etiketlerinde ise etiket ve giriş kutusu yerleşimi tersine döner; label'ın for özniteliği yine id ile eşleşir.

Önemli nokta: dir yalnızca görsel yönü değiştirir, anlamı değiştirmez. Bir <label for="eposta"> ile <input id="eposta"> bağı RTL'de de aynı çalışır; yalnızca görsel konum farklıdır.

Uygulama RTL sayfa iskeleti

Bir RTL sayfa iskeleti yaz. <html lang="ar" dir="rtl"> etiketiyle başla. İçine bir <head> ve <body> ekle. Body içine bir <header>, onun içine bir <h1> ekle (metin: Marhaba). Body içine bir <main> ve bir <footer> de ekle.

Örnek çözümü göster

<html lang="ar" dir="rtl">
  <head><meta charset="utf-8"></head>
  <body>
    <header>
      <h1>Marhaba</h1>
    </header>
    <main></main>
    <footer></footer>
  </body>
</html>

Kendini test et

RTL sayfada bir telefon numarasını LTR göstermek için ne yaparsın?
- <p lang="rtl">
- <span lang="ltr">
- <p dir="rtl">
- <span dir="ltr">
Cevabı göster

<span dir="ltr"> — Doğru. span içine dir="ltr" vererek sayfanın RTL akışını o öge için geri çevirirsin.

label-input eşleşmesini tamamla

<form>
  <label for="____">E-posta</label>
  <input id="eposta" type="email">
</form>

Cevabı göster

<form>
  <label for="eposta">E-posta</label>
  <input id="eposta" type="email">
</form>

Senaryoyu yön ile eşleştir

Arapça sayfa

dir="rtl"
İngilizce sayfa

dir="ltr"
Karışık yönli metin

<bdi>
Yönü zorla

<bdo>

Sıradaki ders: Çok dilli SEO

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler