Lorem Ipsum Üretici

Latince iyi görünen tasarım Türkçe metinle bozuldu

Tasarım onaylanmıştı: kart başlıkları tek satıra sığıyordu, butonların içindeki yazı ortalıydı, listedeki her satır aynı yükseklikteydi. Sonra gerçek içerik geldi. "Ödeme yöntemlerini görüntüle" butonu iki satıra düştü, "Kullanıcı ayarlarınız güncellendi" bildirimi kartı taşırdı, ve "İşlem geçmişi" başlığındaki İ harfinin noktası üstteki çizginin altında kaldı.

Bu sürprizin sebebi tasarımcının dikkatsizliği değil. Latince dolgu metni Türkçe metnin yaptığı hiçbir şeyi yapmıyor: ne aynı uzunlukta, ne aynı harflere sahip. Tasarımı test ettiğiniz metin gerçek metne benzemiyorsa, test ettiğiniz şey de gerçek yerleşim değil.

Dolgu metni ne işe yarar

Dolgu metninin amacı okunmamak. Bir sayfa düzenine bakarken gözünüz kelimelerin anlamına takılırsa ritmi, yoğunluğu ve boşlukları göremezsiniz. Anlamsız metin tam da bunu engellemek için var: paragraf blokları gri lekeler haline gelir, siz de o lekelerin dengesine bakarsınız. Lorem Ipsum'un yüzyıllardır ayakta kalmasının sebebi bu.

Ama bu işlevin bir ön şartı var: dolgu metnin metriklerinin gerçek metne yakın olması gerekiyor. Kelime uzunlukları, harf sıklıkları ve satır yüksekliği tutmuyorsa gri lekeler yanlış yerde oluşur, siz de olmayan bir yerleşimi onaylamış olursunuz.

Cümle uzunluğu da bu metriklerin bir parçası. Hepsi aynı uzunlukta on cümle bir paragrafı gerçek metnin zorladığı gibi zorlamıyor: satır sonları düzenli düşüyor, sağ kenar fazla düzgün çıkıyor ve iki yana yaslanmış bir blokta kelime aralarının nasıl açılacağını hiç görmüyorsunuz. Bu araç her cümlenin uzunluğunu beş ile on beş kelime arasından, her paragrafın cümle sayısını da üç ile yedi arasından çekiyor, böylece bloklar gerçek metin gibi düzensiz oluyor.

Üretimin rastgele olması ise ayrı bir sorun çıkarıyor. Math.random kullanan bir üreteçte "yeniden üret" düğmesine bastığınızda az önce beğendiğiniz yerleşim geri gelmemek üzere kayboluyor. Burada araya bir seed giriyor: aynı seed her zaman aynı metni veriyor. Bir ekran görüntüsünü tekrar üretmek ya da bir yerleşim hatasını ekip arkadaşınıza aynı metinle göstermek bu sayede mümkün.

Türkçe seçeneği neden var

Türkçe sondan eklemeli bir dil. "ev" kelimesi "evlerimizden" haline geliyor ve bu tek kelime olarak kalıyor. Ortalama kelime uzunluğu Latince dolgu metninin belirgin biçimde üzerinde, dolayısıyla aynı kutuya daha az kelime sığıyor ve satır kırılmaları başka yerlerden geçiyor. Dar bir sütunda ya da bir buton içinde fark hemen ortaya çıkıyor.

İkinci mesele harflerin kendisi. ç ve ş harflerinin altına inen kuyruğu, ğ harfinin üstündeki şapkası, İ harfinin noktası var. Satır aralığını sıkı ayarladığınız bir başlıkta bu çıkıntılar ya bir üst satıra değer ya da kırpılır. Latince dolgu metninde bu harflerin hiçbiri geçmediği için sorun test aşamasında hiç görünmez, canlıya çıktıktan sonra görünür.

Bu yüzden Türkçe kelime havuzu, transliterasyonla üretilmiş sahte kelimeler değil, gerçek Türkçe sözcüklerden oluşuyor. Amaç harf sıklığını ve kelime uzunluğu dağılımını gerçeğe yaklaştırmak. Klasik açılışı işaretlediğinizde de Latince cümle araya sıkıştırılmıyor, Türkçe kendi açılış cümlesini alıyor, çünkü Latince bir cümle tam da kaçındığınız o diyakritiksiz bölgeyi geri getirirdi.

Büyük harfe çevirirken çıkan İ ve ı tuzağı

Dolgu metni çoğu zaman doğrudan ekrana gitmiyor, arada bir yerde bir dönüşümden geçiyor. CSS'te text-transform: uppercase olabilir, JavaScript tarafında bir toUpperCase() çağrısı olabilir. İkisi de Türkçe için yanlış sonuç veriyor.

1'iyi günler'.toUpperCase()2// 'IYI GÜNLER'  <-- yanlış, noktalar kayboldu, doğrusu 'İYİ GÜNLER'3 4'ışık'.toUpperCase()5// 'IŞIK'  <-- bu doğru çıktı, ama tesadüfen6 7// Locale vermek düzeltiyor:8'iyi günler'.toLocaleUpperCase('tr')   // 'İYİ GÜNLER'9 10// Araç cümle başını çevirirken locale'e güvenmek yerine eşlemeyi elle yapıyor,11// çünkü toLocaleUpperCase çalışma ortamındaki ICU verisine bağlı:12function upperFirstTurkish(char) {13  if (char === 'i') return 'İ';14  if (char === 'ı') return 'I';15  return char.toUpperCase();16}

Aynı tuzağın küçük harfe çevirirken de bir karşılığı var. toLowerCase() çağrısı "İSTANBUL" kelimesini "i̇stanbul" haline getiriyor ve ortaya fazladan bir birleştirici nokta çıkıyor. Kullanıcı adlarını ya da arama sorgularını küçük harfe çevirip karşılaştıran bir kodda bu, ekranda aynı görünen iki metnin eşleşmemesi demek.

Bu hatayı Latince dolgu metniyle asla yakalayamazsınız, çünkü Latince metinde ı harfi hiç geçmez ve i harfi büyütüldüğünde doğru sonuç verir. Türkçe dolgu metniyle çalıştığınızda ise ilk büyük harfli başlıkta gözünüze çarpar. Sorunu tasarım aşamasında görmenin bedeli yok, canlıda görmenin bedeli bir hotfix.

Dolgu metni canlıya nasıl sızıyor

Dolgu metninin üretime çıkmaması gerektiğini herkes biliyor, yine de düzenli olarak çıkıyor. Sebep şu: göze çarpan yerler temizleniyor, göze çarpmayan yerler unutuluyor. En sık rastlanan kaza meta açıklamasında yaşanıyor, çünkü meta açıklaması sayfada görünmüyor. Arama sonuçlarında ise gayet görünüyor.

Bunu yakalamanın ucuz bir yolu var: kod tabanında dolgu metninin karakteristik kelimelerini aratan bir kontrol eklemek. "lorem", "ipsum" ve "dolor" kelimelerini arayan bir grep, derleme sürecinde saniye almadan çalışır ve bir daha bu konuyu düşünmeniz gerekmez. Türkçe dolgu kullanıyorsanız aynı kontrolü açılış cümlesinin ilk kelimesi için de kurmanız gerekir, çünkü havuzdaki kelimeler gerçek Türkçe sözcükler ve tek başlarına şüpheli görünmezler.