Bu sayfa, Cloud Translation API ile çevrilmiştir.

Düzgünleştirmeye Giriş 101

Paul Lewis

Giriş

Karşıt yumuşatma, web grafiklerindeki isimsiz bir kahramandır. Ekranlarımızda net metinlerin ve düzgün vektör şekillerinin nedeni budur. Günümüzde tarayıcılarda kullanılan düzeltme için metin oluşturma konusunda en bariz birkaç yaklaşım vardır. Anahtarların antialize edilmesi için kullanılan algoritma, beklenmedik görsel sonuçlara yol açabilir. Bu makalede, kenar yumuşatma yaklaşımlarına göz atacağız ve piksellerin nasıl çizildiğini göreceğiz.

Tüm ekranlarımız, hepimizin bildiği gibi piksellerden oluşur. Bloklardan oluşan dev bir ızgarada her biri kırmızı, yeşil ve mavi (RGB) bileşenler içeriyor. Uzaktan resimleri, metinleri ve simgeleri görürüz, ancak yakından incelediğimizde RGB bileşenlerinin ızgarasını ve her şeyin nasıl yapıldığını görebiliriz.

Yakın çekim ekranın pikselleri. Her pikselin kırmızı, yeşil ve mavi bileşenleri vardır — Şekil 1 - Bir ekranın yakından pikselleri. Her pikselin kırmızı, yeşil ve mavi bileşenleri vardır.

Düzgünleştirme

Vektör şekli çizdiğimizde bu şekil bir pikselin "parçasından" geçerse ne olur? Çizdiğimiz şeklin siyah, arka planın ise beyaz olduğunu varsayalım. O pikseli hiç renklendirmeli miyiz? Boyadıysak ne renk olmalı? Siyah mı, gri mi, yoksa başka bir şey mi?

Düzgünleştirme işlemi, pikselleri doldururken hangi rengi kullanmamız gerektiğini belirler. En basit versiyonu gri tonlamalı düzeltme olarak adlandırılır ve piksellerin üç bileşenini eşit şekilde işler. Piksel yarı kaplanmışsa (basit olması için bir saniyeliğine beyaz üzerine siyah metin olduğunu varsayalım), her bileşenin yarı parlaklığa ayarlanacağını (kesinlikle biliyorum) düşünürsünüz (kesinlikle öyledir ki), ama aslında bundan daha karmaşıktır: Gama'yı hesaba katmanız gerekir, bu da büyük olasılıkla hiçbir zaman tam olarak bu değere ayarlamayacağınız anlamına gelir. Elbette bu konu biraz karmaşık hale geliyor ancak bu, giriş konusuna giriş olduğu için burada buna girmeyeceğim. Bilinmesi gereken önemli nokta, gri tonlamalı yumuşatmanın piksel düzeyinde ele alındığı ve aslında çok daha iyi bir hale getirebileceğimizdir.

Şekil 2 - Düzeltilmiş kenarlı ve sert kenarlı — Şekil 2 - Düzeltilmiş kenarlar ile sert kenarlar arasındaki fark

Şekil 2'de aynı üçgenin çizildiğini görebilirsiniz ancak sol tarafta kenar yumuşatma etkin, sağda ise devre dışı bırakılmıştır. Gördüğünüz gibi, yumuşatma etkin olduğunda üçgen yalnızca pikselin bir kısmından geçtiğinde pikseller gri tonları olur. Ancak devre dışı bırakıldığında piksel düz siyah veya düz beyaz olarak doldurulur ve şekil pürüzlü görünür.

Metin Oluşturma

Bir tarayıcı, temelde vektör şekli olan bir metni oluştururken aynı sorunla karşılaşırız: Metin karakterleri yalnızca bazı pikselleri kısmen dolduracağından bu piksellerin nasıl doldurulacağına ilişkin bir strateji geliştirmek istiyoruz. İdeal olarak, metni okumayı daha kolay ve keyif verici hale getirdiği için yumuşatılmış metin kullanmak istiyoruz.

