[resolu] Taille de police fixe

Bonjour,

je voudrais faire quelque chose qui, je le sais, ne se fait pas trop habituellement.
Mon but est créer une page web avec une taille de police et un espacement de ligne fixe. Et je voudrais que cette taille soit la même quelque soit le navigateur.

J'ai déjà fait une tentative, mais avec Internet Explorer, j'ai des comportements un peu étranges pour certains éléments se trouvant dans un tableau.

Quelqu'un pourrait -il me donner une piste ?

Merci d'avance.
Modifié par luxtin (14 Jun 2007 - 09:18)

luxtin a écrit :
je voudrais faire quelque chose qui, je le sais, ne se fait pas trop habituellement.

Ça ne se fait pas parce que :
1 - ça n'est pas possible ;
2 - ça n'est pas souhaitable.

Je suppose que tu as lu les articles suivants :
Accessibilité : Agrandissement de la taille des polices
Typographie web : gérer la taille du texte avec les « em »

luxtin a écrit :
Mon but est créer une page web avec une taille de police et un espacement de ligne fixe. Et je voudrais que cette taille soit la même quelque soit le navigateur.

Comme dit plus haut, ça n'est pas possible. Le seul moyen d'avoir un contrôle « parfait » sur le rendu du texte, c'est de ne pas le rendre par du texte mais via des éléments graphiques (images, Flash). C'est une solution, à la rigueur, surtout si on travaille correctement la question des alternatives textuelles. Mais c'est dommage.

Ah oui : et si cette recherche vient du fait que tu as un site avec une zone de contenu ayant une hauteur fixe... Game Over, erreur basique de conception pour cause d'ignorance du média Web : donc, on retravaille le design et on laisse le contenu s'adapter en hauteur bien gentiment.

Bonjour,

Florent V. a écrit :

Le seul moyen d'avoir un contrôle « parfait » sur le rendu du texte, c'est de ne pas le rendre par du texte mais via des éléments graphiques (images, Flash). C'est une solution, à la rigueur, surtout si on travaille correctement la question des alternatives textuelles. Mais c'est dommage.

Oui mais non. Qu'est-ce que je fais si la taille du texte est trop petite, si le contraste est insuffisant ? Je suis obligée de désactiver les images et de lire le contenu de l'attribut alt

quand tu fais tes essais sur plusieurs navigateurs j'imagine que tu es resté sur la même machine, au mieux sur le même système.

le pb c'est que chez quelqu'un d'autre les polices disponibles seront peut-être (souvent?) différentes donc moralité : si tout ton travail repose sur l'idée que ton texte est fixe, tout l'effet recherché va tomber a l'eau.
Modifié par CPascal (13 Jun 2007 - 01:34)

Salut,

La seule solution que je connaisse et qui fonctionne que sur ie :

p {
 font-size : 15px !important
}

Dans mes souvenirs, cette méthode peut être seulement spécifiée en pixels, em et pt. Mais, je peux me tromper ou oublier une unité de mesure.

++

J'ai bien conscience des problèmes de designe que je renconte et que ce n'est pas souhaitable. J'avais déjà parcouru les articles que tu cites Florent V., mais je vais les relire. Merci du conseil.

"Florent V." a écrit :
Ah oui : et si cette recherche vient du fait que tu as un site avec une zone de contenu ayant une hauteur fixe... Game Over, erreur basique de conception pour cause d'ignorance du média Web : donc, on retravaille le design et on laisse le contenu s'adapter en hauteur bien gentiment. cligne

En fait pour tout vous dire, j'essaye de faire mon CV en (X)HTML/CSS. Je pense que vous connaissez tous les problèmes de mise en page liées au CV... on aimerait bien que tout loge sur une seule ligne, et que ça bouge pas trop...
Donc oui, effectivement j'ai une zone de contenu sous forme de colonne dans la gauche de ma page (qui contient mon état civil et qqs infos persos).

D'après ce que je lis ce n'est pas possible de faire ce que je veux.
Alors je vais formuler ma requete différemment.

Comment faire pour que la police soit uniformément proportionnelle à une taille de référence ? C'est à dire que je fixe une taille de texte de base, de disons XXem, et je voudrais que tout le reste soit proportionnel à ça. Parceque là, j'ai des endroits où ma police est plus grande qu'elle n'est censée l'être. En particulier dans les éléments <th> et <td> d'une balise <table>.

"CPascal" a écrit :
quand tu fais tes essais sur plusieurs navigateurs j'imagine que tu es resté sur la même machine, au mieux sur le même système.

Justement non, c'est en faisant ça que je me suis rendu compte qu'il y avait des différences de rendu suivant la version même d'internet explorer.

Conclusion : je suis prêt à renoncer à une taille de police fixe, à condition qu'aucune des tailles ne soit fixe et que tout s'ajuste avec homogénéité quand on agrandit la police sous le navigateur.

Monique a écrit :
Oui mais non. Qu'est-ce que je fais si la taille du texte est trop petite, si le contraste est insuffisant ? Je suis obligée de désactiver les images et de lire le contenu de l'attribut alt

C'est pour ça que je disais que c'était une solution « à la rigueur ». Le fait que ça soit une solution technique ne signifie d'ailleurs pas que ça soit une bonne pratique de conception web (d'où le « mais c'est dommage »).

luxtin a écrit :
Je pense que vous connaissez tous les problèmes de mise en page liées au CV... on aimerait bien que tout loge sur une seule ligne, et que ça bouge pas trop...

