Taille de police adaptée au contenant

Résolu

Flachy Joe -

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 !
--
;-) Flachy Joe ;-)
Membre de l'association Olympe-Network
Ma clef PGP publique est disponible dans mon profil.

Configuration: 
Beaucoup-moins-Portable (plus de dalle, écran LCD externe) Sony Vaio, P4 2.8GHz, RAM 1024Mo, Xubuntu

Portable Gericom, Celeron 1.4GHz, RAM 1280Mo, Debian Lenny Gnome et WinXP sp2.

Apple Cube G4 à 500MHz, Cinema Display 22", OSX 10.4

Afficher la suite

4 réponses

Réponse 1 / 4
bg62 Modérateur
et en mettant la taille du texte qui s'affiche dans ta boite en " % " via une css ? ça devrait aller non ...
0
Réponse 2 / 4
Flachy Joe Auteur
Négatif, le pourcentage fait référence à la taille de la police du conteneur parent.
Merci quand même.
0
Réponse 3 / 4
Flachy Joe Auteur
Up ?
0

Flachy Joe Auteur

On est jamais mieux servi que par soit même ;-)
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...

Taille de police adaptée au contenant

4 réponses

Discussions similaires

Newsletters