İç içe HTML metinlerinde, her ifadenin komşularını etkilemeden kendi yönünü koruması gerektiğinde yalıtımı seçin. Gömme yöntemini yalnızca çevreleyen metinle etkileşim isteniyorsa, geçersiz kılmayı ise tasarım açıkça karakter sırasının zorlanmasını gerektiriyorsa kullanın.

Bu kılavuz, Mac’te bir HTML sayfasını düzenleyen kişiye doğru mekanizmayı seçme, iç içe etiketleri ve noktalama işaretlerini koruma ve sonucu masaüstü tarayıcıda kontrol etme konusunda yardımcı olur. Örneklerde uydurma etiketler, sayılar ve geometrik karakterler kullanılır.

Düzen görevi için hangi mekanizma uygun?

İki soruyla başlayın: Tarayıcı ifadede olağan çift yönlü sıralamayı uygulamalı mı ve bu ifade çevresindeki metnin sıralamasını etkilemeli mi? Bu kararlar aşağıdaki pratik karşılaştırmayı ortaya çıkarır. MDN’nin unicode-bidi başvurusu, temel CSS davranışlarını açıklar.

Gereksinim Mekanizma Tercih edilen HTML yaklaşımı
Bilinen yönlü bir ifadeye kendi sınırını vermek Yalıtım dir="ltr" veya dir="rtl" içeren mevcut bir satır içi öğe
Yönü bilinmeyen bir ifadeyi yalıtmak Otomatik yönlü yalıtım bdi veya dir="auto" içeren mevcut bir satır içi öğe
Çevredeki sıralamayı etkilemeyi sürdüren yönlü bir kapsam oluşturmak Gömme unicode-bidi: embed kullanan özel bir CSS durumu
Sonucu yalıtırken karakter sırasını zorlamak Yalıtılmış geçersiz kılma Açıkça belirtilmiş dir="ltr" veya dir="rtl" ile bdo
Çevredeki metinle etkileşimi korurken karakter sırasını zorlamak Yalıtılmamış geçersiz kılma unicode-bidi: bidi-override kullanan özel bir CSS durumu

Olağan HTML yazımında başlangıç noktası olarak yön belirten işaretlemeyi kullanın. W3C, ters yönlü her ifadenin sıkıca sarılmasını ve iç içe ifadelerin iç içe işaretlemeyle belirtilmesini önerir. Böylece amaçlanan sınırlar belgede görünür olur. W3C: HTML’de satır içi işaretleme ve çift yönlü metin.

İç içe yalıtılmış metni nasıl işaretlemelisiniz?

Her tam ifadeye kendi yön sınırını verin. Mevcut bir satır içi öğe zaten tam olarak bu ifadeyi içeriyorsa dir özelliğini oraya ekleyin. Aksi durumda bir span ekleyin. İfadeye ait noktalama işaretlerini sarmalayıcının içinde, çevreleyen cümlenin noktalama işaretlerini ise dışında tutun. W3C buna ifadeyi “sıkıca sarma” der. W3C’nin satır içi işaretleme kılavuzu.

Sağdan sola akması amaçlanan ve soldan sağa bir tanımlayıcı içeren sentetik bir şekil etiketi için yapı şu örnek parçası gibi olabilir:

<p dir="ltr">
  Tile <span dir="rtl">● <span dir="ltr">A1 + B2</span> ■</span>: 12 items.
</p>

Burada kasıtlı olarak üç kapsam vardır: dıştaki cümle, şekil dizisi ve içteki tanımlayıcı. Sayı cümleye aittir, bu nedenle şekil dizisinin dışında kalır. Yalnızca dış ifadeyi işaretlemek, iç tanımlayıcıyı kendi açık sınırından yoksun bırakır. Bu iç içe yapı, yön değişiklikleri için W3C’nin önerdiği yapıyı izler. W3C’nin iç içe ifadelerle ilgili kılavuzu.

Eklenen etiketin yönü bilinmiyorsa bdi yalıtım sağlar ve varsayılan olarak otomatik yön algılamayı kullanır. dir olmadan kullanılan düz bir span aynı varsayılanı sağlamaz. WHATWG, bdi öğesinin yönü olağan biçimde devralmak yerine varsayılan olarak auto olduğunu belirtir. HTML Standardı: bdi öğesi.

Otomatik yön, ilk güçlü yönlü karaktere dayanan bir sezgisel yöntemdir ve iç içe yönlü öğeler için belirtilen istisnaları içerir. Bir etiketin amaçlanan anlamını kavramaz. Bu nedenle A1 ile başlayan bir etiket, sonraki içeriği farklı bir sunum ima etse bile soldan sağa bir ipucu verir. Gereksinimi zaten biliyorsanız açık yön belirtin. MDN: dir genel özniteliği.