Rien ne t'empêche de viser un « rendu optimal ». Pour cela, se baser sur le fait que la taille du texte par défaut chez la plupart des utilisateurs est 16px (pas besoin de la spécifier en pixels, c'est même à éviter... la moduler en pourcentages ou EM, pourquoi pas), et choisir une police suffisamment répandue comme Verdana, Arial, Trebuchet MS, Times New Roman ou Georgia.
Il faudra prévoir un rendu convenable la part d'utilisateurs qui ne répondra pas à ces présupposés (10% ? 20% ? un peu plus ?).

luxtin a écrit :
Comment faire pour que la police soit uniformément proportionnelle à une taille de référence ? C'est à dire que je fixe une taille de texte de base, de disons XXem, et je voudrais que tout le reste soit proportionnel à ça. Parceque là, j'ai des endroits où ma police est plus grande qu'elle n'est censée l'être.

Voir l'article sur la gestion du texte avec les EM. Le lire de bout en bout et bien faire attention à la partie sur les bonnes pratiques. Ça devrait te donner toutes les informations utiles.

luxtin a écrit :
En particulier dans les éléments <th> et <td> d'une balise <table>.

Page affichée en mode Quirks, alors. As-tu bien un Doctype valide et complet (avec URL de la DTD) en début de page ? Et pas de prologue XML.

"Florent V." a écrit :
Page affichée en mode Quirks, alors. As-tu bien un Doctype valide et complet (avec URL de la DTD) en début de page ? Et pas de prologue XML.

mode Quirks ? non je pense pas. C'est juste une partie de ma page qui est mise en page sous la forme d'un tableau. Mais plus j'y pense et plus je me dis que j'aurais tout interet à faire autrement... Parceque bon les tableaux "c'est le mal" n'est ce pas ?

luxtin a écrit :
mode Quirks ? non je pense pas. C'est juste une partie de ma page qui est mise en page sous la forme d'un tableau. Mais plus j'y pense et plus je me dis que j'aurais tout interet à faire autrement... Parceque bon les tableaux "c'est le mal" n'est ce pas ?

Il me semble justement que la différence de taille du texte par défaut entre body et les tableaux ne se manifeste qu'en mode Quirks. Ou alors peut-être en transitional ? Mais je n'y crois pas trop.

Florent V. a écrit :

Il me semble justement que la différence de taille du texte par défaut entre body et les tableaux ne se manifeste qu'en mode Quirks. Ou alors peut-être en transitional ? Mais je n'y crois pas trop.

mmmmhh.
Alors peut-etre qu'il faut que tu m'expliques ce que c'est que le mode Quirks.
Je suis surement un peu ignorant en la matière. D'après ce que j'ai compris ça fait réfèrence à l'ancienne façon de mettre en page les pages web (avant l'avènement des CSS) avec des tableaux ? C'est bien ça ? ou c'est plus que ça ?

Florent V. a écrit :
]Page affichée en mode Quirks, alors. As-tu bien un Doctype valide et complet (avec URL de la DTD) en début de page ? Et pas de prologue XML.

oui il me semble puisque j'ai récupéré l'en-tete du template.php de dotclear.
Dans le doute, tu peux jeter un oeil dessus : http://flo.long.free.fr.

Je pense qu'il apprécie pas le commentaire html avant la vraie déclaration de doctype.

<HORS SUJET>
Et juste au passage, même si tu te plais certainement beaucoup , je crois que 528ko pour une image de 100x133 c'est quand même un peu beaucoup. (10 ou 20ko sera plus approprié, car chez moi il à fallu 20 secondes pour qu'elle apparaisse..)
</HORS SUJET>
Modifié par <nicolas> (13 Jun 2007 - 12:02)

<nicolas> a écrit :
Je pense qu'il apprécie pas le commentaire html avant la vraie déclaration de doctype.

Oui, ça fera passer IE en mode Quirks. Voir ici pour en savoir plus sur le mode en question :
http://css.alsacreations.com/Tutoriels-et-articles-divers/A-propos-du-Modele-de-boite-Microsoft-ou-quirks
Et non, ça n'a rien à voir avec les tableaux, qui restent parfaitement valides en HTML et XHTML.

Techniquement, il faudra remplacer ceci :

<!--<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

par ceci :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

ou pourquoi pas ceci :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Suivant que tu as besoin d'un doctype Strict ou Transitional (ici le Strict a l'air adapté...).

Ah oui, il ne faut pas déclarer ta page en XHTML 1.1, vu que ce n'est pas du XHTML 1.1 mais du XHTML 1.0 servi en mode "text/html" et non pas "application/xhtml+xml". Voir la FAQ à ce sujet.

<nicolas> a écrit :
je crois que 528ko pour une image de 100x133 c'est quand même un peu beaucoup

Alors pour dire les choses clairement : ne jamais redimensionner en HTML ou CSS les images, du moins pas à plus de 200% ou moins de 500% de leur taille réelle. Si on doit afficher une grande image en petit, on ouvre la grande image dans un éditeur (The GIMP, Photoshop, autre...), et on redimensionne l'image pour en créer une petite.

Autant pour moi pour les images, je n'avais pas vu qu'elle était redimensionnée en css. Mais je me demandais bien comment il avait fait pour obtenir une image de 528ko en jpeg...

Merci Florent pour tout tes conseils.
Je teste ça ce soir chez moi, et je vous dis si ça marche ou non.

@<nicolas> Oui en effet, j'avais pas fait attention à la taille de la photo.
Elle était au début provisoire, puis j'ai oublié de la changer.
Ne va pas en déduire pour autant que je suis un narcissique invétéré

Bonjour,

j'ai lu ton tutoriel Florent, je l'ai suivi à la lettre en n'utilisant que des tailles en "em". Une fois qu'on a compris comment ça marche, c'est extremement simple. D'autant plus simple que les explications sont très claire.

j'ai aussi suivi votre conseil de changer l'en-tete, et il semblerait que ça ait résolu le problème.

Merci pour votre aide !