font-size-adjust

[calimo]

Bonjour !

Je viens de découvrir une propriété CSS géniale : font-size-adjust. Elle permet d'agrandir les polices si leur "oeil" (x-height) est plus petit, et donc de les faire paraitre d'une taille plus ou moins constante quelle que soit la police affichée. Par exemple, verdana parait très grande car elle a un x-height grand, Times, moins. Génial !

Sauf que… ça n'a pas l'air de fonctionner, et je n'ai rien trouvé au niveau du support CSS sur Webdevout
Alors deux questions :

• Comment connaitre la x-height (taille de l'oeil) de la police ?
• Comment faire fonctionner ça ?

J'ai essayé dans Fx 2.0, Konqueror et Opera… rien Je pense que je n'ai pas compris comment faire fonctionner ça . Quelqu'un a-t-il un example d'utilisation ?
Merci

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.1) Gecko/20061208 Firefox/2.0.0.1

[Mongo Bob]

Je ne vois pas la même définition :

Cette propriété adapte la taille des polices de caractère de remplacement pour que le "ex" efffectif soit le même que si la fonte demandée avait été disponible

Définition + complète :

Pour les écritures bicamérales, la taille apparente et la lisibilité subjective d'une police dépendent moins de la valeur de la propriété 'font-size' que de celle de 'x-height', ou plus utilement, du ratio de ces deux valeurs (x-height/font-size), appelé valeur d'aspect. Plus grande la valeur d'aspect, plus la police restera lisible dans les petites tailles. Et inversement, les polices, qui ont une valeur d'aspect plus faible, verront leur lisibilité se dégrader plus rapidement, à partir d'un certain seuil, que celles de plus grande valeur d'aspect. Les simples substitutions de polices, basées sur le seul critère de la taille de police, peuvent conduire à du texte illisible.

Par exemple, la police Verdana, très répandue, a une valeur d'aspect de 0.58, c.à.d. quand la taille de celle-ci est de 100 unités, sa valeur de hauteur-x (x-height) est de 58 unités. En comparaison, la police Times New Roman a une valeur d'aspect de 0.46. La police Verdana restera donc lisible plus longtemps que Times New Roman, la taille de police diminuant. Inversement, pour une taille donnée, Verdana semblera souvent "trop grande" quand substituée par Times New Roman.

Cette propriété permet de spécifier une valeur d'aspect pour un élément, ce qui préserve la valeur hauteur-x de la première police à choisir dans la liste des polices de substitution.

vient de :
http://www.yoyodesign.org/doc/w3c/css2/ ... size-props
La "x-height" de Verdana est donc fournie comme une définition. Elle est de 58 pour une taille de 100, après, il faut diviser la x-height par la taille pour obtenir la valeur d'aspect =0,58.
Les écritures bicamérales sont les écritures qui possèdent un "jeu" de caractères capitales et un de caractères minuscules, merci Wikipédia (la définition est introuvable dans mes Robert et Larousse, "bicaméral" ne figure que sous son acception politique).
C'est trés bien tout ça, mais je suis loin de piger tout, vais essayer de tester.

[calimo]

Définition + complète

Oui merci, je l'avais vue

La "x-height" de Verdana est donc fournie comme une définition. Elle est de 58 pour une taille de 100, après, il faut diviser la x-height par la taille pour obtenir la valeur d'aspect =0,58.

Certes, je l'avais bien compris, mais la question est : comment savoir que ce x-height est de 58 ? Je veux dire… il faut compter les pixels après avoir fait une copie d'écran d'une lettre en 100px ? Ou bien il y a un moyen plus pratique de le trouver ?

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.1) Gecko/20061208 Firefox/2.0.0.1

Edit: pour ceux qui sont perdus, voir la définition de X-height sur Wikipédia : http://en.wikipedia.org/wiki/X-height

[Mongo Bob]

Je répète donc :

La "x-height" de Verdana est donc fournie comme une définition

Qui a créé la Verdana a établi comme donnée de départ que pour une taille de 100, la x-height est de 58. C'est son droit, c'est un choix.

compter les pixels après avoir fait une copie d'écran d'une lettre en 100px? Ou bien il y a un moyen plus pratique de le trouver ?

Ca n'est pas un moyen si malpratique que ça, ça ne se fait qu'une fois à la création de la police.
C'est comme quand on te dit que un degré centigrade est la 100ème partie de la différence entre la température de la glace fondante et celle de l'ébullition de l'eau.

Oui merci, je l'avais vue Sourire

Si je donne des liens que tu connais déjà, c'est pas grave, y'en a peut-être d'autres qui visitent ce forum qui ne les connaissent pas (toujours l'ironie...).

[calimo]

C'est comme quand on te dit que un degré centigrade est la 100ème partie de la différence entre la température de la glace fondante et celle de l'ébullition de l'eau.

Excellente illustration. Pour savoir la température, il me faut donc un thermomètre.

Ici c'est pareil, il faut un "x-height-o-mètre" ( ) pour mesurer la hauteur du x-height, parce qu'à part l'auteur de la police, personne ne peut connaitre ce x-height a priori (on peut l'estimer, l'URW Chancery a évidemment un x-height plus bas que la DejaVu, mais ça reste une estimation fort peu précise).

Du coup j'ai peut-être pas envie de le faire pour chaque police que j'utilise, même si j'en utilise que 2 ou 3 sur une page (de plus, je suppute qu'il existe un moyen plus efficace )

(Et puis après restera toujours la questiond e le faire fonctionner… )

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.1) Gecko/20061208 Firefox/2.0.0.1

