[Résolu] Adapter la taille des caractères à celle du contenant

Bonjour
Sauf à faire une image contenant un texte, y a-t-il un moyen de faire en sorte que la taille des caractères s'adapte automatiquement à celle du contenant?

Bonjour !

C'est justement une question que je me suis posée récemment... sans trouver de réponse satisfaisante...

(La seule chose que je vois est de fixer la largeur du contenant et la taille de la police... )

Nizalify a écrit :
Bonjour,

Je dirais des media queries ? Agrandir en CSS le texte à chaque étapes. Enfin cela dépend si la taille des caractères doit s'adapter au contenant dans un contexte de redimensionnement ? Autrement je ne vois pas d'autres moyens, si ce n'est votre idée.

Cordialement

Les media queries fonctionnent par pallier, pas de façon continue.
Je cherchais plutôt quelque chose du genre font-size: x% du conteneur (et pas x% de l'em du conteneur), mais ça n'a pas l'air d'exister. Tout ce qui semple aller dans ce sens est à base de JS.
Comme je n'ai que deux textes de ce genre (dans le bandeau des pages du site), je reste sur des images tant que je n'ai pas trouvé mieux.

PapyJP a écrit :

Les media queries fonctionnent par pallier, pas de façon continue.
Je cherchais plutôt quelque chose du genre font-size: x% du conteneur (et pas x% de l'em du conteneur), mais ça n'a pas l'air d'exister. Tout ce qui semple aller dans ce sens est à base de JS.
Comme je n'ai que deux textes de ce genre (dans le bandeau des pages du site), je reste sur des images tant que je n'ai pas trouvé mieux.

Effectivement en JavaScript, il est réalisable de placer un listener sur le conteneur, mais je doute en effet que cette solution lourde et consommatrice en ressources soit vraiment une bonne alternative.

Cordialement
Modifié par Nizalify (04 Jun 2016 - 16:50)

PapyJP a écrit :
Bonjour
Sauf à faire une image contenant un texte, y a-t-il un moyen de faire en sorte que la taille des caractères s'adapte automatiquement à celle du contenant?

Une solution que j'avais utilisée en son temps, pour ajuster en hauteur un texte dans un conteneur et ajuster ensuite le texte en largeur en jouant sur les unités REM :

<div class="autosize">
<span>Ceci est le texte à afficher.</span>
</div>

.autosize
{
display:block;
width:100%;
height:4rem;  
padding:0;
font-family:arial,sans-serif;
text-align:center;
border:1px solid black;
}
.autosize > span
{
display:inline-block;
width:100%; /* Occupation de la totalité de la largeur du conteneur */
height:100%; /* Occupation de la totalité de la hauteur du conteneur */
margin:0; /* Aucune marge pour le texte */
padding:0; /* Aucun espacement intérieur pour le texte */
font-size:3.4rem; /* Un peu moins que la hauteur du conteneur */
letter-spacing:0.3rem; /* A ajuster en fonction du nombre de caractères du text */
}

Pas sûr que cela réponde à ton problème, mais si ça peut reservir...

Rien de satisfaisant chez moi non plus : dans les cas de force majeure, pour éviter le débordement d'un titre avec des mots trop longs sur les petites résolutions , j'utilise les vmin units.

Exemple.

Merci à tous de vos réponses.
J'espérais qu'il y avait quelque chose de simple que je n'avais pas vu.
Apparemment, s'il y a une solution, je ne suis pas le seul à ne pas la connaître.
Je laisse donc tomber cette piste, et je garde mes images textuelles.