Taille de police adaptée au contenant
Résolu
Flachy Joe
Messages postés
2102
Date d'inscription
Statut
Membre
Dernière intervention
-
Flachy Joe Messages postés 2102 Date d'inscription Statut Membre Dernière intervention -
Flachy Joe Messages postés 2102 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
voila mon souci, par défaut la taille d'une "boite" s'adapte au texte qu'elle contient. Je voudrait faire l'inverse c'est à dire adapter la taille du texte pour qu'il entre dans une boite donnée.
La taille de la boite étant proportionnelle à celle de la page, j'imagine qu'il va falloir calculer ça dynamiquement en JS...
Est-ce qu'il existe un outil tout fait ?
Merci !
voila mon souci, par défaut la taille d'une "boite" s'adapte au texte qu'elle contient. Je voudrait faire l'inverse c'est à dire adapter la taille du texte pour qu'il entre dans une boite donnée.
La taille de la boite étant proportionnelle à celle de la page, j'imagine qu'il va falloir calculer ça dynamiquement en JS...
Est-ce qu'il existe un outil tout fait ?
Merci !
A voir également:
- Taille de police adaptée au contenant
- Comment réduire la taille d'un fichier - Guide
- Changer police facebook - Guide
- Police aptos - Accueil - Bureautique
- Police instagram - Guide
- Reduire taille image - Guide
4 réponses
et en mettant la taille du texte qui s'affiche dans ta boite en " % " via une css ? ça devrait aller non ...
Négatif, le pourcentage fait référence à la taille de la police du conteneur parent.
Merci quand même.
Merci quand même.
On est jamais mieux servi que par soit même ;-)
Voila donc ce que j'ai pondu :
Remarque :
Ça marche aussi bien avec des dimensions en pourcentage...
Voila donc ce que j'ai pondu :
<html>
<head>
</head>
<body>
<div id="div1" style="border: 1px solid black; width:250px; height : 50px">
Du texte !
</div>
<div id="div2" style="border: 1px solid black; width:250px; height: 50px;">
Encore du texte !
</div>
<script type="text/javascript">
function _div_ajuster_(){
div = document.getElementById('_div_ajuster_');
if (div == null){
div = document.createElement('div');
div.id = '_div_ajuster_';
div.style.position='absolute';
div.style.visibility='hidden';
div.style.fontSize='10px';
div.style.width = '';
div.style.height = '';
document.body.appendChild(div);
}
return div;
}
function ajuster_largeur(id){
div1 = document.getElementById(id);
div2 = _div_ajuster_();
div2.innerHTML = div1.innerHTML;
w_init = div2.clientWidth;
t_init = div2.style.fontSize;
w_final = div1.clientWidth;
t_final = parseInt(t_init) / w_init * w_final;
div1.style.fontSize = t_final + "px";
}
function ajuster_hauteur(id){
div1 = document.getElementById(id);
div2 = _div_ajuster_();
div2.innerHTML = div1.innerHTML;
h_init = div2.clientHeight;
t_init = div2.style.fontSize;
h_final = div1.clientHeight;
t_final = parseInt(t_init) / h_init * h_final;
div1.style.fontSize = t_final + "px";
}
function ajuster(id){
div1 = document.getElementById(id);
if (div1.style.height == '')
ajuster_largeur(id);
else if (div1.style.width == '')
ajuster_hauteur(id);
else {
div2 = _div_ajuster_();
div2.innerHTML = div1.innerHTML;
t_init = div2.style.fontSize;
w_init = div2.clientWidth;
w_final = div1.clientWidth;
h_init = div2.clientHeight;
h_final = div1.clientHeight;
t_larg = parseInt(t_init) / w_init * w_final;
t_haut = parseInt(t_init) / h_init * h_final;
div1.style.fontSize = Math.min(t_larg, t_haut) + "px";
}
}
ajuster('div1');
ajuster('div2');
</script>
</body>
</html>
Remarque :
Ça marche aussi bien avec des dimensions en pourcentage...