Ajuster la police au contenant

Commenter

Contenu du snippet

Je me suis retrouvé avec un problème : un élément graphique d'une taille déterminée dont le contenu peut changer, il ne fallait pas que le texte en sorte ni qu'il y ait d?ascenseur.

J'ai donc pondu ce script qui permet d'ajuster la taille de la police d'un élément pour le remplir entièrement.

La fonction getElementByClassName est une copie de ce qu'on trouve facilement partout. J'en ai tiré 2 fonction qui sont bien utiles : voir l'exemple.

Source / Exemple : 


//Determine si le type d'une variable est une chaine
function is_String(val){
	return (val+'' === val);
}

//Raccourci pour getElementById
function $(id){
	if (is_String(id)){
		return document.getElementById(id);
	}else{
		return id;
	}
}

////
// Fonctions pour ajuster la police à la taille de la boite

//Fabrique une div pour stoquer du contenu temporaire et en déterminer l'encombrement
function _div_ajuster_(){
	div = $('_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;
}

//Ajuste la police de l'objet pour en que son contenu fasse "larg" pixel de large
//"larg" peut être passé comme argument de classe
function ajuster_largeur(id, larg){
	if (is_String(id))
		div1 = $(id);
	else
		div1 = id;
	
	div2 = _div_ajuster_();
	div2.innerHTML = div1.innerHTML;
	
	w_init = div2.clientWidth;
	t_init = div2.style.fontSize;
	if (div1.class_arg[1] != undefined){
		w_final = parseInt(div1.class_arg[1]);
	}else if (div1.class_arg['l'] != undefined){
		w_final = parseInt(div1.class_arg['l']);
	}else if (larg != 0 && larg != undefined){
		w_final = larg;
	}else{
		w_final = parseInt(div1.style.width);
	}
	t_final = parseInt(t_init) / w_init * w_final;
	div1.style.fontSize = t_final + "px";
}

//Ajuste la police de l'objet pour en que son contenu fasse "haut" pixel de haut
//"haut" peut être passé comme argument de classe
function ajuster_hauteur(id, haut){
	if (is_String(id))
		div1 = $(id);
	else
		div1 = id;
	
	div2 =  _div_ajuster_();
	div2.innerHTML = div1.innerHTML;
	
	h_init = div2.clientHeight;
	t_init = div2.style.fontSize;
	
	if (div1.class_arg[2] != undefined){
		h_final = parseInt(div1.class_arg[2]);
	}else if (div1.class_arg['h'] != undefined){
		h_final = parseInt(div1.class_arg['h']);
	}else if (haut != 0 && haut != undefined){
		h_final = haut;
	}else{
		h_final = parseInt(div1.style.height);
	}
	//h_final = div1.clientHeight;
	t_final = parseInt(t_init) / h_init * h_final;
	div1.style.fontSize = t_final + "px";
}

//Ajuste la police de l'objet pour en que son contenu fasse "haut" pixel de haut et "larg" pixel de large
//"larg" et "haut" peuvent être passés comme argument de classe, s'ils ne sont pas défini, utilise la largeur et la hauteur du conteneur.
function ajuster(id, larg, haut){
	if (is_String(id))
		div1 = $(id);
	else
		div1 = id;
	
	h_undef = (div1.style.height == '' && (div1.style.top == '' || div1.style.bottom==''))
		&& haut==undefined
		&& div1.class_arg[2]==undefined
		&& div1.class_arg['h']==undefined;
	l_undef = (div1.style.width == '' && (div1.style.left == '' || div1.style.right==''))
		&& larg ==undefined
		&& div1.class_arg[1]==undefined
		&& div1.class_arg['l']==undefined;
	
	if (h_undef && ! l_undef)
		ajuster_largeur(id, larg);
	else if (l_undef && ! h_undef)
		ajuster_hauteur(id, haut);
	else { //Ajuster les deux
		div2 =  _div_ajuster_();
		div2.innerHTML = div1.innerHTML;
		
		t_init = div2.style.fontSize;
		w_init = div2.clientWidth;
		if (div1.class_arg[1] != undefined){
			w_final = div1.class_arg[1];
		}else if (div1.class_arg['l'] != undefined){
			w_final = div1.class_arg['l'];
		}else if (larg != 0 && larg != undefined){
			w_final = larg;
		}else{
			w_final = div1.clientWidth;
		}
		h_init = div2.clientHeight;
		if (div1.class_arg[2] != undefined){
			h_final = div1.class_arg[2];
		}else if (div1.class_arg['h'] != undefined){
			h_final = div1.class_arg['h'];
		}else if (haut != 0 && haut != undefined){
			h_final = haut;
		}else{
			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 = parseInt(Math.min(t_larg, t_haut))-1 + "px";
	}
}
//
////

//Renvoi le tableau des elements de la classe determinée
document.getElementsByClassName = function(cl) {
	var retnode = [];
	var myclass = new RegExp('\\b'+cl+'\\b');
	var elem = this.getElementsByTagName('*');
	for (var i = 0; i < elem.length; i++) {
		var classes = elem[i].className;
		if (myclass.test(classes)){
			retnode.push(elem[i]);
			if (elem[i].class_arg == undefined)
				elem[i].class_arg = [];
		}
	}
	return retnode;
};

//Renvoi le tableau des elements de la classe determinée et extrait 2 argument numerique de celle ci.
//expl : class="ajuster50x100
document.getElementsByClassNameWith2NumArgs = function(cl) {
	var retnode = [];
	var myclass = new RegExp('\\b'+cl+'([0-9.]*)x([0-9.]*)\\b');
	var elem = this.getElementsByTagName('*');
	for (var i = 0; i < elem.length; i++) {
		var classes = elem[i].className;
		if (myclass.test(classes)){
			retnode.push(elem[i]);
			res = myclass.exec(classes);
			if (elem[i].class_arg == undefined)
				elem[i].class_arg = [];
			elem[i].class_arg[1] = res[1];
			elem[i].class_arg[2] = res[2];
		}
	}
	return retnode;
};
//Renvoi le tableau des elements de la classe determinée et extrait 2 argument numerique nommé de celle ci.
//expl : class="ajuster_h=125"
document.getElementsByClassNameWith1NamedNumArgs = function(cl) {
	var retnode = [];
	var myclass = new RegExp('\\b'+cl+'_(.*)=([0-9.]*)\\b');
	var elem = this.getElementsByTagName('*');
	for (var i = 0; i < elem.length; i++) {
		var classes = elem[i].className;
		if (myclass.test(classes)){
			retnode.push(elem[i]);
			res = myclass.exec(classes);
			if (elem[i].class_arg == undefined)
				elem[i].class_arg = [];
			elem[i].class_arg[res[1]] = res[2];
		}
	}
	return retnode;
};

document.getElementsByClassNameWithNamedArgs = function(cl) {
	var retnode = [];
	var myclass = new RegExp('\\b'+cl+'_([^,]*=[^,\\s]*,?)*\\b');
	var elem = this.getElementsByTagName('*');
	for (var i = 0; i < elem.length; i++) {
		var classes = elem[i].className;
		if (res = myclass.exec(classes)){
			retnode.push(elem[i]);
			myclass.compile('([^,_]*)=([^,\\s]*),?');
			
			while (res2 = myclass.exec(res[0])){
				res[0] = res[0].substring(res[0].indexOf(res2[0])+res2[0].length);
				if (elem[i].class_arg == undefined)
					elem[i].class_arg = [];
				elem[i].class_arg[res2[1]] = res2[2];
			}
		}
	}
	return retnode;
};

document.getElementsByTagAndClass = function ( tag_, class_){
	var i, k;
	var T_Result = new Array(); // tableau des Objets en retour
	//-- Recup le tableau d'objets correspondant au tag
	var O_Tab = document.getElementsByTagName( tag_);
	//-- Pour chacun on test la class
	for( i=0, k=0; i < O_Tab.length; i++){
		if( O_Tab[i].className == class_){
			T_Result[k++] = O_Tab[i]; // stock l'objet
		}
	}
	return( T_Result); // on retourne le tableau d'objet
};

//Recherche les elements dont il faut ajuster la police
function appliquer_ajustement(){
	class_ajuster='ajuster';
	a_ajuster = document.getElementsByClassName(class_ajuster);
	for( i=0; i < a_ajuster.length; i++){
		ajuster(a_ajuster[i]);
	}
	a_ajuster = document.getElementsByClassNameWith2NumArgs(class_ajuster);
	for( i=0; i < a_ajuster.length; i++){
		ajuster(a_ajuster[i]);
	}
	a_ajuster = document.getElementsByClassNameWith1NamedNumArgs(class_ajuster);
	for( i=0; i < a_ajuster.length; i++){
		ajuster(a_ajuster[i]);
	}
	a_ajuster = document.getElementsByClassNameWithNamedArgs(class_ajuster);
	for( i=0; i < a_ajuster.length; i++){
		ajuster(a_ajuster[i]);
	}
}

Conclusion :


Exemple d'utilisation : 
<script type="text/javascript" src="ajuster.js"></script>  
<div class="ajuster_h=50">Ces 2 lignes<br/>occuperont 50px de haut.</div>  
<div class="ajuster300x50">Et ce texte occupera <br/>50px de haut ou 300px de large selon la longueur des lignes.</div>   
<div class="ajuster" style="height:20px; width:10%">Ce texte occupera tout l'espace disponible dans le contenant.</div> 
<script type="text/javascript">  
 appliquer_ajustement(); 
 window.onresize=appliquer_ajustement; 
</script>

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (Flachy Joe)