[CSS] Taille des polices du forum

Présentation de la communauté, le site/forum/wiki etc...
Avatar de l’utilisateur
mélodie
Maître du Kyudo
Messages : 2784
Inscription : lun. 30 oct. 2006, 02:06
Localisation : Pyrénées

[CSS] Taille des polices du forum

Message par mélodie »

Bonjour,
Je règle toujours la taille des polices par défaut aux alentours des 13 à 15 pixels dans les préférences du navigateur.
Les caractères sur le forum me semblaient pourtant bien petits, et après avoir essayé un réglage à 18 pixels sans que ça change l'aspect de la page que je lisais, j'ai fait d'abord un 'Ctrl++' qui a effectivement grossi les caractères, puis j'ai regardé le code source :
La taille des caractères est fixée par défaut :scro-gneu-gneu!:

Serait-il possible de faire autrement ? :roll:
J'ai trouvé ce fil qui en parle sur Alsacréations, et cet article depuis le fil en question...
Bonne journée, Mélodie.
Avatar de l’utilisateur
gyo
Maître du Kyudo
Messages : 1049
Inscription : jeu. 19 avr. 2007, 10:40
Localisation : Nantes (44)

Message par gyo »

Coucou mélodie,

euh tu oublies un détail.. c'est quoi ton navigateur ! J'imagine que c'est firefox, si c'est le cas, tu peux fixer une taille mini à ne pas franchir dans les préférences du navigateur, ainsi tu vas dans Polices -> Avancés -> taille minimum et hop tu choisis la taille que tu veux. Sinon un autre moyen est de créer ta propre CSS et de la charger pour tous les sites et puis y a aussi Greasemonkey bon voilà, je ne peux pas t'en dire plus.
commentaire rédigé à l’aide d’un clavier ergonomique bépo
KISS MY ARCH
Avatar de l’utilisateur
mélodie
Maître du Kyudo
Messages : 2784
Inscription : lun. 30 oct. 2006, 02:06
Localisation : Pyrénées

Message par mélodie »

gyo a écrit :Coucou mélodie,
Hello gyo
euh tu oublies un détail.. c'est quoi ton navigateur ! J'imagine que c'est firefox, si c'est le cas, tu peux fixer une taille mini à ne pas franchir dans les préférences du navigateur, ainsi tu vas dans Polices -> Avancés -> taille minimum et hop tu choisis la taille que tu veux.
Les navigateurs se règlent tous de manière identique (je ne parle pas de IE que je ne connais pas) et comme dit dans mon post, c'est ce que je fais toujours.
Sinon un autre moyen est de créer ta propre CSS
Je lis difficilement les CSS, quant à créer la mienne... (c'est pour rire ?)
et de la charger pour tous les sites et puis y a aussi Greasemonkey bon voilà, je ne peux pas t'en dire plus.
Greamonkey pour générer des bouts de code javascript à la volée : non, je parlais d'accessibilité et de standards, pas de cas particuliers (je ne suis pas un cas particulier pour ce qui est de la vue).

De deux choses l'une : ou la CSS du forum peut être modifiée aisément, ou elle ne peut pas être modifiée aisément, auquel cas je poursuivrai à coups de 'Ctrl++' pour augmenter la taille de police à chaque page.

Si ça peut être modifié facilement (je ne sais pas non plus comment pbpBB fonctionne de ce point de vue) alors ça mérite d'être signalé.

Les codes fautifs dans le code source sont toutes les propriétés 'font-size':
http://pastebin.archlinux.fr/995

parce qu'elles sont exprimées en pixels. Je ne sais pas écrire une feuille de style, je sais par contre pour l'avoir lu, que les 'em' et les % ages permettent l'adaptation de la page par le navigateur. Ce qui produit un effet visuel correct quel que soit le réglage du navigateur (paramètre taille et propriété des polices comme tu disais) (déjà configuré pour et par l'utilisateur concerné, bien sûr) mais aussi, les 'em' et les pourcentages, bien employées pour le réglage des bordures, des tours de cadres, et autres mesurables permet aussi à la page d'être fluide et de s'adapter à toutes les tailles et résolutions de moniteurs.

