28173 sujets

CSS et mise en forme, CSS3

Taille variable de police en fonction de la fenêtre du navigateur

Bonjour

Quelqu'un saurait-il s'il est possible d'obtenir une taille variable des polices en fonction de la taille d'une div ou de la fenêtre du navigateur.

J'ai une css d'une page faite entièrement en % tant en largeur qu'en hauteur. De cette façon se pose moins le problème de la taille de la fenêtre du navigateur.

Quand la fenêtre du navigateur est en petite taille la mise en page est serrée et aérée dans une grande.

Si avec les images je n'ai pas de problème, une partie des images sont masquées en petite taille.

Mais pour les textes, j'aimerais dans la mesure du possible faire en sorte que par exemple dans une fenêtre de petite taille une police soit en équivalant d'un corps 10 et quand la fenêtre est plus grande elle passe en 16.

L'idéal serait la taille de police en % aussi ... mais je n'ai pas réussis, même en mettant la taille de police en % que ce soit en partant de la page principale ou d'une div.

Si quelqu'un a une idée ... merci Smiley cligne

Bien le bonjour
Bonjour,

Pour répondre à ta question, la taille de police peut être définie au moyen de plusieurs unités, dont les %.
Cependant, je serais bien incapable de te dire de quel paramètre dépend le pourcentage en question. Il est tout à fait probable que cela dépende de la taille du conteneur, c'est à tenter... Smiley murf
Bonjour,

Bonobo a écrit :
Quelqu'un saurait-il s'il est possible d'obtenir une taille variable des polices en fonction de la taille d'une div ou de la fenêtre du navigateur.

Non, pas en HTML/CSS. Cela ne me semble d'ailleurs pas souhaitable.

Tu peux toujours tenter de bidouiller du Javascript pour indexer la taille du texte de body sur la largeur de cet élément, mais ça me semble peu fiable comme méthode.

Et surtout:
- l'utilisateur qui a un petit écran ne voudra pas forcément du petit texte (qui ne serait d'ailleurs peut-être pas lisible...);
- l'utilisateur qui a un grand écran ne voudra pas forcément du grand texte.

Mon avis: laisser tomber l'idée, sauf sur des bouts de texte très particuliers (phrase d'argumentaire commercial en page d'accueil, titrage). Pour ces cas particuliers, l'outil de choix sera Flash (penser au texte alternatif...).
Cygnus a écrit :
Il est tout à fait probable que cela dépende de la taille du conteneur

Heu... la définition de probable a dû changer depuis la dernière fois, alors. Smiley cligne

Concrètement, les tailles de texte en pourcentages (propriété font-size en CSS) sont indexées sur la taille du texte de l'élément parent, comme pour les EM.
Cygnus a écrit :
Bonjour,

Pour répondre à ta question, la taille de police peut être définie au moyen de plusieurs unités, dont les %.
Cependant, je serais bien incapable de te dire de quel paramètre dépend le pourcentage en question. Il est tout à fait probable que cela dépende de la taille du conteneur, c'est à tenter... Smiley murf



Dommage Smiley cligne
Florent V. a écrit :

Heu... la définition de probable a dû changer depuis la dernière fois, alors. Smiley cligne

Concrètement, les tailles de texte en pourcentages (propriété font-size en CSS) sont indexées sur la taille du texte de l'élément parent, comme pour les EM.


De quel élément parent parles tu ?
Cela veux dire qu'il faut une référence et appliquer en fonction de cette référence ?
Une div par exemple ?
Tu peux préciser stp ?
De quelle manière exactement dans ce cas ?

Merci
Florent V. a écrit :
Heu... la définition de probable a dû changer depuis la dernière fois, alors. Smiley cligne

Exact ...
Je pensais plutôt à possible. Smiley murf


Florent V. a écrit :
Concrètement, les tailles de texte en pourcentages (propriété font-size en CSS) sont indexées sur la taille du texte de l'élément parent, comme pour les EM.

Merci pour ma culture ... Smiley cligne
Bonobo a écrit :
De quel élément parent parles tu ?

Ben, pour un élément HTML donné dans la page, de son élément parent. À l'exception de <html>, pour qui une valeur de font-size en pourcentages correspond à un pourcentage de la taille du texte par défaut indiquée dans les préférences/options du navigateur.

Bref, si j'ai ceci:
[b]HTML:[/b]
<body>
<p>Un paragraphe</p>
</body>

