Comment une taille de pixel CSS est-elle calculée?
En fouillant dans les unités CSS, j'ai rencontré une définition du pixel de référence. Cependant, je n'ai pas pu trouver une description cohérente et complète de sa relation avec l'unité de pixels CSS. J'ai fait quelques recherches sur cette question, mais elle n'est toujours pas claire pour moi.
1. Informations recueillies
1.1 Une définition de pixel
Il existe deux types/définitions distincts d'un pixel:
"Pixel de l'appareil" - un seul point physique sur un écran.
Et:
Pixel CSS - une unité correspondant le plus étroitement au pixel de référence. [ 1 ]
Deux concepts parallèles sous le même nom ne clarifient certainement pas la confusion. Je comprends parfaitement l'objectif de l'introduction du second, mais je trouve sa nomenclature trompeuse. Le pixel CSS est classé comme une unité absolue et:
"Les unités de longueur absolue sont fixées les unes par rapport aux autres." [ 1 ]
La déclaration ci-dessus semble assez évidente pour chaque unité, sauf pour le pixel. En suivant la spécification w3c:
"Pour un dispositif CSS, ces dimensions sont soit ancrées (i) en reliant les unités physiques à leurs mesures physiques, soit (ii) en reliant l'unité de pixels au pixel de référence.
(...) Notez que si l'unité d'ancrage est l'unité de pixels, les unités physiques peuvent ne pas correspondre à leurs mesures physiques. Alternativement, si l'unité d'ancrage est une unité physique, l'unité de pixels peut ne pas correspondre à un nombre entier de pixels de périphérique. "[ 1 ]
Compte tenu de la citation susmentionnée, je suppose que les unités absolues ne sont pas tout à fait absolues, car elles peuvent être ancrées au pixel de référence.
1.2 Le pixel de référence
Le pixel de référence lui-même est en fait une angular [ 2 ]:
"Le pixel de référence est l'angle visuel d'un pixel sur un appareil avec une densité de pixels de 96 dpi et une distance du lecteur d'une longueur de bras. Pour une longueur de bras nominale de 28 pouces, l'angle visuel est donc d'environ 0,0213 degrés." [ 1 ]
Ce qui est illustré sur l'image ci-dessous:
Malgré la définition du pixel de référence comme un angle visuel, nous pouvons lire plus loin:
"Pour lire à bout de bras, 1px correspond donc à environ 0,26 mm (1/96 pouce). "
En laissant de côté les incohérences, nous pouvons établir une valeur de l'angle:
α = 2 * arctan(0.026/142) = 0.02098°
where:
α — a value of the visual angle
Ainsi, une taille de l'unité affichée est égale à:
y = 2x * tan(0.01049°)
where:
y — a displayed unit size
x — a reading distance
Compte tenu de la formule ci-dessus, afin de calculer une taille d'unité, nous devons déterminer quelle est la distance de lecture réelle. Comme il peut varier selon les utilisateurs, sa catégorisation a été basée sur le DPI d'un appareil.
1.2.1 DPI
Pour plus de commodité, supposons que DPI == PPI.
Cette mesure nous permet de deviner un type d'affichage. Vérification rapide:
- Iphone 6 (4.7 ", 1334 × 750): 326 ppi;
- Sony Bravia 4K (54,6 ", 3840 × 2160): 75 ppp.
Donc, en général, plus PPI plus un utilisateur est assis près d'un écran, le plus grand est. Le tableau ci-dessous [] présente les recommandations de distance de lecture pour les appareils avec DPI particulier:
——————————————————————————————————————— | DPI | Taille de pixel | Distance de lecture | ————————————————————————————————————————————— ———————— |CRT PC | 96 | ~ 0,26646 mm | ~ 71 cm | |afficher | | | | ———————————————————————————————————————————— ————————— |LCD de l'ordinateur portable | 125 | 0,2032 mm | ~ 55 cm | |afficher | | | | ———————————————————————————————————————————— ————————— |Tablette | 160 | ~ 0,159 mm | ~ 43 cm | ————————————————————————————————————————— ————————————
Cependant, je ne sais pas comment ces valeurs de distance ont été obtenues. La relation au DPI est-elle décrite avec une fonction ou s'agit-il simplement d'une observation empirique?
1.2.2 Ratio de pixels de l'appareil
L'introduction de l'écran Retina a encore compliqué la question. Son PPI a tendance à être environ 2 fois plus grand que celui non-Retina, tandis qu'une distance de lecture recommandée devrait rester la même. Étant donné qu'une taille de pixel CSS ne correspond pas nécessairement à une taille de pixel de l'appareil, Je suppose que la taille de l'unité sur l'écran Retina est d'abord traduite en pixel de référence taille (exprimé en pixels de l'appareil), puis multiplié par le rapport en pixels. Est-ce correct?
1.2.3 Zoom
Lors d'un zoom avant, la taille de pixel de référence affichée augmente [ 4 ], la distance entre l'écran et l'ergonomie augmente. C'est assez contre-intuitif, car cela signifie que nous nous "éloignons" de l'écran, sans nous en rapprocher.
2. Questions
Pour conclure mes doutes et articuler les questions:
- Comment une taille de pixel CSS est-elle calculée lorsque l'unité d'ancrage est une unité physique?
- Comment établir la formule d'une relation entre DPI et distance de lecture?
- Comment une taille de pixel CSS est-elle calculée pour les périphériques non standard à haute résolution/PPP tels que les imprimantes et les écrans Retina?
Veuillez également me corriger si mon raisonnement n'est pas valide ou s'il me manque quelque chose. Merci pour les réponses.
3. Références
- Spécifications W3C
- inamidst.com, le site de Sean B. Palmer
- Mozzilla Hacks
- 1uirksmode.org
Je peux me tromper, mais je ne pense pas qu'il soit possible pour le pixel CSS d'avoir l'unité physique comme ancre.
Basé sur this article:
L'unité px est l'unité magique de CSS. Il n'est pas lié à la police courante et également non lié aux unités absolues . L'unité px est définie pour être petite mais visible, et telle qu'une ligne large horizontale de 1px peut être affichée avec des bords nets (pas d'anti-aliasing). Ce qui est net, petit et visible dépend de l'appareil et de la façon dont il est utilisé: le tenez-vous près des yeux, comme un téléphone portable, à bout de bras, comme un écran d'ordinateur, ou quelque part entre les deux, comme un livre? Le px n'est donc pas défini comme une longueur constante, mais comme quelque chose qui dépend du type d'appareil et de son utilisation typique.
MISE À JOUR: J'avais tort. Il est possible tout simplement pas implémenté dans aucun navigateur actuellement. Dans les cas où c'est effectivement le cas, selon la spécification: "ces dimensions sont soit ancrées (i) en reliant les unités physiques à leurs mesures physiques" ce qui signifie que 1px sera égal à 1/96e de pouce physique.
En ce qui concerne la relation entre DPI et distance de lecture dans le tableau, il faut que si DPI = 96, la distance de lecture soit ~ 71 cm ou 28 pouces et ces valeurs sont inversement proportionnelles signifiant un DPI plus élevé entraînera une distance de lecture plus petite.
À partir de là, il est facile de trouver une formule:
x = 125/96
y = 71/x
where:
x - ratio between second and first DPI value
y - reading distance for second DPI value
Pour les appareils à plus haute résolution, un exemple est donné plus bas dans l'article de Mozilla Hacks:
Prenons l'exemple de l'iPhone 4. Il est livré avec un écran 326 DPI. Selon notre tableau ci-dessus, en tant que smartphone, sa distance de visualisation typique est de 16,8 pouces et sa densité de pixels de base est de 160 DPI. Pour créer un pixel CSS, Apple a choisi de définir le ratio de pixels de l'appareil à 2, ce qui fait que iOS Safari affiche les pages Web de la même manière que sur un téléphone à 163 DPI.
Cela signifie donc que nous avons deux résolutions - physique (PPI) et CSS une (cssppi). Il semble que cssppi soit utilisé pour calculer la taille de pixel de référence, puis les fabricants d'appareils choisissent la quantité de pixels de référence qu'ils mapperont sur un pixel CSS (je suppose que ce nombre est égal à la valeur du rapport de pixels de l'appareil mais pas sûr à 100%).
Voici un tableau avec des comparaisons pour le ratio de pixels de certains appareils courants, PPI et cssppi: http://mydevice.io/devices/
Pour plus d'informations et de références, consultez les articles suivants: