Methodology
Tasarım metodolojisi
EBOB indirgeme ile en-boy oranı. Cihaz önayarları geri dönüşüyle eksen başına miktar olarak DPI.
By Buğra SözeriPublished
Tasarım kümesi, iki hesaplayıcı içerir — en-boy oranı ve DPI/PPI. Her ikisi de her ön uç geliştiricinin ve grafik tasarımcının haftada birkaç kez başvurduğu saf matematik yardımcı programlarıdır.
En-boy oranı — Öklid algoritması
Genişlik ve yükseklik verildiğinde, indirgenmiş en-boy oranı, genişlik:yüksekliğin en büyük ortak bölenlerine bölümüdür. Tam sayıya yuvarlanan girdilerde özyinelemeli EBOB olan Öklid algoritmasını kullanırız:
ebob(a, b) = b == 0 ? a : ebob(b, a mod b)oran = (g / ebob, y / ebob)
1920×1080 için, ebob(1920, 1080) = 120, dolayısıyla indirgenmiş oran 16:9’dur. Tam sayı olmayan girdiler için (örn. 1920,5×1080,3), indirgemeden önce en yakın tam sayıya yuvalarız — yarım piksel ölçümler kaynak yazılımdan gelen gürültüdür, gerçek bir en-boy değil.
Ölçekleme
Widget ters yönü de destekler — “bana mevcut oranımla eşleşen X genişliği için bir yükseklik ver.” Formül yalnızca yeniYükseklik = yeniGenişlik × y / g’dir; kayan nokta sapması birikmesin diye orijinal (indirgenmiş) oran kullanılır.
Neden her zaman en küçük terime indirgenmez?
Bazı standart oranlar daha az okunabilir sayılara indirgenir. Sinema oranı 2,39:1 teknik olarak 239:100’dür; bu indirgenmiş formdur ancak tanımak daha zordur. Her iki terim de 1000’in altındaysa indirgenmiş oranı görüntüleriz; temiz şekilde indirgemeyen oranlar için ondalık formu (2,39:1) görüntüleriz.
DPI / PPI — fiziksel birim başına piksel
DPI (inç başına nokta) ve PPI (inç başına piksel), pratikte birbirinin yerine kullanılabilen terimlerdir — her ikisi de baskı ve ekran bağlamlarında inç başına piksel yoğunluğunu ölçer. Matematik:
DPI = √(g_px² + y_px²) / köşegen_inçKöşegen kullanılır çünkü ekranlar köşegen boyutla belirlenir (“15 inçlik dizüstü bilgisayar”, 15 inçlik köşegen ekran anlamına gelir). Eksen başına DPI, eksen başına uygulanan aynı formüldür; kare pikseller için (tüm modern ekranların sahip olduğu) iki değer aynıdır.
Retina sorusu
Apple, piksel yoğunluğunun insan gözünün tipik izleme mesafesinde tek tek pikselleri çözme yeteneğini aştığı ekranları tanımlamak için “retina” terimini kullandı. Eşik:
- Telefon (~30 cm görüntüleme): 326 PPI
- Tablet (~38 cm): 264 PPI
- Dizüstü (~51 cm): 220 PPI
- Masaüstü monitörü (~76 cm): 150 PPI
- TV (~3 metre): 50 PPI
Bunlar sabit eşikler değildir — insan gözü değişkenlik gösterir ve “tipik izleme mesafesi” varsayımı en büyük değişkendir. Modern telefonlar 400-500 PPI çalışır, eşiğin rahatlıkla üzerinde.
Köşegen spesifikasyonundan eksen başına DPI elde etme
Ekran pazarlaması inç cinsinden köşegeni belirtir (15,6 inçlik dizüstü), ancak hesaplayıcı eksen başına yoğunluk ister. Türetme, Pisagor teoremini tam sayı piksel ızgarasıyla zincirler. Piksel çözünürlüğü (g_px, y_px) ve köşegen D inç olan bir ekran için fiziksel genişlik ve yükseklik inç cinsinden g_inç² + y_inç² = D²koşulunu sağlar. Pikseller kare ise — 2000’lerin başından bu yana her düz panel ekranın varsaydığı — o zaman g_inç / y_inç = g_px / y_px. İki kısıtlamayıg_inç için çözmek şunu verir:
g_inç = D × g_px / √(g_px² + y_px²)DPI = g_px / g_inç = √(g_px² + y_px²) / D
Hesaplayıcının sunduğu köşegen-piksel formu budur. 27 inçlik monitörde 2560 × 1440 ekran için: √(2560² + 1440²) ≈ 2938 piksel köşegen, 27 inçe bölünür, 108,8 PPI verir. Kare pikseller için eksen başına değerler aynıdır, bu nedenle yatay ve dikey yoğunluk uyum sağlar. Kare olmayan piksel durumları (bazı eski SD video biçimleri, projektör donanım ölçekleme) ayrı g ve y girdileri gerektirir ve yalnızca köşegen kısayolunu bozar.
Kaynaklar ve referanslar
Öklid’in EBOB algoritması (Elementler, Kitap VII), en-boy oranı indirgeme için birincil alıntıdır. dppx ve dpi arasındaki ilişki de dahil olmak üzere CSS çözünürlük birimleri W3C CSS Values Level 4 spesifikasyonundadır. ISO 216, birçok DPI önayarını sabiteleyen √2 tabanlı A serisi kağıt boyutlarını tanımlar. “Retina eşiği” PPI rakamları, Apple’ın 2010 iPhone 4 duyurusundan ve “1 yay dakikası” görsel keskinlik eşiğinin (Snellen 20/20) sonraki hakemli incelemesinden türetilmiştir. Aşağıdaki Kaynaklar bloğuna bakın.
Varsayımlar ve sınırlamalar
- Yalnızca tam sayı piksel girdileri. Alt piksel ölçümler (1920,5 × 1080,3), EBOB indirgeme öncesinde en yakın tam sayıya yuvarlanır. En-boy oranı cevabı, kayan nokta kaynağı değil, yuvarlanmış ızgara içindir.
- Kare pikseller varsayılır. Modern düz paneller kare piksel kullanır; bazı eski NTSC / PAL içeriği ve projektör donanım ölçekleme, eksen başına DPI girdileri gerektiren dikdörtgen piksellere sahiptir.
- Köşegen inç girdisi çerçeveyi görmezden gelir. 15,6 inçlik dizüstü rakamı, aktif ekran köşegenini ifade eder. Kasayı ölçerseniz gerçek ekran DPI’den ~%5-10 daha düşük bir DPI alırsınız.
- Otomatik DPR-DPI köprüsü yok. CSS pikselleri ve cihaz pikselleri tarayıcının
window.devicePixelRatio’su ile ilişkilidir; hesaplayıcı fiziksel pikseller üzerinde çalışır ve dönüşümü kullanıcıya bırakır. - Oran görüntüleme üst sınırı 1000:1000. 1000 üzerindeki terimler için indirgenmiş oranlar (örn. 2,39:1 sinema), tamsayı çiftleri bekleyen aşağı akış araçlarını karıştırabilen ondalık olarak görüntülenir.
- Döşenmiş / çok monitörlü yapılandırmalar için DPI işleme yok. Hesaplayıcı bir seferde bir ekranla çalışır.
“CSS pikseli” neden “cihaz pikseli”nden farklı
Retina ekranda, 1×1 CSS pikseli aslında 2×2 veya 3×3 cihaz pikseline eşittir — tarayıcı, metni tipik izleme mesafesinde okunabilir tutmak için ölçeği artırır. Tarayıcıdaki devicePixelRatiobu oranı ortaya koyar. DPI hesaplayıcısı fiziksel pikseller üzerinde çalışır; özellikle CSS pikselleri için tasarlıyorsanız, bildirilen DPI’yi hedef devicePixelRatio’ya bölün.
Frequently asked questions
- Convertitive en-boy oranını nasıl hesaplar?
- W × H piksel boyutları verildiğinde, Öklid algoritmasını (Öklid'in Elementleri, Kitap VII, M.Ö. 300) kullanarak EBOB(W, H)'yi hesaplarız ve W/EBOB : H/EBOB'u indirgenmiş oran olarak döndürürüz. Örneğin 1920 × 1080: EBOB(1920, 1080) = 120, dolayısıyla oran 16:9'dur. Küçük tamsayı indirgeme 0,01 tolerans dahilinde mevcut olmadığında, tamsayı olmayan oranlar (örn. 2,35:1 anamorfik sinema) ondalık olarak görüntülenir.
- DPI / PPI hesaplayıcısı hangi formülü kullanır?
- PPI = √(W² + H²) / köşegen_inç; burada W ve H piksel sayısı ve köşegen_inç fiziksel ekran köşegenidir. Bu standart köşegen piksel yoğunluğu formülüdür. Not: PPI, yalnızca pikseller kare ise herhangi bir eksen boyunca inç başına pikseldir — kare olmayan pikseller (örn. DVB'nin 16:9 görüntüleme en-boy oranıyla 720 × 576) ayrı yatay ve dikey PPI değerleri gerektirir.
- DPI ve PPI arasındaki fark nedir?
- DPI (inç başına nokta), yazıcı çıktı çözünürlüğünü ifade eder — bir yazıcının doğrusal inç başına kaç mürekkep noktası koyduğu. PPI (inç başına piksel), ekran piksel yoğunluğunu ifade eder. İkisi, yazdırmak için görüntü çözünürlük meta verisini ayarlarken sayısal olarak birbirinin yerine geçebilir, ancak fiziksel olarak farklı miktarları tanımlarlar. CSS, tanım gereği 1dppx = 96dpi olan bir medya sorgusu birimi olarak 'dpi' kullanır (CSS Values Level 4).
- DPI hesabı ne kadar doğru?
- Formül, doğru girdiler verildiğinde matematiksel olarak kesindir. Birincil hata kaynağı fiziksel köşegen ölçümüdür: üretici tarafından bildirilen köşegen değerleri 0,1 inche yuvarlanır ve ±0,05 inç belirsizliği verir. 1920 × 1080 çözünürlüklü 15,6 inçlik ekran için PPI = 141,2 ± 0,5. Hesaplayıcıdaki cihaz önayarları üreticinin yayımladığı köşegeni kullanır ve bu, fiziksel ölçülen değerden %0-2 farklı olabilir.
- Kağıt en-boy oranları için ISO standardı nedir?
- ISO 216:2007, A serisi, B serisi ve C serisi kağıt boyutlarını tanımlar. A serisi kağıtların en-boy oranı 1:√2 ≈ 1:1,41421356…'dır. Bu, bir sayfanın yarıya katlanmasının aynı en-boy oranını ürettiği tek en-boy oranıdır. A0, tam 1 m² alan olarak tanımlanır; her sonraki An boyutu öncekinin yarı alanındadır. √2 oranı, A4'ün katlandığında tam olarak A5 vermesinin nedenidir.
Related
Published May 15, 2026