Pitch, PPI et obtenir dimension Diagonale

[carbonathus]

Bonjour,

Je rencontre un problème d'affichage des fonts light et extra light sur un écran Dell à 120 € alors que sur des écrans Mac (ou Ecran PC de qualité), c'est parfait (suite de mon sujet précédent).

Après d'intenses recherches et un sujet de 4 pages sur ce forum, j'en arrive à la conclusion que le lissage est important (selon les navigateurs la qualité change), mais qu'il n'y a très nettement pas que ça.

Là, je tombe sur deux caractéristiques matérielles qui sont déterminantes et assez peu connues (elles vont ensemble et de pair, si l'une baisse, l'autre augmente)

1) c’est le « dot Pitch » des écrans (c'est l'espace entre deux pixels en fait).
2) Le PPI (nb de pixel par inch) !

Avec ça, je vois une différence qui explique clairement ce problème d'affichage des fonts Light et des dessins fins et clairs :

Mon écran Dell, E190S est à 0.29 de pitch et 86.27 de PPI (ce qui n'est pas glorieux)
Les écrans iMac27 (ou PC de qualité) sont autour des 0.25 de pitch et 108.79 de PPI (sacrée différence)

A noter qu'avec l'arrivée des pixels super denses sur les smartphones, iPad et aussi écrans, de nouvelles police très light, très raffinées font leur apparition. Les détails graphiques sont de plus en plus fins. On le remarque nettement et c'est tant mieux. De fait, avec une différence de 50 fois plus d'écart entre les pixels (pitch), les écrans bon marché doivent être pris en considération. Il peut y avoir des surprises. Je pense que cette donnée, dot Pitch, devient importante pour les perfectionnistes du web design.

Et d'après ce que j'ai lu, le critère dot Pitch de qualité se situe à <= 0.27 . Ce pitch influe surtout sur la qualité des textes.

Le PPI, c'est le nb pixels par inch, c'est inversement proportionnel au dot Pitch, et c'est donc logiquement tout aussi déterminant .

J'ai trouvé deux url intéressantes pour calculer le ppi et le dot Pitch d'un écran. (voir dessous)
et un java script, qui me semble pas mal : getPPI pour retourner le PPI of the current device.

Carbonathus
-------------------------------------------

Site intéressant pour calculer le dot pitch et le PPI (Dell E190S / PPI = 86.27 | iMac 27 / PPI = 108.79).

http://members.ping.de/~sven/dpi.html

http://thirdculture.com/joel/shumi/com****r/hardware/ppicalc.html

-----------------------------------------------

J'ai cherché partout des infos, et visiblement je ne suis pas le seul. Ce code (ci-dessous) est le seul que je trouve (plusieurs fois).

En fait, il est foireux et bugué, le résultat est faux.... comme tout ce que je lis sur l'obtention de la diagonale, ou le calcul des PPI. Mais dans ce script, une ligne est intéressante :

Outputs the number of Pixels Per Inch in the current Device (mon oeil !!! n'importe quoi ce truc, toujours 96 le résultat)

getPPI : function(){
var DOM_body = document.getElementsByTagName('body')[0];
var DOM_div = document.createElement('div');
DOM_div.style = 'width: 1in; visibility:hidden;';
DOM_body.appendChild(DOM_div);
var w = document.defaultView.getCom****dStyle(DOM_div, null).getPropertyValue('width');
DOM_body.removeChild(DOM_div);
return parseInt(w);
}

--------------------------------------

J'ai aussi trouvé une adresse très pratique pour apprendre, tester et modifier les javascripts ou html ou autres en direct :

on colle le script, on le compose ou on le modifie et go..... résultat en direct. Super ça !

http://www.w3schools.com/js/tryit.as...yjs_screen_all

[carbonathus]

Re : Pitch, PPI et obtenir dimension Diagonale

ça y'est, je suis à bout touchant :

Tout d'abord, voici la formule mathématique pour faire ce calcul des PPI : Il faut

1) la résolution
2) la taille écran en pouces (diagonale) : (Calculs de démo avec mon Dell E190S et un iMac 27)

