Girdi alanlarınıza ve metin kutularınıza `dir="auto"` ekleyin

 (mough.xyz)
3 puan yazan GN⁺ 2023-08-24 | 1 yorum | WhatsApp'ta paylaş
  • HTML'deki tek bir dir="auto" özniteliği ile girdi alanları ve metin kutularında İbranice, Arapça, Urduca gibi RTL (sağdan sola) diller otomatik olarak desteklenebilir
  • Daha önce yalnızca karakter algılama dinleyicileri yazmak, üçüncü taraf kütüphaneler kullanmak, dir="right" ile elle geçiş yapmak gibi manuel ve karmaşık yöntemler biliniyordu
  • "textarea rtl" arama sonuçlarının hiçbirinde dir="auto" geçmediği için bunun doğrudan müdahale gerektiren bir sorun olduğu sanıldı
  • Gerçek uygulamada, ek düşük seviye dil ayrıştırması olmadan anında düzgün çalışıyor
  • Küçük gibi görünse de, dünya çapındaki kullanıcıların bir uygulamayı kullanıp kullanamayacağını belirleyen uluslararasılaştırmanın (i18n) temel unsurlarından biri

RTL desteğinin zorluğu

  • Standard Notes'un ilk günlerinden beri İbranice, Arapça, Urduca gibi RTL dil desteği talepleri geliyordu, ancak uygulaması zor göründüğü için ertelendi
  • Her değerlendirmede bunun Unicode, ASCII vb. kodlamaları düşük seviyede ele almayı gerektiren bir dil ayrıştırma işi olduğu düşünüldü ve kaçınıldı
  • Aynı konu birkaç ayda bir tekrar gündeme geldi, ancak her seferinde aynı tavsiyeler döndü
    • Kendi karakter ayrıştırıcını yaz
    • Üçüncü taraf bir kütüphane kullan
    • dir="right" uygula

Aramanın sınırları

  • "textarea rtl", "textarea right to left" gibi aramalar yapılsa da sonuçlarda dir="auto" hiç görünmüyor
  • Bunun yerine Stack Overflow'da etiketlere dir="rtl" yazmayı öneren yanıtlar ya da Twitter'ın üçüncü taraf kütüphanesi öne çıkıyor
  • Arama sonuçlarının sadece ilk sayfasına güvenilip bunun doğrudan müdahale gerektiren bir sorun olduğu varsayıldı, bu yüzden öncelik sıralamasında geriye itildi

Çözümün bulunması

  • Birkaç hafta önce yeniden arama yapılırken bir GitHub gönderisindeki yorumda, "textarea'ya sadece dir="auto" eklemek yeterli" ifadesi görüldü
  • Bir yıldır çözüm aranan sorun tek satırla çözüldü
  • Doğrudan uygulandığında kusursuz şekilde çalıştığı görüldü

Uygulama yöntemi

  • Girdi alanına veya metin kutusuna yalnızca tek satırlık bir öznitelik ekleniyor
    • <textarea dir='auto'> שלום, עתיד. </textarea>
  • Metin yönü, girilen içeriğe göre otomatik olarak belirleniyor
  • İlgili açıklamalar için MDN'nin dir özniteliği dokümantasyonuna bakılabilir

İlgili okumalar

