Blog yazısı, metin ağırlıklı CSS düzenlerinin px yerine ch ile boyutlandırılmasını savunuyor

23 Ağustos'ta shkspr.mobi'de yayınlanan ve Hacker News'in ana sayfasına çıkan "Death to px, long live ch" başlıklı bir blog yazısı, metin ağırlıklı web siteleri geliştirenlerin düzenlerini piksel yerine karakter cinsinden ölçmeleri gerektiğini savunuyor — genişlikler için CSS ch birimi, dikey boşluklar için ise ex birimi kullanılıyor.

Pikseller göründükleri gibi değil

Yazı provokatif bir girişyle başlıyor: piksel, birçok geliştiricinin sandığı gibi kesin ve fiziksel bir büyüklük değil. Yüksek yoğunluklu ekranlarda tek bir CSS pikseli birden fazla donanım pikselini kapsayabilir ve büyük bir televizyonda görüntülenen bir CSS santimetresi genellikle gerçek bir santimetreden uzundur. Yazara göre CSS uzunlukları mutlak değil algısal olarak anlaşılmalı — 16px'lik bir yazı tipi telefonda, dizüstü bilgisayarda ve TV ekranında kabaca aynı boyutta görünür, çünkü her cihaz tipik izleme mesafesinden bakılır.

Bu çerçeve, izleyen argümanın zeminini hazırlıyor. Pikseller zaten insan algısına ilişkin varsayımlar içeriyorsa, yazarın mantığıyla, bunun yerine farklı ve içeriğe daha odaklı bir varsayım barındıran birimler seçmek de aynı derecede meşrudur.

Okuma kolonunu karakterlerle boyutlandırmak

Site ağırlıklı olarak metinden oluştuğu için belirtilen hedef, ortalama okuyucu için rahat bir satır uzunluğu; ekranın sabit bir payı değil. Bu yüzden ana içerik kolonu şu şekilde boyutlandırılıyor:

--width-content: min(75ch, 100%);

main { max-width: var(--width-content); }

ch birimi yazı tipinin genişliğini izler; yazar bunun "bir karakter" için mükemmel bir karşılık olmadığını kabul ediyor ama düzen amaçları için yeterince yakın olduğunu düşünüyor. 75ch ile sınırlanan bir kolon, yazı tipi ailesi, yazı boyutu veya kullanıcı tercihleri değiştiğinde satır uzunluğunu sabit tutar; min() ifadesi ise dar ekranlarda kolonun görüntü alanına daralmasına izin verir.

Aynı mantığın boşluklara uygulanması

Fikir padding ve margin'lere de uzanıyor. Yazara göre bir öğenin çevresindeki boşluk, o öğenin içerdiği metinle ilişkili olmalı; bu yüzden yatay boşluklarda da ch kullanılıyor. Karakter genişliğinin zayıf bir referans noktası olduğu dikey mesafelerde ise yazar, tipik bir küçük harfin yüksekliğine karşılık gelen ex birimini öneriyor.

Bir doktrin değil, bir deney

Yazı kendi tavsiyesi konusunda kayda değer derecede ölçülü. Yazar, stylesheet'teki tüm piksel değerlerini dönüştürmemiş; bu uygulamayı, daha önce HTML'lerinden CSS class'ları çıkardıkları bir projeye benzer bir deney olarak tanımlıyor. Ayrıca px veya başka herhangi bir birimi kullanmanın yanlış ya da olağan dışı bir yanı olmadığını açıkça belirtiyorlar; ch ve ex basitçe metin öncelikli bir site tercihlerine daha uygun düşüyor.

Neden önemli

Yazı, responsive tasarımdaki gerçek bir gerilimi yakalıyor: görüntü alanı ve piksel temelli düzenler sayfayı ekrana, karakter temelli birimler ise içeriğe sabitler. Okuma ağırlıklı arayüzler için bu farkın pratik sonuçları var. Satır uzunluğu bir okunabilirlik değişkenidir ve ch ile ölçülen bir kolon, yazı tipleri ve kullanıcının yazı boyutu ayarları değiştikçe bunu sabit tutar; bu da yalnızca piksel veya yüzdeyle boyutlandırılan kolonlara kıyasla tarayıcı yakınlaştırması ve erişilebilirlik tercihleriyle genellikle daha iyi çalışır.

Karşı argüman yazının kendisinde duruyor. Yazarın savunduğu gibi px zaten algısal bir birimse, piksel temelli düzenler bozuk değildir — sadece farklı bir referansa sabitlenmişlerdir. Tutarlı boşluk sistemlerine, tasarım araçlarından kesin devirlere veya öngörülebilir bileşen boyutlandırmasına güvenen ekipler, ch, ex ve px'i karıştırmanın net bir kazanç olmadan sürtünme ekleyebileceğini düşünebilir. Çoğu geliştirici için eyleme dönüştürülebilir çıkarım, başlığın ima ettiğinden daha dar: okuma kolonlarını ve içeriğe orantılı boşlukları karakterlerle ölçün, stylesheet'in geri kalanına dokunmayın.