- √(1280² + 1024²) ÷ 19 ≈ 86 PPI (et ça, c'est pas bon pour les textes !)
- √(2560² + 1440²) ÷ 27 ≈ 109 PPI

---------------------

La résolution s'obtient directement avec Javascript. No problem. Par contre, la diagonale du curent device ne peut pas être obtenue comme ça. Big problem !

En faisant mes recherches, j'ai trouvé des dizaines de post avec pour sujet : obtenir la diagonale. Mais aucune réponse satisfaisante, toutes foireuses, ou carrément : "c'est impossible, c'est une mesure matérielle".

Jusqu'à ce que je tombe sur un gars fabuleux (sur le site : http://www.siteduzero.com une très très bonne adresse). C'est un jeune ingénieur de 27 ans, qui s'est intéressé à la question et a trouvé une solution géniale que je qualifie d' EXTRA TERRRESTRE !

Son pseudo : Stucki | caractéristique : Génie

Voici donc la première solution véritablement efficace et subliminale que je n'ai jamais vue pour calculer et obtenir la valeur de la diagonale d'un curent device screen.

C'est un petit bijou ce script ! car créer et poser une div invisible de 1inch2 absolu sur l'écran, compter ses pixels, pour ensuite en déduire la largeur matériel de l'écran, c'est vraiment une idée à tomber par terre.

J'espère et je suis assez sûr que d'autres en profiteront.

Personnellement, je suis très heureux de poser ce script inédit (à mon avis) sur le forum de Joomla.fr, qui lui aussi est très sympa et que j'apprécie beaucoup.

ENJOY !!! et merci Stucki :
--------------------------------
.....
</head>
<body>
<h3>Your Screen:</h3>
<div id="ppitest" style="width:1in;height:1in;visible:hidden;padding :0px"></div>

<script>
var widthPPI = document.getElementById('ppitest').offsetWidth;
var heightPPI = document.getElementById('ppitest').offsetHeight;
var screenWidth = screen.width / widthPPI;
var screenHeight = screen.height / heightPPI;
var diagonale = Math.sqrt((screenWidth * screenWidth) + (screenHeight * screenHeight));
alert(diagonale);
</script>
</body>
</html>

// passer ce code dans la fenêtre de : http://www.w3schools.com/js/tryit.as...yjs_screen_all et vous verrez, c'est épatant.
-----------------------------

A partir de là, ça devient du gâteau que de compléter le script pour qu'il calcule les PPI (formule ci-dessus), fasse le test écran, puis, si nécessaire, change la feuille de style ou redirige vers une page adéquate.

J'y travaille et sous peu, ce sujet sera résolu. Je n'y croyais plus.

Carbonathus

[carbonathus]

Re : Pitch, PPI et obtenir dimension Diagonale

Hello,

OUTCH ! Patatra !

J'ai pris un peu de temps hier soir pour terminer ce script, et là, mince, problème.

La diagonale que le script me donne est malheureusement une diagonale théorique mais pas matérielle.

Et c'est normal en plus ! la div de 1 inch contiendra toujours 96 pixels et elle inclut forcément le dot Pitch. C'est ça qui fait que le inch sera différent sur chaque écran et beaucoup plus grand sur les basses densités.

Ce qui m'a trompé, c'est que le résultat de var diagonale, sans me donner exactement la taille de l'écran qu'on connait (19, 17, 27 pouces) s'en approchait, et surtout je n'avais plus cet affreux 96 sur tout mes écrans, ça changeait d'un écran à l'autre.
(En ce sens, ce script n'est pas complètement nul. Je ne vais pas l'effacer).

Je me suis dit yeahhh c'est bon. Ben hier soir, ehhhh, retour case départ, recherches et réflexion.

J'ai trouvé des articles très bien documentés. Le plus intéressant expliquait que le problème majeur, c'est que l'ordinateur fait ces mesures en pixel et pas en mm. Cela induit beaucoup de questionnement et pose des problèmes. L'auteur avançait même l'idée que l'évolution amènerait les constructeurs à modifier cet état de fait.

Le résultat c'est qu'une ligne de 1 cm, ne sera jamais juste et en vraie grandeur à l'écran. A l'impression si !

Il faudrait que les constructeurs d'écran intègre la valeur de la diagonale matérielle comme donnée numérique dans la puce. Alors tout pourrait être résolu. Mais c'est pas Toyota,... ils ne vont pas récupérer les écrans pour faire cela. Donc c'est cuit !

-------

Dans mon précédent sujet, nous avons cherché à résoudre la question avec pixelRatio. Mais là, c'est un truc qui a été mis au point par apple (si j'ai bien lu) pour résoudre son problème de haute densité des écrans. Il ne donne que deux valeurs : 1 ou 2 (peut-être aussi 1.5 aujourd'hui, pas sûr). En fait c'est : haute densité ou les autres ! Evidemment les faibles densités (pitch > 0.27) rentre dans la catégorie des "autres". Ils n'allaient pas s'ennuyer avec ces vieilleries. Iomart si tu me lis, voilà pourquoi nous avions 1 partout.

--------

Bref, le résultat des courses c'est qu'il ne sera certainement pas possible de repérer ces écrans faibles densités et que Damien, tu avais raison, foutons-nous de ça !

Le point positif, c'est que maintenant je sais exactement pourquoi :O) il va juste falloir trouver une façon manuelle et pas trop repoussante, de proposer au visiteur qui ne peut pas lire, un changement de feuille de style.

Les écrans Retina de bureau, nous réservent aussi de belles surprises. Il y aura des sacrées différences de taille. On va bien s'amuser !
Mais sûr, pour ça, il y aura des solutions.

Bye et à bientôt :O)

Carbonathus