[Mongo Bob]

Là, ils le font fonctionner :
http://www.w3schools.com/css/tryit.asp? ... ize-adjust
http://www.w3schools.com/css/pr_font_fo ... adjust.asp
On donne à la propriété font-size-adjust une valeur "none" ou "inherit" ou "number", passons sur les 2 1ères qui reviennent à ne pas utiliser du tout la propriété.
"number" doit être défini par un chiffre qui est la valeur d'aspect que je veux attribuer. Je crois que 0.58 est la valeur d'aspect courante pour Verdana, on peut la changer en jugeant du résultat dans le 1er lien.
Donc, pour faire fonctionner ça il faut donner à font-size-adjust une valeur d'aspect (en général un chiffre < que 1) choisie.
Ca veut pas dire que j'ai tout pigé.

NB : IE semble ignorer cette propriété. FF OK.

[Benoit]

Sauf que… ça n'a pas l'air de fonctionner, et je n'ai rien trouvé au niveau du support CSS sur Webdevout

C'est tout à fait normal, puisque Webdevout, comme les navigateurs, se base sur CSS 2.1 et pas le vieux CSS 2 de 1998 que tu cites.

Regarde http://www.w3.org/TR/CSS21/fonts.html#font-size-props et tu verras que font-size-adjust a été enlevé. Il existe encore dans le brouillon de CSS 3 Fonts http://www.w3.org/TR/css3-fonts/ , mais il n'a pas été touché depuis 2002 et les derniers éditeurs (se) sont barrés.

[Mongo Bob]

Donc cette propriété est dépréciée, le lien de w3schools que j'ai donné fait référence à css2 en effet... donc 2.0.

[calimo]

Là, ils le font fonctionner :
http://www.w3schools.com/css/tryit.asp? ... ize-adjust
http://www.w3schools.com/css/pr_font_fo ... adjust.asp
On donne à la propriété font-size-adjust une valeur "none" ou "inherit" ou "number", passons sur les 2 1ères qui reviennent à ne pas utiliser du tout la propriété.

Ben justement ça n'a pas l'air de fonctionner

C'est tout à fait normal, puisque Webdevout, comme les navigateurs, se base sur CSS 2.1 et pas le vieux CSS 2 de 1998 que tu cites.

Regarde http://www.w3.org/TR/CSS21/fonts.html#font-size-props et tu verras que font-size-adjust a été enlevé. Il existe encore dans le brouillon de CSS 3 Fonts http://www.w3.org/TR/css3-fonts/ , mais il n'a pas été touché depuis 2002 et les derniers éditeurs (se) sont barrés.

AArgh !
Ça explique que ce ne soit pas implémenté (ou c'en est la conséquence, enfin bref…)
C'est vraiment dommage , parce que c'est vraiment quelque chose qui manque, ça avait l'air super-intéressant !

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.2) Gecko/20070220 Firesalamandre Firefox/2.0.0.2

[Mongo Bob]

Ben justement ça n'a pas l'air de fonctionner

Si, si, ça fonctionne, tu as dû faire une mauvaise manoeuvre.
Modifie une valeur de font-size-adjust, clique sur "Edit the text and click me", et tu dois voir la taille du texte concerné se modifier à droite (c'est curieux, le mode d'emploi me paraissait clair).
Ceci dit, ce n'est pas parce que ça fonctionne dans leur test que c'est supposé fonctionner ailleurs. Je ne sais pas comment ils l'ont développé, leur test, ce qu'ils ont fabriqué derrière pour que ça marche, mystère.

[calimo]

Ben non ça marche pas… (tu te doutes bien que je l'ai fait !). Ce serait implémenté seulement sous Windows ? Tu es sous Windows ?

C'est simplement le code que tu mets à gauche qui est copié dans le cadre à droite lorsque l'on clique sur le bouton "Edit the text and click me". Mais rien à faire, je vois pas de différence, quelle que soit la modification que je fais au font-size-adjust (le reste est bien appliqué, par exemple si je fixe une taille)

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.2) Gecko/20070220 Firelimace Firefox/2.0.0.2

[Mongo Bob]

tu te doutes bien que je l'ai fait !)

Oui, j'avais juste envie d'ironiser un peu
Je suis sous Windows, le test de w3schools ne fonctionne qu'avec FF. IE6, Opéra : NON, aucun changement de taille, même à taper sur un tam-tam en hurlant, même à demander trés gentiment.
Bon, le + important, c'est pas que ce test fonctionne, c'est que la propriété fonctionne de façon générale.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.2) Gecko/20070219 Firefox/2.0.0.2

[calimo]

Eh bien, je viens de tester sous windows, et surprise... font-size-adjust fonctionne manifestement !

Et comme par hasard... Bug 130473 – font-size-adjust doesn't work on Linux and Mac.

Grrr, une propriété tellement utile
A voté

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

Edit : selon les commentaires à la fin, il semble y avoir espoir !

[calimo]

Effectivement, de retour sous Linux, le testcase échoue lamentablement

Code : Tout sélectionner

The following words should all be the same font size: Text Text Text Text Text

Ils sont de plus en plus petit (sous Windows ils ont effectivement exactement la même taille).

Vais tester les nightlies

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.2) Gecko/20070220 Firerenard Firefox/2.0.0.2

[Calimo off sur nightly]

Je floode, désolé, mais c'est bôô, ça marche !
Vive Firefox 3.0 ! (en plus on a droit au fond turquoise pour vérifier que c'est vraiment le cas, à quelques pixels près !)

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9a4pre) Gecko/20070405 Minefield/3.0a4pre