> Parcourir les entrées

> Proposer une entrée

[CSS / Feuilles de style] Tailles de police en pixels

Soumis par Benoît Sibaud (Jabber id, page perso, ) le 21 août 2007. Non affecté.
0
Message de ~pjrm : « Pour voir le problème, changez la taille de police défaut de votre brouteur, disons à 30px ou 6px. Le taille de police des corps d'articles respecte ce défaut, tandis que la plupart des styles de texte sur la page spécifient "font-size: NNpx". C'est un problème pour les lecteurs / écrans pour qui 12px est trop petit (ou trop grand), et où on a donc changé la taille de police de défaut. Jusqu'à il y a quelques jours, aucune les styles de texte sur linuxfr respectaient ce défaut ; mais ce n'était pas un grand problème pour la plupart des brouteurs où on peut changer le zoom de texte, et tout le texte sur la page change. Mais si quelques styles respectent la taille de défaut et quelques styles ne la respectent pas, alors ces deux ensembles de styles seront de mauvaise proportion, et changer le zoom fait soit que l'un devienne trop grand soit que l'autre devienne trop petit. À noter qu'il y a deux possibilités pour régler ce problème : la plus évident, c'est bien sur d'ajouter un règle qui spécifie le font-size des corps d'articles. L'autre possibilité, que je soupçonne d'être meilleure, serait de changer tous les règles font-size de px en % (e.g. 90% au lieu de 10px). »

> Lire l'entrée (1 commentaire, moyenne: 1).  

Note : les commentaires appartiennent à ceux qui les ont postés. Nous n'en sommes pas responsables.

plus de détails pour corriger

Posté par Peter Moulder () le 23/08/2007 à 02:13. (lien). Évalué à 1.

Ce n'était pas aussi simple que j'avais pensé pour changer style.css selon cette deuxième possibilité que j'ai suggéré, car il y a plusieurs cas où un élément dont le font-size est réglé par le feuil de style contient un autre tel élément. Si tous les règles font-size emploient des pourcentages, alors ces deux pourcentages se multiplient dans ce cas ; donc on doit considérer l'arborescence (ou au moins le parentage) quand on change les font-size px en %.

Par exemple, si l'arborescence que j'ai écrit dessous est bonne, alors :

main * menubartop = 13px; donc menubartop = 13/main = 130% si on a voulu que main (et le corps des articles) ait une font-size de 10px.
lsfnbanner est toujours l'enfant de menubartop, et on veut menubartop=13px, lsfnbanner=11px, donc lsfnbanner=11/13=85%.


Arborescence (et donc parentage) pour les classes que j'ai trouvées :

[Hmm, il semble que <pre> ne marche pas, donc j'emploie '>' pour indiquer profondeur/parentage.]


main, font-size="0.8em", disons 10px
> menubartop 13px
> > lsfnbanner 11px
> > > lsfnlink 10px
> smallmenubar 10px
> menubar 13px
> loginbox 10px
> > rubrique_info 12px
> otherboxtitle 11px
> otherbox 10px
> > formulaire 12px
> funbanner 10px
> titlediv 11px
> > newstitle 14px
> lefttopbox 13px
> newsdiv
> comments 12px
> connexe 12px
> footer 9px


Classes que je n'ai pas encore trouvé et donc dont je ne sais pas encore le parentage (et qui ont un règle font-size dans css/style.css) :


archivelink
adminall
menuevent
menuaccroche
newsletter
leftbox (mais leftcol existe)
tipdiv
polldivtitle
boardindex
journalbody


Pour le cas commun où le seul parent dont la font-size est spécifié est main, j'ai écrit un scripte perl :


perl -pe 's#(font-size: )([0-9]{1,2})px#$1 . sprintf("%d%%", $2 * 100. / 10.)#ge' < style.css > test-style.css


(Le fragment "/ 10." assume qu'on veut que main et le corps des articles ont une font-size de 10px ; change-le si tu veux.)

Après, on peut changer à main les ~5 classes dont le parent n'est pas main. Si 10px est la bonne font-size de corps, alors on peut aussi ignorer rubrique_info et formulaire, dont le parent a font-size:10px ; ce qui laisse :


lsfnbanner (11px, parent=13px, donc 11/13=85%)
lsfnlink (10px, parent=11px, donc 10/11=91%) et
newstitle (14px, parent=11px, donc 14/11=127%).


(Sans compter ces classes que je n'ai pas trouvé ; supposons que chacune soit n'est plus employé par le site, soit est comme la plupart des classes en ce qu'elle a un parent dont la font-size est (environ) 10px.)

Si on préfère la première possibilité (viz. spécifier une font-size pour les corps des articles), alors je suggère changer la font-size de main de 0.8em en 10px (ou la taille qu'on veut). Il semble que div.main couvre tout. [Si c'est vrai, alors on se demande si on devrait changer div.main en body dans le feuille de style, et supprimer son div des pages.]

Je peut envoyer le style.css ainsi changé si tu veux (dis-moi quelle adresse ou comment envoyer).

pjrm.

[ Répondre ]

Revenir en haut de page