[b]CSS:[/b]
body {font-size: 16px;}
p {font-size: 75%;}

Le texte dans le paragraphe aura une taille de 12px.
Florent V. a écrit :

Ben, pour un élément HTML donné dans la page, de son élément parent. À l'exception de <html>, pour qui une valeur de font-size en pourcentages correspond à un pourcentage de la taille du texte par défaut indiquée dans les préférences/options du navigateur.

Bref, si j'ai ceci:
[b]HTML:[/b]
<body>
<p>Un paragraphe</p>
</body>

[b]CSS:[/b]
body {font-size: 16px;}
p {font-size: 75%;}

Le texte dans le paragraphe aura une taille de 12px.


Oui mais quand tu parlais de "parent" ça pouvait être un élément comme une div qui elle étant en % le texte lui même changerait de taille en fonction de la taille de la div.

Or la ça ne change rien puisque le "bodyfont" n'est pas variable en fonction de la taille de la fenêtre ou d'une div les polices ne "bougent" pas en fonction de la taille de la fenêtre ...

N'y aurait-il pas une façon de faire qui permette d'ajuster la taille de la police en fonction de la taille d'une div qui joue le rôle de parent ?
Bonobo a écrit :
Oui mais quand tu parlais de "parent" ça pouvait être un élément comme une div qui elle étant en %

Oui, mais ça ne changerait rien. Le fait qu'on utilise l'unité % dans les deux cas ne signifie pas qu'il y ait une corrélation entre les propriétés CSS width et font-size...

Bonobo a écrit :
le texte lui même changerait de taille en fonction de la taille de la div.

Ben non, ça n'est pas le cas. Lire la spécification CSS pour les détails.

Bonobo a écrit :
N'y aurait-il pas une façon de faire qui permette d'ajuster la taille de la police en fonction de la taille d'une div qui joue le rôle de parent ?

Comme je le disais:
- pour un titre ou une quantité faible de texte: Flash;
- pour le corps de texte, on peut tenter de bidouiller ça en Javascript, mais ça ne sera pas très fiable (même si intéressant à tenter dans l'absolu);
- plus globalement, je déconseille fortement de concevoir une page en se reposant sur ce genre de bidouille, ou même tout simplement de passer outre les préférences de l'utilisateur en lui imposant une taille de texte indexée (selon un rapport déterminé par l'auteur du site) sur la largeur de la page, alors que cette taille de texte calculée ne correspondra sans doute pas aux attentes/besoins/envies de l'utilisateur.
Florent V. a écrit :

Oui, mais ça ne changerait rien. Le fait qu'on utilise l'unité % dans les deux cas ne signifie pas qu'il y ait une corrélation entre les propriétés CSS width et font-size...

C'est bien dommage car c'est la logique même ... cf ci-dessous

Florent V. a écrit :

Ben non, ça n'est pas le cas. Lire la spécification CSS pour les détails.

Ce qui m'a toujours fait "rire" ce sont les spécifications ne permettant pas une bonne gestion en % alors même que l'informatique c'est des tailles différentes d'écrans et que les spécifications et les mise en pages sont majoritairement figées comme sur du papier !!!

Florent V. a écrit :

Comme je le disais:
- pour un titre ou une quantité faible de texte: Flash;

Flash ... surement pas ...

Florent V. a écrit :

- pour le corps de texte, on peut tenter de bidouiller ça en Javascript, mais ça ne sera pas très fiable (même si intéressant à tenter dans l'absolu);

Si quelqu'un veux bien travailler la dessus avec moi Smiley cligne je ne connais pas le javascript

Florent V. a écrit :

- plus globalement, je déconseille fortement de concevoir une page en se reposant sur ce genre de bidouille, ou même tout simplement de passer outre les préférences de l'utilisateur en lui imposant une taille de texte indexée (selon un rapport déterminé par l'auteur du site) sur la largeur de la page, alors que cette taille de texte calculée ne correspondra sans doute pas aux attentes/besoins/envies de l'utilisateur.


Une grande majorité de personnes ne touchent pas les paramêtres d'affichage sauf les développeurs et ceux qui ont des problèmes de vue ... mais dans ce cas se pose aussi le problème de la taille des images ...

Quand a travailler en % cela n'a pas plus de restrictions qu'une taille quelconque ...
Sujet clos
Aller à