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

Düzgünleştirmeye Giriş 101

Paul Lewis

Giriş

Kenarları yumuşatma, web grafiklerinde önemli bir işlevdir. Ekranlarımızda net metin ve düzgün vektör şekilleri kullanmamızın nedeni de budur. Günümüzde tarayıcılarda kullanılan anti-aliasing konusuna yönelik, metin oluşturma söz konusu olduğunda en bariz birkaç yaklaşım vardır. Anahtarların anonimleştirmesi için kullanılan algoritma, beklenmedik görsel sonuçlara yol açabilir. Bu makalede, antialiasing yaklaşımlarına göz atacak ve piksellerin nasıl çizildiğini göreceğiz.

Tüm ekranlarımız, hepimizin bildiği gibi piksellerden oluşur. Her birinde kırmızı, yeşil ve mavi (RGB) bileşenler bulunur. Devasa bir blok ızgarasıdır. Uzakta resimleri, metinleri ve simgeleri görürüz, ancak yakından baktığımızda RGB bileşenleri ızgarasını ve her şeyin nasıl oluştuğunu görebiliriz.

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

Düzgünleştirme

Peki bir vektör şekli çizdiğimizde ve bu şekil bir pikselin "kısmen"inden geçtiğinde ne olur? Çizdiğimiz şeklin siyah, arka planın beyaz olduğunu varsayalım. Bu pikseli renklendirmemiz gerekir mi? Renklendirdiğimizde hangi renk olsun? Siyah mı, gri mi yoksa başka bir şey mi?

Düzeltme işlemi, pikselleri doldururken hangi rengi kullanmamız gerektiğini belirler. En basit şekli gri tonlamalı düzeltme olarak adlandırılır ve piksellerin üç bileşenini eşit şekilde ele alır. Pikselin yarısı kaplanmışsa (ve basitliği korumak için bir saniyeliğine beyaz üzerine siyah metin olduğunu varsayalım), her bileşenin yarı parlaklığa ayarlandığını düşünebiliriz (kesinlikle öyle olduğunu biliyorum) ama aslında, bundan daha karmaşıktır: Gama'yı hesaba katmanız gerekir, yani bu değeri hiçbir zaman tam olarak ayarlayamayacağınız anlamına gelir. Bu elbette işleri biraz karmaşık hale getiriyor, ancak bu konuya giriş olduğu için burada ayrıntıya girmeyeceğim. Bilinmesi gereken önemli nokta, gri tonlamalı düzeltmenin piksel düzeyinde ele alındığı ve aslında çok daha iyisini yapabileceğimizdir.

Şekil 2 - Kenar yumuşatma ile sert kenarların karşılaştırması — Şekil 2 - Kenar yumuşatma ve sert kenarlar

Şekil 2'de aynı üçgenin çizildiğini görebilirsiniz, ancak sol tarafta yumuşatma etkin ve sağ tarafında devre dışı bırakılmış. Gördüğünüz gibi, kenar yumuşatma etkinleştirildiğinde üçgen pikselin yalnızca bir kısmından geçtiğinde pikseller gri tonlarıyla gösterilir. 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ı, özünde bir vektör şekli olan metin 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 stratejiye sahip olmak isteyeceğiz. Okumayı daha kolay ve keyifli hale getireceğinden, ideal olarak metnin ön yumuşaması gerekir.

Ancak, düzleştirmeye yönelik gri tonlamalı yaklaşımın bu sorunu çözmenin yalnızca tek yolu olduğu ortaya çıkmaktadır. Piksellerin RGB bileşenlerini nasıl etkinleştireceğimiz konusunda biraz daha seçici olmak genellikle tercih edilen bir yaklaşımdır. Bu işleme alt piksel düzeltme adı verilir ve özellikle Microsoft'un ClearType ekibi yıllar boyunca bu konuda ilerleme kaydetmek için çok fazla zaman ve çaba harcadı. Günümüzde çok daha yaygın bir şekilde kullanılmaktadır ve tüm büyük tarayıcılar tarafından daha fazla veya daha az kullanılır.

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

Şekil 3 - Gri tonlama ve alt piksel kullanarak çözümleme

Yukarıdaki Şekil 3'te, sol tarafta her bir bileşene eşit işlem yaptığımızı ve her birinin eşit şekilde açık veya kapalı olduğunu (gri tonlamalı) görebilirsiniz. Bununla birlikte, sağ tarafta alt piksel yaklaşımını kullanıyoruz. Bu alt piksel yaklaşımı, çizilen şekille ne kadar çakıştığına bağlı olarak her bileşeni (kırmızı, yeşil ve mavi) farklı şekilde etkinleştirir.

Bununla birlikte, insan görüşü aslında kırmızı, yeşil ve mavi ışığın ağırlığında eşit değildir. Yeşile karşı hassasiyeti kırmızı veya maviden çok daha fazladır. Bu da, Darel Rex Finley'nin belirttiği gibi gri tonlamalı düzeltmeye kıyasla çok önemli bir avantaj sağlamasına rağmen, her bileşenin ayrı ayrı etkinleştirilmesinin netlik açısından 3 kat iyileşme sağlamadığı anlamına geliyor. Yine de alt piksel düzeltmesi kesinlikle faydalıdır ve metni, gri tonlamalı düzeltmenin kullanılmasına kıyasla daha net gördüğümüz anlamına gelir.

Şekil 4 - Alt piksel zımbalı metin. Genel efekti oluşturmak için piksellerin ayrı ayrı bileşenleri etkinleştirilir — Şekil 4 - Alt piksel düzeltme metni. Genel efekti oluşturmak için piksellerin ayrı ayrı bileşenleri etkinleştirilir

Hız kesmeyin

