Methodology
Méthodologie design
Rapport d’aspect via réduction GCD. DPI comme quantité par axe avec repli sur les préréglages d’appareils.
By Buğra SözeriPublished
Le cluster Designpropose deux calculateurs — rapport d’aspect et DPI/PPI. Les deux sont des utilitaires de mathématiques pures que chaque développeur front-end et graphiste utilise plusieurs fois par semaine.
Rapport d’aspect — algorithme d’Euclide
Étant donné la largeur et la hauteur, le rapport d’aspect réduit est largeur:hauteur divisé par leur plus grand diviseur commun. Nous utilisons l’algorithme d’Euclide (PGCD récursif) sur des entrées arrondies à l’entier :
pgcd(a, b) = b == 0 ? a : pgcd(b, a mod b)ratio = (l / pgcd, h / pgcd)
Pour 1920×1080, pgcd(1920, 1080) = 120, donc le ratio réduit est 16:9. Pour des entrées non entières (par ex. 1920,5×1080,3), nous arrondissons à l’entier le plus proche avant de réduire — les mesures en demi-pixel sont du bruit provenant du logiciel source, pas un aspect réel.
Mise à l’échelle
Le widget supporte également l’inverse — “donnez-moi une hauteur pour la largeur X qui correspond à mon ratio actuel.” La formule est simplement nouvelleHauteur = nouvelleLargeur × h / l en utilisant le ratio original (non réduit) pour que la dérive en virgule flottante ne s’accumule pas.
Pourquoi ne pas toujours réduire aux termes les plus bas ?
Certains ratios standard se réduisent en nombres moins lisibles. Le ratio cinéma 2,39:1 est techniquement 239:100, ce qui est la forme réduite mais plus difficile à reconnaître. Nous affichons le ratio réduit quand les deux termes sont inférieurs à 1000 ; pour les ratios qui ne se réduisent pas proprement, nous affichons la forme décimale (2,39:1).
DPI / PPI — pixels par unité physique
DPI (points par pouce) et PPI (pixels par pouce) sont des termes interchangeables en pratique — les deux mesurent la densité de pixels par pouce dans les contextes d’impression et d’écran. Les mathématiques :
DPI = √(l_px² + h_px²) / diagonale_poucesLa diagonale est utilisée car les écrans sont spécifiés par dimension diagonale (un “ordinateur portable 15 pouces” signifie un écran diagonal de 15 pouces). Le DPI par axe est la même formule appliquée par axe ; pour les pixels carrés (que tous les écrans modernes ont), les deux valeurs sont identiques.
La question de la résolution “retina”
Apple a inventé le terme “retina” pour décrire les écrans où la densité de pixels dépasse la capacité de l’œil humain à résoudre les pixels individuels à une distance de vision typique. Le seuil :
- Téléphone (vu à ~30 cm) : 326 PPI
- Tablette (~38 cm) : 264 PPI
- Ordinateur portable (~50 cm) : 220 PPI
- Moniteur de bureau (~75 cm) : 150 PPI
- Télévision (~3 m) : 50 PPI
Ce ne sont pas des seuils rigides — l’œil humain varie, et l’hypothèse de “distance de vision typique” est la plus grande variable. Les téléphones modernes affichent 400 à 500 PPI, confortablement au-dessus du seuil.
Dériver le DPI par axe à partir d’une spécification diagonale
Le marketing des écrans spécifie la diagonale en pouces (un ordinateur portable 15,6 pouces), mais le calculateur veut une densité par axe. La dérivation enchaîne le théorème de Pythagore avec la grille de pixels entière. Pour un écran de résolution en pixels (l_px, h_px) et de diagonale Dpouces, la largeur et la hauteur physiques en pouces satisfontl_po² + h_po² = D². Si les pixels sont carrés — ce que tout écran à panneau plat depuis le début des années 2000 suppose — alors l_po / h_po = l_px / h_px. Résoudre les deux contraintes pour l_po donne :
l_po = D × l_px / √(l_px² + h_px²)DPI = l_px / l_po = √(l_px² + h_px²) / D
C’est cette forme diagonale-pixels que le calculateur utilise. Pour un écran 2560 × 1440 sur un moniteur 27 pouces : √(2560² + 1440²) ≈ 2938 pixels diagonaux, divisé par 27 pouces, donne 108,8 PPI. Les valeurs par axe sont identiques pour les pixels carrés, donc la densité horizontale et verticale concordent. Les cas de pixels non carrés (certains formats vidéo SD legacy, mise à l’échelle de matériel de projecteur) nécessitent des entrées l et h séparées et brisent le raccourci diagonal.
Sources & références
L’algorithme GCD d’Euclide (Éléments, Livre VII) est la citation primaire pour la réduction du rapport d’aspect. Les unités de résolution CSS, y compris la relation entre dppx et dpi, se trouvent dans la spécification W3C CSS Values Level 4. ISO 216 définit les formats de papier de la série A basés sur √2 qui ancrent plusieurs préréglages DPI. Les chiffres PPI du “seuil retina” découlent de l’annonce de l’iPhone 4 d’Apple en 2010 et de la revue par les pairs du seuil d’acuité visuelle d’“1 arc-minute” (Snellen 20/20). Voir le bloc Sources ci-dessous.
Hypothèses & limites
- Entrées en pixels entiers uniquement.Les mesures sous-pixel (1920,5 × 1080,3) sont arrondies à l’entier le plus proche avant la réduction GCD. Le résultat du rapport d’aspect est pour la grille arrondie, pas la source en virgule flottante.
- Pixels carrés supposés.Les panneaux plats modernes ont des pixels carrés ; certains contenus NTSC / PAL legacy et la mise à l’échelle de matériel de projecteur ont des pixels rectangulaires et nécessiteraient des entrées DPI par axe.
- L’entrée diagonale en pouces ignore le biseau.Le chiffre de 15,6 pouces d’un ordinateur portable se réfère à la diagonale de l’écran actif. Si vous mesurez le châssis, vous obtiendrez un DPI ~5-10 % inférieur au DPI réel de l’écran.
- Pas de pont automatique DPR-vers-DPI. Les pixels CSS et les pixels physiques sont reliés par le
window.devicePixelRatiodu navigateur ; le calculateur opère sur des pixels physiques et laisse la conversion à l’utilisateur. - Limite d’affichage du ratio à 1000:1000.Les ratios qui se réduisent à des termes supérieurs à 1000 (par ex. 2,39:1 cinéma) sont affichés sous forme décimale, ce qui peut dérouter les outils en aval qui attendent des paires d’entiers.
- Aucune gestion du DPI pour les configurations multi-moniteurs en mosaïque. Le calculateur travaille un écran à la fois.
Pourquoi le “pixel CSS” est différent du “pixel physique”
Sur un écran retina, un pixel CSS 1×1 correspond en réalité à 2×2 ou 3×3 pixels physiques — le navigateur agrandit pour garder le texte lisible à une distance de vision typique. devicePixelRatio dans le navigateur expose ce ratio. Le calculateur DPI opère sur des pixels physiques ; si vous concevez spécifiquement pour des pixels CSS, divisez le DPI rapporté par votre devicePixelRatio cible.
Frequently asked questions
- Comment Convertitive calcule-t-il le rapport d’aspect ?
- Étant donné les dimensions en pixels L × H, nous calculons PGCD(L, H) en utilisant l’algorithme d’Euclide (Éléments d’Euclide, Livre VII, vers 300 av. J.-C.) et retournons L/PGCD : H/PGCD comme ratio réduit. Par exemple, 1920 × 1080 : PGCD(1920, 1080) = 120, donc le ratio est 16:9. Les ratios non entiers (par ex. 2,35:1 cinéma anamorphique) sont affichés sous forme décimale quand aucune réduction en petits entiers n’existe à une tolérance de 0,01.
- Quelle formule le calculateur DPI / PPI utilise-t-il ?
- PPI = √(L² + H²) / diagonale_pouces, où L et H sont des comptages de pixels et diagonale_pouces est la diagonale physique de l’écran. C’est la formule standard de densité de pixels en diagonale. Remarque : le PPI est techniquement des pixels par pouce le long de n’importe quel axe seulement si les pixels sont carrés — les pixels non carrés (courants en vidéo broadcast, par ex. le 720 × 576 DVB avec rapport d’aspect d’affichage 16:9) nécessitent des valeurs PPI horizontales et verticales séparées.
- Quelle est la différence entre DPI et PPI ?
- DPI (points par pouce) désigne la résolution de sortie de l’imprimante — combien de points d’encre une imprimante place par pouce linéaire. PPI (pixels par pouce) désigne la densité de pixels d’écran. Les deux sont numériquement interchangeables lors de la définition des métadonnées de résolution d’image pour l’impression, mais ils décrivent des grandeurs physiquement différentes. CSS utilise ’dpi’ comme unité de requête média (CSS Values Level 4) où 1dppx = 96dpi par définition.
- Quelle est la précision du calcul DPI ?
- La formule est mathématiquement exacte pour des entrées précises. La principale source d’erreur est la mesure physique de la diagonale : les chiffres de diagonale rapportés par les fabricants sont arrondis à 0,1 pouce, introduisant une incertitude de ±0,05 pouce. Pour un écran 15,6 pouces, 1920 × 1080, cela donne PPI = 141,2 ± 0,5. Les préréglages d’appareils dans notre calculateur utilisent la diagonale publiée par le fabricant, qui peut différer de la valeur physiquement mesurée de 0 à 2 %.
- Quelle est la norme ISO pour les rapports d’aspect du papier ?
- ISO 216:2007 définit les formats de papier des séries A, B et C. Les papiers de série A ont un rapport d’aspect de 1:√2 ≈ 1:1,41421356… C’est le seul rapport d’aspect où plier une feuille en deux produit le même rapport d’aspect. A0 est défini comme ayant exactement 1 m² de superficie ; chaque format An suivant a la moitié de la superficie du précédent. Le rapport √2 est pourquoi le A4 plié donne exactement du A5.
Related
Published May 15, 2026