De là la citation que j'ai faite du forum Alsacréations (où j'ai cherché le topic le plus approchant) et de leur article relatif à la question.
Avatar de l’utilisateur
mélodie
Maître du Kyudo
Messages : 2784
Inscription : lun. 30 oct. 2006, 02:06
Localisation : Pyrénées

Message par mélodie »

http://css.alsacreations.com/Tutoriels- ... vec-les-em
et

Code : Tout sélectionner

font-size
, le principe</h2>


Le fonctionnement de la propriété CSS

Code : Tout sélectionner

font-size
avec les est simple : <em>un élément HTML pour lequel on a demandé une taille de texte de aura un texte dont la hauteur représente X fois la hauteur du texte de son élément parent</em>.


Dite comme ça, la définition est un peu abrupte. Ce qu'il faut en retenir, c'est qu'en écrivant

Code : Tout sélectionner

font-size: Xem
on ne demande pas une taille de texte fixe et absolue, mais une taille de texte <em>proportionnelle</em> à la taille de texte de l'élément parent. La valeur demandée, en <em>em</em>, est un coefficient multiplicateur. Concrètement, un paragraphe dont la taille du texte serait aura un texte deux fois plus haut que le texte de l'élément qui contient ce paragraphe.



Pour être encore plus clair, prenons un petit exemple :
HTML :
body
<p>Ceci est un paragraphe.</p>
/body

CSS :

body {font-size: 15px;}
p {font-size: 0.8em;}
Dans cet exemple, le paragraphe aura une hauteur de texte de

Code : Tout sélectionner

15px * 0,8
, soit une hauteur de texte de 12 pixels.


Mais l'intérêt des n'est-il pas justement de se passer complètement des pixels pour la taille du texte, afin de ne pas figer la taille du texte et de permettre à l'utilisateur de la modifier ? (là, il y a un renvoi en bas de page, je crois) Si, bien sûr ! Alors comment faire ?

C'est très simple : il suffit de n'utiliser que des valeurs relatives, en ou en pourcentages, et de bannir les tailles de texte en pixels !


Voici cette fois un exemple un peu plus complet, et surtout plus accessible :
HTML :
body
div id="page"

div id="en-tete"
...
/div
div id="contenu"
...
/div
/div
/body

CSS :
html {font-size: 100%;}
body {font-size: 0.8em;}
div#en-tete {font-size: 1.2em;}
/* On augmente la taille du texte pour l'en-tête */
div#contenu {}
/* On ne modifie pas la taille du texte pour le contenu principal.
Du coup, le texte du contenu principal garde la taille du texte définie pour BODY */
_alexmyself
Chu Ko Nu
Messages : 405
Inscription : lun. 18 sept. 2006, 16:21
Localisation : france, yvelines 78

Message par _alexmyself »