Geliştiriciler olarak tüm bunlar bizim için ne anlama geliyor? Chrome açısından bakıldığında, metin oluşturmak için kullanılan gri tonlamalı ve alt piksel düzeltmesinin bir karışımı vardır. Hangisini alacağınız birkaç ölçüte bağlıdır. Bununla birlikte, başlangıçtaki ana kriter olduğu için katmanlar hakkında biraz bilgi edinmemiz gerekiyor. Katmanlarla ve bunların Chrome tarafından dahili olarak nasıl kullanıldığını henüz görmediyseniz Tom Wiltzius, öncelikle okumanız gereken konuya harika bir giriş yazısı yazdı.

Katmanlara aşina olduğunuzu ya da katmanları bir süre önce okuduğunuzu varsayarsak, devam edelim. Sayfa için donanım birleştirme etkinleştirilmişse ve kök katman olmayan bir katmanda metin içeriğiniz varsa varsayılan olarak gri tonlamalı düzeltme kullanılarak oluşturulur. Geliştiriciler, öğeleri kendi (kök olmayan) katmanlarına sokmak için öğelere saldırı uyguladıklarında (translateZ kullanarak) metinlerin farklı şekilde oluşturulduğunu genellikle fark ederler. Geliştiriciler çoğu zaman JavaScript veya CSS üzerinden anında "yeni katman" tetikleyicileri uygulayarak metin oluşturmanın alt pikselden gri tonlara geçmesine neden olur. Oluşturma değişikliğini neyin tetiklediğini bilmiyorsanız kafa karıştırıcı olabilir. Ancak metniniz kök katmanda yer alıyorsa alt piksel düzeltmesi ile oluşturulması gerekir ve dolayısıyla okunması çok daha net olur.

Ancak web ile ilgili her şey gibi bu da değişiyor. Katmanın üç ölçütü karşılaması koşuluyla, kök olmayan katmanlardaki metinler için Chrome'da alt piksel düzeltmesi etkinleştiriliyor. Bu ölçütlerin bugün geçerli olduğunu söylemekte fayda var. Ancak büyük olasılıkla değişeceği için zaman içinde daha fazla vakanın ele alındığını göreceksiniz. Şu anda bu kriterler şunlardır:

Katman tamamen opak bir arka plan rengine sahiptir. Özellikle border-radius veya varsayılan olmayan background-clip değeri kullanıldığında, katmanın opak olmadığı kabul edilir ve metin oluşturma işlemi gri tonlamalı düzeltmeye geri döner.
Katmana yalnızca kimlik dönüşümü veya integral çeviri uygulanabilir. İntegral terimi, yuvarlanmış değerleri ifade eder. Dolayısıyla, örneğin 20.2px, x bileşeni integral olmadığından, translate(20.2px, 30px) gri tonlamalı düzeltmeyle sonuçlanır. Kimlik dönüşümü, sadece varsayılan ayarı dışında herhangi bir ek döndürme, çevirme veya ölçeklendirme uygulanmadığı anlamına gelir.
Katman 1,0 opaklığa sahiptir. Opaklıktaki herhangi bir değişiklik, alt piksel olan kenar düzeltme özelliğini gri tonlamaya dönüştürür.

Şekil 5 - Öncesi ve sonrası: Gri tonlama ve alt piksel karşılaştırması. Sağdaki metnin renkli kenarlığına dikkat edin — Şekil 5 - Öncesi ve sonrası: Gri tonlama ile alt piksel karşılaştırması. Metnin sağ tarafındaki renkli kenara dikkat edin

Unutulmaması gereken son bir nokta da CSS animasyonu uygulanmasının yeni bir katman oluşturulmasına neden olabileceği, requestAnimationFrame kullanıldığında ise bu durumun meydana gelmediğidir. Bazı geliştiriciler için, ima edilen metin oluşturma farklılıkları, CSS animasyonlarının kullanımını engelliyordur. Bu nedenle, metin oluşturma farklılıkları nedeniyle öğeleri canlandırmak için JavaScript kullanıyorsanız bu güncellemenin sorununuzu düzeltip düzeltmediğini kontrol edin!

Chrome da bu kadar. Diğer tarayıcılarla karşılaştırıldığında, Opera'nın Chromium'a geçiş sürecinde Chrome'un davranışlarına yakın olması gerekir. Internet Explorer, Windows 8’in Metro modunda olmadığı anlaşılsa da neredeyse tüm metinlerde alt piksel düzeltme özelliğini kullanıyor (elbette,ClearType'ı etkinleştirdiyseniz!). WebKit'in Blink'e yakınlığı nedeniyle Safari, Chrome'a çok benzer davransa da daha fazla alt piksel düzeltmesine olanak tanıyan bu yeni geliştirmeler içermemektedir. Firefox, neredeyse tüm metinler için alt piksel düzeltmesini kullandığından genellikle Internet Explorer ile aynı şekilde davranır. Elbette bu kapsamlı bir liste değildir ve alt piksel yerine gri tonlamalı düzeltmenin kullanıldığı tüm tarayıcılarda karşılaşılabilecek durumlar vardır. Ancak alt piksel düzeltmesinin ana tarayıcı kümesinde yaygın olarak kullanıldığını bilmekte fayda vardır.

Sonuç

Bu nedenle, antialiasingin nasıl çalıştığı ve günümüzde özellikle düşük DPI'ya sahip cihazlarda sitelerinizde ve uygulamalarınızda neden metin oluşturma farklılıkları görebileceğiniz hakkında biraz bilgi sahibisiniz. Metin oluşturma ile ilgili olarak Chrome uygulamasını da takip etmek isterseniz aşağıdaki hatalara yıldız vermeniz gerekir: