Türkçe İ portfolyomu bozdu

Kendi sitemi incelerken hiç yazmadığım bir yazım hatası buldum. Ana sayfadaki üç kanıt noktasından biri, AR lensleri geliştirdiğim markalardı. Kaynak kodda Adidas / Nike yazıyordu. Sayfada ise ADİDAS / NİKEgörünüyordu: her büyük I'nın üstünde bir nokta. İletişim sayfasında da aynı sorun vardı: LİNKEDIN.

O noktaları kimse yazmadı. Tarayıcı ekledi ve ona verdiğim bilgiye göre haklıydı da.

Büyük harf bir dil kararıdır

Sitedeki etiketler normal harfle yazılıp text-transform: uppercase ile büyütülüyor. Bu dönüşüm basit bir karakter değişimi değil: tarayıcı, öğenin dilinin büyük-küçük harf kurallarını uygular. Sitenin Türkçe sürümü <html lang="tr"> diyor ve Türkçede iki ayrı i harfi var:

• noktalı i → noktalı büyük İ
• noktasız ı → düz büyük I

Türkçe kelimelerde bu tam istediğim davranış: "Deneyim" doğru şekilde DENEYİMoluyor. Ama "Nike" Türkçe bir kelime değil ve tarayıcının bunu bilmesinin yolu yoktu. LinkedIn'deki detay da hoş: yalnızca ilk i noktalandı, çünkü ikincisi marka adında zaten büyük I.

JavaScript de aynısını yapar

Bu yalnızca CSS'e özgü bir tuhaflık değil. Dile duyarlı her harf dönüşümü aynı şekilde davranır:

"nike".toUpperCase();                // "NIKE"
"nike".toLocaleUpperCase("tr");      // "NİKE"
"TITLE".toLocaleLowerCase("tr");     // "tıtle"

Son satır bu hatanın klasik hali. Bir anahtar kelimeyi kullanıcının diliyle küçültüp "title"ile karşılaştıran kod, Türkçe ayarlı bilgisayarlarda sessizce bozulur. Bu o kadar sık yaşanır ki adı bile var: "Turkey test". Metin işleyen kodun Türkçe ayarı atlatıyorsa, büyük ihtimalle diğer dillerin çoğunu da atlatır.

Çözüm: tarayıcıya hangi kelimenin Türkçe olmadığını söylemek

Büyük harf stilini kaldırmak istemedim. Sitenin editoryal görünümünün bir parçası ve Türkçe metin için doğru çalışıyor. Asıl sorun eksik bilgiydi, çözüm de o bilgiyi vermek. Türkçe içerikteki yabancı bir ada kendi dilini veriyorum:

<dt lang="en">Adidas / Nike</dt>
<span lang="en">LinkedIn</span>

Artık tarayıcı bu öğelerde İngilizce, geri kalan her yerde Türkçe kuralları uyguluyor. Bir yan faydası daha var: ekran okuyucular telaffuzu değiştirmek için aynı niteliği kullanıyor, böylece "Nike" artık Türkçe fonetikle okunmuyor. Proje başlıklarımda tam da bu yüzden bir titleLang alanı zaten vardı. Ana sayfa istatistikleri ve sosyal linkler gözden kaçmıştı.

Düzeltmeyi kalıcı yapmak

Bu tür bir hata, biri yeni bir marka adı eklediğinde geri döner. O yüzden küçük bir uçtan uca test ekledim. Test, metni ziyaretçinin gördüğü haliyle, yani CSS uygulandıktan sonra okuyor ve ana sayfada ADIDAS / NIKE, iletişim sayfasında LINKEDIN yazdığını doğruluyor.

Bu hatadan aklımda kalanlar:

• text-transform ve toLocaleUpperCase yalnızca harflere değil, dile bakar.
• Yabancı adları lang ile işaretle. Hem harf dönüşümünü düzeltir hem ekran okuyuculara yardım eder.
• Tanımlayıcılarda ve karşılaştırmalarda dilden bağımsız yöntemler ya da açıkça belirtilmiş bir dil kullan. Kullanıcının varsayılan diline asla güvenme.
• Metin işleyen her şeye Turkey test uygula.

Bir portfolyoda iki karakterlik bir hataydı. Ama birden fazla pazarda yayınlanan her ürünün kendi "Türkçe İ"si vardır ve ben onu önce kendi kodumda bulmayı tercih ederim.