Yalnızca şekil ve rakamlardan oluşan bir etiket özel dikkat gerektirir: güçlü yönlü bir harf içermez. Buradaki olağan satır içi örneklerde, otomatik yön uygun bir karakter bulamazsa HTML algoritması soldan sağa yönüne geri döner. Bu sentetik dizinin temel yönü sağdan sola olmalıysa dir="rtl" belirtin. HTML Standardı: dir özniteliği.

Gömme ve geçersiz kılma ne zaman uygundur?

Gömme, içindeki olağan karakter sıralamasını korurken başka bir yön düzeyi oluşturur. Sınırı, çevresindeki metni de yön açısından etkiler. Yalıtım, içeriğe kendi kapsamını verirken dizinin çevresine karşı nötr davranmasını sağlar. W3C’nin belirtimi, bu iç ve dış etkileri açıkça birbirinden ayırır. CSS Writing Modes Level 3: Gömme ve geçersiz kılmalar.

Gömme yöntemini yalnızca bu dış yön etkisi amaçlanan sonucun parçasıysa seçin. Ardından ayrı bir sayım gelen bağımsız bir iç içe etiket için genellikle yalıtım uygundur. Daha derin bir iç içe geçme düzeyi, tek başına embed seçme nedeni değildir: yalıtılmış aralıklar da kendi içlerinde başka yönlü aralıklar içerebilir.

Geçersiz kılma, iç kuralı değiştirir. Olağan algoritmanın yönlü bölümleri çözmesine izin vermek yerine, anlık metni belirtilen yönde bir diziye zorlar. isolate-override bu zorlanmış sıralamanın çevresine bir yalıtım sınırı ekler. Bunlar, olağan bir ifadeyi düzeltmek için kullanılan daha güçlü ayarlar değil, farklı davranışlardır. MDN: unicode-bidi değerleri.

Kasıtlı bir karakter sırası gösterimi için bdo ile dir="ltr" veya dir="rtl" kullanın. HTML Standardı açık yön belirtmeyi zorunlu kılar ve bu öğede auto kullanımını yasaklar. İşleme kuralları unicode-bidi: isolate-override kullanır; dolayısıyla güncel HTML bdo davranışı yalıtımı da içerir. HTML Standardı: bdo öğesi, HTML Standardı: Çift yönlü metnin işlenmesi.

Bu ayrım Latin etiketleri için önemlidir: sağdan sola bir temel yön, “her Latin karakterini ters çevir” anlamına gelmez. Geçersiz kılma bu sırayı zorlayabilir. Buna rağmen gliflerin kendi yönü değişmez; bdo harf şekillerini geriye doğru çizmez. MDN: bdo öğesi.

Mac’inizde eksiksiz bir karşılaştırma sayfası deneyin

Aşağıdaki bağımsız sayfa için yalnızca bir tarayıcı ve düz metin düzenleyici gerekir. İlk iki satır, olağan yönlü işleme ile zorlanmış sıralamayı karşılaştırır. Kalan satırlar iç içe geçme ve sınır tercihlerini gösterir. CSS gömme satırı, mekanizmayı göstermek için eklenmiştir; olağan ve bağımsız bir etiket için HTML yalıtım satırını başlangıç noktası olarak kullanın.

TextEdit’te File > New, ardından Format > Make Plain Text seçeneğini seçin. Aşağıdaki kodun tamamını yapıştırın. File > Save seçeneğini kullanın, dosyaya bidi-demo.html adını verin ve sorulursa Use .html seçeneğini belirleyin. Apple, HTML dosyası oluşturmak için bu adımları belgelemiştir. Kaydedilen dosyayı masaüstü tarayıcınızda açın. Apple: Mac’te TextEdit’te HTML belgeleriyle çalışma.

<!doctype html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bidi boundary comparison</title>
  <style>
    body {
      font-family: system-ui, sans-serif;
      max-width: 44rem;
      margin: 2rem auto;
      padding: 0 1rem;
      line-height: 1.7;
    }
    .sample {
      border: 1px solid #777;
      padding: 0.75rem;
    }
    .scope {
      background: #eeeeee;
      outline: 1px dotted #555;
    }
    .embedding {
      direction: rtl;
      unicode-bidi: embed;
    }
  </style>
</head>
<body>
  <h1>Bidi boundary comparison</h1>

  <h2>Ordinary right-to-left base</h2>
  <p class="sample">Before <span class="scope" dir="rtl">ABC</span> after.</p>

  <h2>Forced right-to-left sequence</h2>
  <p class="sample">Before <bdo class="scope" dir="rtl">ABC</bdo> after.</p>

  <h2>Nested isolation</h2>
  <p class="sample">Tile <span class="scope" dir="rtl">&#x25CF; <span dir="ltr">A1 + B2</span> &#x25A0;</span>: 12 items.</p>

  <h2>Embedding comparison</h2>
  <p class="sample">Tile <span class="scope embedding">&#x25CF; <span dir="ltr">A1 + B2</span> &#x25A0;</span>: 12 items.</p>

  <h2>Automatic isolated direction</h2>
  <p class="sample">Tile <bdi class="scope">A1 (12)</bdi>: 12 items.</p>