1 yorum

 
GN⁺ 2023-08-24
Hacker News yorumları

  • Girdi alanları ve textarea'larda metin render etme sorununu düzeltmenin kolay bir yolu doğru, ancak gönderilen metni gösteren öğelerde de aynı işlemin yapılması gerekiyor
    Ayrıca çift yönlü metinle, örneğin Arapça bir paragraf içindeki İngilizce ürün adlarıyla karşılaşınca bambaşka bir karmaşıklık seviyesi ortaya çıkıyor
    Chrome'da şu anda dir='auto' bulunan girdi alanlarında RTL metin render etmesini etkileyen bir regresyon hatası var; düzeltme zaten dağıtıma çıktı ve bir sonraki sürüme dahil olacak

  • MDN yine imdada yetişiyor: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_att...

  • ABD'nin dışında da bir dünya var, ama sitenin niteliğine bağlı olarak bunu desteklemek şart değil
    Amerikalı da değilim, İngilizce ana dilim de değil, ama girdiğim sitelerin %99'unda kullanıcı adlarında veya gönderilerde RTL karakterlere izin verilmemesi benim için hiç sorun değil
    Eğer bu tarayıcı veya işletim sistemi seviyesinde çözülmemişse, bunu desteklemek gibi bir yükümlülüğüm olduğunu pek düşünmüyorum
    Ve bu, azınlıkları bastıralım gibi bir şey de değil

    • Kişisel projelerimde başka dilleri desteklemeyi düşündüğüm her seferinde bunu hatırlıyorum
      Hızlı bir aramayla İngilizce kullanıcı sayısının 840 milyon civarında olduğu söyleniyor; tek başıma bir şey yapan biri olarak dünyanın 1/10'una hitap edebilmek bana gayet iyi görünüyor
      Daha fazla kişiyi desteklemek için kapsamı genişletmek güzel, ama bunun zorunlu olması gerekmiyor
    • Eğer niş kullanım senaryolarını desteklemek basitse ve bakım yükü de düşükse, sırf keyif için eklenebilir

  • “Google ilk sonuç sayfası asla yalan söylemez” denmiş; sorun çözme konusunda yardımcı olabilecek bazı şeyler var ama önce oturmak isteyebilirsiniz. Muhtemelen üzücü olacak

    • O cümle sanki kelimesi kelimesine alınmış
      “Google ilk sonuç sayfası asla yalan söylemez…” ifadesinin, hemen ardından gelen “Google bize girdi alanlarının RTL desteği konusunda yalan söylüyordu” cümlesine bakılırsa, neredeyse kesin olarak hiciv olduğu anlaşılıyor

  • Ne yazık ki hem web sitesi hem de bağlantılı CodePen için kaynak render etme oldukça bozuk görünüyor. Noktanın yeri yanlış, ama render edilmiş HTML iyi görünüyor
    Bu, Unicode çift yönlü algoritmasının her zamanki gibi tökezlemesine benziyor
    HTML etiketleri, yani < ile > arasındaki tüm bölüm, dahili olarak LTR olan atomik bir birim gibi render edilmeli ama çevredeki karakterlerin yönünü etkilememeli; buna yönelik özel bir algoritma gerekiyor gibi
    Bu örnekte algoritmanın .< dizisinin ortasında yön değiştirebilmesi gerekir

    • Burada Unicode çift yönlü algoritması başarısız olmuyor; tasarlandığı gibi çalışıyor
      Kaynak kod parçasının temel yönü LTR, ancak İbranice metin yüzünden yönler karışıyor
      Noktalama işaretleri zayıf yönlülüğe sahip olduğu için nokta RTL bölümünün sonunda görünüyor ve temel yön LTR olduğundan bu “son”, sağ taraf anlamına geliyor
      Karışık yönlü içeriği doğru render etmeye zorlamak için, belirli yön bölümlerinin nerede başlayıp bittiğini belirten çift yönlü kontrol karakterleri eklemek çoğu zaman gerekir
      Ancak bu durumda bunları eklemek, gerçek giriş örneğinin render edilmesini bozabilir; dolayısıyla doğru yaklaşım olmaz

  • Bununla bağlantılı olarak, son birkaç yılda mantıksal özellik/değer desteği olgunlaştı
    Bu, top/left/bottom/right gibi yöne dayalı özelliklere bir alternatif ve içerik ya da metin yönü değiştiğinde buna uyum sağlayabiliyor
    https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical...

    • Bu tür kavramlar mobil platformlarda uzun zamandır standarttı. Örneğin iOS'taki leading ve trailing gibi
      Bunun web'e de gelmesi güzel ve dilden bağımsız arayüz oluşturmayı çok daha gerçekçi hale getiriyor

  • textarea ve BiDi metinle aklıma gelebilecek neredeyse her kombinasyonu aradığınızda https://www.w3.org/International/talks/1602-oman üst sıralardaki bağlantılardan biri çıkıyor
    İçindeki “What if you don't know the direction in advance” bölümü de doğrudan bununla ilgili: https://www.w3.org/International/talks/1602-oman/#advance
    Sorun şu ki yazar bu alanı pek bilmiyor gibi; burada doğru arama teriminin BiDi olduğunu da bilmiyormuş gibi görünüyor. Bu, “bi-directional text”in kısaltması ve belirli bir yazım yönünü özellikle belirtmek istemediğinizde kullanılan terim
    “Arama sonuçları yanlıştı” diye düşünmesini de suçlamak istemem. RTL ile ararsanız çıkan sonuç doğru cevaptır, ama bu alan hakkında biraz daha bilgi sahibi olana kadar bunu anlayamazsınız
    Bu, internet yanıtlarına dayanmanın sınırlarını gösteriyor. İnternet benim neyi bilmediğimi bilmiyor
    BiDi ile uzun süre uğraşmış birine sorsanız, ilk sorularından biri büyük ihtimalle “RTL'den mi bahsediyorsunuz, yoksa BiDi'den mi?” olurdu
    Mümkünse yazılımdan çok insana sormak daha iyi. Özellikle de konuya çok hakim değilseniz

    • Alan içi kısaltmaları kullanıp “o alanı” bir kapı bekçisi gibi sahiplenerek yazarı küçümsemek yerine, bu sorunun daha görünür olmasına katkı sağlamış olmasını olumlu da görebilirsiniz

  • Form gönderiminde metin girişinin yönlülüğünü de dahil edebilen ilginç bir özellik olan dirname bağlantısını da eklemek iyi olabilir: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes...

  • Tarayıcı geliştiriyor olsaydım, aksi belirtilmedikçe dir="auto" varsayılmasına dair bir kamu spotu yapmak isterdim

    • Kullanıcı girişi alan form kontrolleri bir bakıma ayrı bir belge sayılabilir, dolayısıyla varsayılanın bu olması daha mantıklı olabilir; ancak tüm öğeler için varsayılan olarak bu çok kötü olur
      Kullanıcının belirli bir dilde yazacağını biliyorsanız, bu da en iyi varsayılan olmayabilir. Yine de elbette yanlış bir yön belirtmekten iyidir

  • Biraz bağlantılı olarak, yakın zamanda Vim'de metni sağdan sola yapan :set rl diye bir şey olduğunu öğrendim
    Normal haline dönmek için :set norl kullanılıyor

    • Vay, oldukça havalı ve İngilizce'de bile o şekilde yazmayı denemek garip şekilde eğlenceli. Düşündüğümden daha uzun süre denedim
    • Eski Vim'de bir de Arapça modu ile başlayan vim -A var. Nasıl kullanıldığını bilmiyorum; galiba bir tür giriş yöntemi kullanıyor
    • :set td nasıl olurdu?