la solution "em" est plutot bof vu qu'elle se rapporte toujours a une taille de font (celle par defaut si rien de défini)
la solution "%" est trop differente d'un navigateur a l'autre (100% d'un truc non défini ça peut valoir un paquet de chose du coup...)
les "px" sont vraiment les moins chiants a gerer
par contre dans firefox tu peut regler la resolution en "dpi" et ca devrait resoudre ton probleme, tapes comme adresse: "about:config"...bon le soucis c'est que je me souviens plus du nom de l'option mais.... :D
Avatar de l’utilisateur
kozaki
Chu Ko Nu
Messages : 422
Inscription : mer. 13 sept. 2006, 22:49
Localisation : London > . < Paris
Contact :

Message par kozaki »

+ 101 avec Melodie. Elle recommande simplement de respecter les standards web après tout.

Les tailles de polices relatives (comme les tailles de boxes : un contre-exemple bien pourri) permettent à tou-te-s de voir les pages dans les meilleurs conditions possibles quel que soit leur soft et leurs handicaps.
C'est la meilleure solution.
la solution "%" est trop differente d'un navigateur a l'autre (100% d'un truc non défini ça peut valoir un paquet de chose du coup...)
Justement non : on fixe la taille par défaut dès le départ, avec un
"html, body * { font-size 1em; } par exemple.
Ensuite on donne la taille des éléments en fonction de leur niveau sémantique : h1 150%, h2 130%, ..., p 70% par exemple.

Je dis ça mais je code des pages web bon an mal an depuis 2000 (en fait c la moitié de mon boulot).
~ Configs ~ PGP Key: 1C2A554EFF0157D9
« Demande un conseil à ton ennemi et fais le contraire (proverbe juif)
SVP intéressé par tout retour d'exp. sur Arch ARM en général, et sur portable (CrOS) en particulier.
Avatar de l’utilisateur
mélodie
Maître du Kyudo
Messages : 2784
Inscription : lun. 30 oct. 2006, 02:06
Localisation : Pyrénées

Message par mélodie »

kozaki a écrit :Je dis ça mais je code des pages web bon an mal an depuis 2000 (en fait c la moitié de mon boulot).
Y'a houhouou !!!!

Tu animes des sessions pour apprendre ? (j'ai lu sur les % il n'y a pas si longtemps, et j'aime beaucoup apprendre là-dessus).

_alexmyself : les % aussi j'aime bien, les 'em' je ne dis rien, c'est moins parlant, mais je pense que c'est pour les pages fluides, donc qui s'adaptent selon les résolutions ?
Avatar de l’utilisateur
vincentxavier
Elfe
Messages : 778
Inscription : ven. 11 août 2006, 18:17
Localisation : Epinay sur Seine (93)

Message par vincentxavier »

Vous pouvez toujours utiliser http://bugs.archlinux.fr pour soumettre un rapport de bug. Si vous ne voulez pas que ca soit rediriger vers /dev/null il est intéressant de proposer un patch ou un fichier css complet.

Voila voila

Cela dit, pour l'accessibilité, il faut définir les tailles en em au début du fichier de style pour pouvoir ensuite utiliser des tailles en %.
Warranty

THIS ADVICE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.

En clair, je ne pourrais être tenu responsable des dégats causés par l'utilisation de mes conseils

Image
Avatar de l’utilisateur
mélodie
Maître du Kyudo
Messages : 2784
Inscription : lun. 30 oct. 2006, 02:06
Localisation : Pyrénées

Message par mélodie »

vincentxavier a écrit :Cela dit, pour l'accessibilité, il faut définir les tailles en em au début du fichier de style pour pouvoir ensuite utiliser des tailles en %.
euh ! c'est ce que kozaki a dit...
Justement non : on fixe la taille par défaut dès le départ, avec un
"html, body * { font-size 1em; } par exemple.
Ensuite on donne la taille des éléments en fonction de leur niveau sémantique : h1 150%, h2 130%, ..., p 70% par exemple.
Avatar de l’utilisateur
kozaki
Chu Ko Nu
Messages : 422
Inscription : mer. 13 sept. 2006, 22:49
Localisation : London > . < Paris
Contact :

Message par kozaki »

vincentxavier, t sûr que bugs.archlinux.fr est l'endroit ?
Car c'est absolument pas un bug dont il s'agit, mais d'une amélioration.

Sinon oui c'est ce que tu as dit.
Et pour l'exemple "complet", bin y-a rien de + à savoir que ce que j'ai posté juste au-dessus (la partie sur laquelle tu sembles être passé rapidement ;) )

Sinon, dedana je te passe ma bible : LEs standarS cé pas kompliké ;)
Et pour le pourquoi expliqué clairement sans chichis : Formatage du texte en CSS (sous "Essayer !" :) )
~ Configs ~ PGP Key: 1C2A554EFF0157D9
« Demande un conseil à ton ennemi et fais le contraire (proverbe juif)
SVP intéressé par tout retour d'exp. sur Arch ARM en général, et sur portable (CrOS) en particulier.
Avatar de l’utilisateur
warnaud
Maître du Kyudo
Messages : 1640
Inscription : ven. 11 août 2006, 17:05
Localisation : Rolle (CH)