Bununla birlikte, netleştirmeye yönelik gri tonlama yaklaşımının bunu ele almanın tek yolu olduğu ortaya çıktı. Piksellerin RGB bileşenlerini nasıl etkinleştirdiğimiz konusunda biraz daha seçici bir yaklaşım benimsenir. Bu sürece alt piksel düzeltme adı verilir. Özellikle de Microsoft'un NetType ekibi, yıllar içinde bu alanda ilerleme kaydetmek için epey zaman ve çaba harcadı. Google Analytics artık çok daha yaygın ve tüm büyük tarayıcılar tarafından dar kapsamlı bir şekilde kullanılıyor.

İlk olarak, her bir pikselin aslında ayrı kırmızı, yeşil ve mavi bileşenlerden oluştuğunu bildiğimizden, söz konusu piksel için bu bileşenlerin her birinin ne kadar "açılması" gerektiğini tespit ederiz. Bir piksel sol taraftan "yarı kaplanmışsa", kırmızı bileşeni tamamen açabilir, yeşil bileşeni yarıya kadar kapatabilir ve maviyi kapalı tutabiliriz. Bu işlem genellikle "ekranın yatay çözünürlüğünü üçe katlama" olarak tanımlanır ve her pikselin tek bir birim değil yan yana üç ayrı bileşen olması esasına dayanır.

Şekil 3 - Gri tonlama ve alt piksel kullanarak kenar yumuşatma

Yukarıdaki Şekil 3'te, sol tarafta her bileşeni eşit şekilde ele aldığımızı ve her birinin eşit şekilde açıldığını veya kapatıldığını (gri tonlama) görebilirsiniz. Sağ tarafta ise alt piksel yaklaşımını kullanıyoruz. Bu yaklaşımda her bileşeni (kırmızı, yeşil ve mavi), çizilen şekille ne kadar örtüştüğüne bağlı olarak farklı şekilde etkinleştiriyoruz.

Bununla birlikte, tüm bunlara rağmen insanın görme yeteneği aslında kırmızı, yeşil ve mavi ışıkla aynı ağırlıkta değildir. Yeşile karşı kırmızı veya maviden çok daha hassasız. Bu da Darel Rex Finley'nin belirttiği gibi, gri tonlama efektinin belirgin bir faydası olsa da, her bileşeni ayrı ayrı etkinleştirmenin anlaşılırlık açısından 3 kat artış sağlamayacağı anlamına gelir. Yine de alt piksel düzeltmenin kullanılması kesinlikle yararlıdır ve bu, metinleri gri tonlamalı düzeltmenin kullanılmasına göre daha net gördüğümüz anlamına gelir.

Şekil 4 - Alt piksel yumuşatmalarına sahip metin. Genel bir etki oluşturmak için piksellerin bağımsız bileşenleri etkinleştirilir — Şekil 4 - Alt piksel düzeltme sonrası metin. Genel bir etki oluşturmak için piksellerin bağımsız bileşenleri etkinleştirilir

Kovaya hazır olun

Tüm bunlar geliştiriciler için ne anlama geliyor? Chrome açısından bakıldığında, en azından metin oluşturmak için hem gri tonlamalı hem de alt piksel yumuşatmalarının bir karışımı vardır ve hangisini alacağınız birkaç ölçüte bağlıdır. Ancak öncelikle katmanları anlamamız gerekiyor çünkü önemli kriter bu. Katmanlarla ve bunların Chrome tarafından dahili olarak nasıl kullanıldığını görmediyseniz Tom Wiltzius, öncelikle okumanız gereken konuyla ilgili harika bir giriş yazdı.

Katmanlar hakkında bilgi sahibi olduğunuzu ya da hakkında yeni yazılar okuduğunuzu varsayarsak devam edelim. Sayfada donanım birleştirme etkinleştirilmişse ve kök katman olmayan bir katmanda metin içeriğiniz varsa bu katman varsayılan olarak gri tonlamalı düzeltme kullanılarak oluşturulur. Geliştiriciler, öğeleri kendi (kök olmayan) katmanlarına dönüştürmek için saldırıya başvurduklarında (translateZ kullanımı gibi) metnin farklı şekilde oluşturulduğunu genellikle fark ederler. Geliştiriciler çoğu zaman "yeni katman" tetikleyicilerini JavaScript veya CSS üzerinden anında uygular ve bu durum, metin oluşturma işleminin alt pikselden gri tonlamaya geçmesine neden olur. Oluşturma değişikliğini neyin tetiklediğini bilmiyorsanız bu durum kafa karıştırıcı olabilir. Ancak metniniz kök katmanda yer alıyorsa, alt piksel düzeltmesi ile oluşturulmalıdır. Böylece, metni çok daha kolay okunur.