</body>
</html>

Herhangi bir şeyi değiştirmeden önce ilk iki satırı inceleyin. Olağan yönlü aralık, ABC ifadesini soldan sağa harf sırasıyla korumalıdır. Geçersiz kılma ise soldaki kenardan okunduğunda CBA olarak görünmelidir. Bu, bildirilen bir tarayıcı ölçümü değil, belgelenmiş mekanizmalardan çıkarılan bir beklentidir. MDN: bdo davranışı.

Ardından iç içe yalıtım ve gömme satırlarını karşılaştırın. Şekil dizisini ve sınırındaki noktalama işaretlerini incelerken sözcükleri ve sayımı değiştirmeyin. Belirli bir örnek aynı görünse bile mekanizmalar farklıdır: yalıtım ve gömme her metin dizisi için gözle görülür biçimde farklı sonuçlar üretmeyi garanti etmez. Belgelenmiş ayrım, kapsamın çevresindeki bidi çözümlemesine nasıl katıldığıyla ilgilidir. W3C: CSS Writing Modes Level 3.

Yararlı bir sınır testi için iki noktayı dıştaki yönlü aralığın içine taşıyın, kaydedin ve yeniden yükleyin. Sonra yeniden dışarı alın. Hangi ifadenin noktalama işaretine sahip olduğunu değiştiriyorsunuz; bu nedenle sonucu amaçlanan sahipliğe göre değerlendirin. Son olarak aynı sınırları cümle satırlara kaydığında da kontrol etmek için tarayıcı penceresini daraltın.

Arka plan ve noktalı çerçeve, sınanan aralığı gösterir. Bunlar incelemeyi kolaylaştırır. Yön veya yalıtım sağlamazlar.

Sonuç hâlâ yanlış görünüyorsa nasıl teşhis edersiniz?

En küçük etkilenen ifadeden başlayıp dışarı doğru ilerleyin. Birkaç yön özelliğini aynı anda değiştirmek, hangi sınırın sonuca yol açtığını belirlemeyi zorlaştırır.

  1. Sarmalayıcıyı kontrol edin. Sarmalayıcı etiketin tamamını ve yalnızca etiketi mi içeriyor? Cümle noktalama işaretleri ve sayılar etikete ait olmadıkça dışarıda kalmalıdır.
  2. İç içe ifadeleri kontrol edin. Başka bir ifadenin içindeki bağımsız yönlü bir tanımlayıcı kendi dir sarmalayıcısına ihtiyaç duyabilir.
  3. Otomatik yönü kontrol edin. Amaçlanan temel yön biliniyorsa auto yerine bu açık yönü kullanın. Bu, özellikle sentetik şekiller ve rakamlar için yararlıdır.
  4. Geçersiz kılmaları kontrol edin. Karakter sırası beklenmedik biçimde zorlanıyorsa bdo ve CSS unicode-bidi bildirimlerini inceleyin.
  5. CSS basamaklandırmasını kontrol edin. Bir yazar kuralı, tarayıcının yön belirten biçimlendirmesini değiştirebilir. Deneme amaçlı bidi kurallarını kaldırın ve HTML işaretlemesini yeniden sınayın.

İlk iki kontrol, W3C’nin sarma ve iç içe geçirme kılavuzunu izler. Otomatik yön kontrolü MDN’nin dir belgelerine, son kontroller ise HTML işleme kurallarına dayanır.

Ayrıca sıralamayı hizalamadan ayırın. text-align: right, satır içi içeriği bloğun sağ kenarına yerleştirir; yalıtılmış bir ifade oluşturmaz. text-align: start, bloğun yönünü izler; dolayısıyla temel yöndeki bir değişiklik, kullandığı kenarı da değiştirebilir. Karakter sırası sorununu satırın konumundan ayrı teşhis edin. MDN: text-align.

Uyumluluk konusunda WHATWG, bdi ve bdo özelliklerinin tüm güncel tarayıcı motorlarında desteklendiğini belgeliyor. Bu, tüm eski tarayıcılarda veya gömülü görüntüleyicilerde destek bulunduğunu göstermez. Başka bir görüntüleme ortamını kontrol ederken hedef ortamın kendisini sınayın ve yönlü HTML işaretlemesini koruyun: MDN, biçimlendirme yok sayılabileceği için bunu yalnızca CSS ile yapılan yalıtıma tercih eder. HTML Standardı: Metin düzeyindeki anlambilim, MDN: bdi kullanım notları.

Her iç içe ifade için açık bir kararla bitirin: temel yönü, sınırı ve iç karakter sırasının olağan kalıp kalmayacağı. Bağımsız bir etiket için yalıtımla başlayın. Gömme veya geçersiz kılma yöntemini yalnızca düzenin o yönteme özgü belgelenmiş davranışı gerektirdiği durumda kullanın.

Kaynaklar