Message par warnaud »

Le délire c'est qu'on va pas forcément créer 50 feuilles de style pour tous les cas de figures et toutes les applis :( C'est en partie la css du site, bref ça sent la surcharge de balise pour pas grand chose.
Perso ça marche de base sur tout mes ordis / navigateurs (sans rien toucher)
Déjà est-ce que tes polices sont installées comme il faut ?
T'as les polices 100/75dpi bitstream (font-bitstream-speedo ttf-bitstream-vera) ?
Plus ça rate, plus ça a de chance de réussir. En somme, un succès n'est qu'une erreur qui a finit par réussir (même par erreur). Ne déséspérez donc pas et perseverez. Utilisez La Rache™
Patientia quod lard quod barrus planto diligo ut licentia
—¤÷(`[¤*Powered By *¤]´)÷¤—
Archlinux ~ Fvwm ~ Irssi ~ URxvt
Avatar de l’utilisateur
osku
archer de cavalerie
Messages : 169
Inscription : lun. 28 août 2006, 08:14

Message par osku »

warnaud a écrit :Le délire c'est qu'on va pas forcément créer 50 feuilles de style pour tous les cas de figures et toutes les applis :( C'est en partie la css du site, bref ça sent la surcharge de balise pour pas grand chose.
Perso ça marche de base sur tout mes ordis / navigateurs (sans rien toucher)
Déjà est-ce que tes polices sont installées comme il faut ?
T'as les polices 100/75dpi bitstream (font-bitstream-speedo ttf-bitstream-vera) ?
ça me rappelle un truc cette histoire de css mais je ne sais plus quoi...... 8)
Avatar de l’utilisateur
mélodie
Maître du Kyudo
Messages : 2784
Inscription : lun. 30 oct. 2006, 02:06
Localisation : Pyrénées

Message par mélodie »

Je les ai les polices, dans mon système, mais j'aime bien pouvoir avoir l'affichage conforme à la configuration que je fais en graphique dans les préférences, (taille mini etc... ) au lieu d'augmenter les caractère à la molette de souris. Ça me semble plus sympa.

À propos de CSS, j'ai regardé dans les réglages en graphique dans un phpBB que j'ai en local, ça n'a pas l'air de produire de résultat quand je fais des modifications là, (police 1, 2 et 3).

En voyant ça je pensais que c'était tout simple... mais apparemment non.
Avatar de l’utilisateur
mélodie
Maître du Kyudo
Messages : 2784
Inscription : lun. 30 oct. 2006, 02:06
Localisation : Pyrénées

Message par mélodie »

Dans la CSS de la feuille de style du forum je suppose ?

Déjà pour lire nos causeries:
}
.postbody {
font-size : 12px;
}
ben 12px pour moi c'est trop petit. J'imagine que 100% ou aux environs, genre entre 0.9 et 1.2em pourrait être mieux ? Comme la typo est proportionnelle en rapport de ce qui est la norme configurée dans nos butineurs... :)

http://www.yoyodesign.org/doc/w3c/css2/ ... size-props
15.2.4 La taille de police : les propriétés 'font-size' et 'font-size-adjust'
j'avais trouvé une doc sensass un coup, avec des illustrations pour expliquer les tailles relatives je n'arrive pas à remettre la main dessus. :?
Avatar de l’utilisateur
warnaud
Maître du Kyudo
Messages : 1640
Inscription : ven. 11 août 2006, 17:05
Localisation : Rolle (CH)

Message par warnaud »

osku a écrit : ça me rappelle un truc cette histoire de css mais je ne sais plus quoi...... 8)
Ouais toi c'est des vraies bugs ;)
Plus ça rate, plus ça a de chance de réussir. En somme, un succès n'est qu'une erreur qui a finit par réussir (même par erreur). Ne déséspérez donc pas et perseverez. Utilisez La Rache™
Patientia quod lard quod barrus planto diligo ut licentia
—¤÷(`[¤*Powered By *¤]´)÷¤—
Archlinux ~ Fvwm ~ Irssi ~ URxvt
Avatar de l’utilisateur
kozaki
Chu Ko Nu
Messages : 422
Inscription : mer. 13 sept. 2006, 22:49
Localisation : London > . < Paris
Contact :

Message par kozaki »

warnaud a écrit :Le délire c'est qu'on va pas forcément créer 50 feuilles de style pour tous les cas de figures et toutes les applis :( C'est en partie la css du site, bref ça sent la surcharge de balise pour pas grand chose.
Perso ça marche de base sur tout mes ordis / navigateurs (sans rien toucher)
Déjà est-ce que tes polices sont installées comme il faut ?
T'as les polices 100/75dpi bitstream (font-bitstream-speedo ttf-bitstream-vera) ?
1 feuille de style est nécessaire, et une ligne (cf posts + haut), quelque soit le nombre de pages. C'est le but des css standards d'ailleurs, de simplifier pour les utilisateurs et les codeurs.
Que ça s'affiche nickel sur les machines/écrans/applis du webmestre est bien, c sûr ;)
~ Configs ~ PGP Key: 1C2A554EFF0157D9
« Demande un conseil à ton ennemi et fais le contraire (proverbe juif)
SVP intéressé par tout retour d'exp. sur Arch ARM en général, et sur portable (CrOS) en particulier.
Avatar de l’utilisateur
mélodie
Maître du Kyudo
Messages : 2784
Inscription : lun. 30 oct. 2006, 02:06
Localisation : Pyrénées

Message par mélodie »

kozaki a écrit :1 feuille de style est nécessaire, et une ligne (cf posts + haut), quelque soit le nombre de pages
Si j'ai compris correctement le principe, c'est la feuille de style du thème utilisé qui doit régler tout ça, celle qu'on trouve dans le répertoire templates/subsilver ou template/autre_theme.
Avatar de l’utilisateur
marc[i1]
Maître du Kyudo
Messages : 1753
Inscription : ven. 27 oct. 2006, 10:48
Localisation : Nantes (44)

Message par marc[i1] »

et sinon, qui corrige la feuille de style ?
vu que c'est accessible à tous, je pense que maintenant il faut écrire du CSS !

Un bon éditeur de CSS : cssed

J'ai hate de voir la feuille de style de mélodie ;)
Ne vous emmerdez plus, emmerdez les autres.
Avatar de l’utilisateur
mélodie
Maître du Kyudo
Messages : 2784
Inscription : lun. 30 oct. 2006, 02:06
Localisation : Pyrénées

Message par mélodie »

marc[i1] a écrit : Un bon éditeur de CSS : cssed

J'ai hate de voir la feuille de style de mélodie ;)
Si je fais ça c'est avec Scite. 'replace : 12 px : by 1.2em' ; 'replace : 10px : by

0.9em' et ce genre. (20 px par 200% par exemple).

J'ai eu cssed, mais je ne m'en servais jamais, je l'ai donc désinstallé. (et puis il faut apprendre à faire avec un éditeur simple, pour comprendre ce qu'on fait).

Je pense que n'importe qui peut remplacer les quelques px par des em ou des %.
Avatar de l’utilisateur
elwario91
archer
Messages : 114
Inscription : mar. 22 mai 2007, 14:30
Localisation : Compton

Message par elwario91 »

Pour moi le meilleur programme est Geany ou Gedit :)
Je trouve que la grandeur de la police est parfaite :P
Répondre