Ancak web'deki her şey gibi değişiyor. Chrome'da, kök olmayan katmanlardaki metinler için alt piksel düzeltme, katmanın üç ölçütü karşılaması koşuluyla etkinleştiriliyor. Bu ölçütlerin bugün geçerli olduğunu belirtmekte fayda var. Ancak muhtemelen bu ölçütler değişecek ve zaman içinde daha fazla destek kaydı görebilirsiniz. Günümüzde bu ölçütler şunlardır:

Katmanın arka planı tamamen opak bir renkte. border-radius değerinin veya varsayılan olmayan bir background-clip değerinin kullanılması, katmanın opak olmamasına neden olur ve metin oluşturma işlemi gri tonlamalı düzeltmeye geri döner.
Katmana yalnızca kimlik dönüştürme veya integral çeviri uygulanabilir. İntegral, yuvarlatılmış değerleri ifade eder. Dolayısıyla, x bileşeni (20.2px) integral olmadığından, translate(20.2px, 30px) örneğinde olduğu gibi gri tonlamalı düzeltme yapabilir. Kimlik dönüştürme, varsayılan değeri dışında ek döndürme, çevirme veya ölçeklendirme yapılmayacağı anlamına gelir.
Katman 1,0 opaklığa sahiptir. Opaklıkta herhangi bir değişiklik, yumuşatma işlemini alt pikselden gri tonlamaya dönüştürür.

Şekil 5 - Önce ve sonra: gri tonlama ve alt piksel karşılaştırması. Sağdaki metnin renk kenarlarına dikkat edin — Şekil 5 - Öncesi ve sonrası: gri tonlama ve alt piksel karşılaştırması. Sağdaki metnin renk kenarlarına dikkat edin

Dikkat edilmesi gereken son bir nokta, CSS animasyonu uygulamanın yeni bir katmanın oluşturulmasına neden olabileceği, requestAnimationFrame kullanmanın ise oluşturulmayacağıdır. Bazı geliştiriciler, metin oluşturma farklılıkları nedeniyle CSS animasyonlarının kullanılmasını engellemiştir. Dolayısıyla, metin oluşturma farklılıkları nedeniyle öğelere animasyon eklemek için JavaScript kullanıyorsanız bu güncellemenin sorunları giderip gidermediğini kontrol edin.

Böylece Chrome bunu kapsamaktadır. Diğer tarayıcılar da bulunduğu sürece, Chromium'a geçiş yapan Opera'nın Chrome'un davranışlarıyla yakından eşleşmesi gerekir. Internet Explorer, Windows 8'in Metro modunda olmasa da neredeyse tüm metinler için alt piksel düzeltmesini (ClearType'ı etkinleştirdiyseniz elbette!) kullanıyor gibi görünüyor. WebKit'in Blink'e yakınlığı düşünüldüğünde Safari, Chrome'a çok benzer şekilde davransa da daha fazla alt piksel düzeltmesi yapmaya olanak tanıyan bu yeni iyileştirmeler içermemektedir. Firefox, neredeyse tüm metinler için alt piksel düzeltmesi kullandığından büyük ölçüde Internet Explorer ile aynı şekilde davranır. Bu, kapsamlı bir liste değildir ve alt piksel yerine gri tonlamalı düzeltmenin kullanıldığı tüm tarayıcılarda olabilir. Ancak alt piksel düzeltmenin yaygın olarak ana tarayıcı grubunda kullanıldığını bilmekte fayda vardır.

Sonuç

Artık kenar yumuşatmanın nasıl çalıştığı ve özellikle düşük DPI'ya sahip cihazlarda site ve uygulamalarınızda metin oluşturma farklılıkları görmenizin nedeni hakkında biraz bilgi sahibisiniz. Chrome'un metin oluşturmaya yönelik uygulamasını takip etmek isterseniz şu hatalara yıldız eklemeniz gerekir: