[utilescript] wtext et mwtext : savoir la taille d'un texte et le racourcir à une taille désirée avec jquery

Télécharger le projet
Commenter

Description

wText permet de savoir la largeur en pixel d'un texte donné.
D'où vient le nom de wText qui veut dire "Width of Text" c'est à dire "Largeur du texte"

Comment fonctionne-t-il ?
Tout d'abord, il crée 3 balises:
- .hidewText : permet de cacher...
- .wText : est le div de base, il permet d'allonger le texte. il dois obligatoirement avoir une longueur plus importante que celle du texte sinon le text aura un "Retour sur chariot" et par conséquent le texte va être mal mesurer
- span : la balise la plus importante il contiendra le texte et le mesurera.
// Important !
Vous avez surement remarqué que la balise span contient une lettre.
Cette lettre est "M"...
Pourquoi ?
Avant tout M en majuscule est l'une des lettres la plus grande et large de l'alphabet : ABCDEFGHIJKLMNOPQRSTUVWXYZ, abcdefghijklmnopqrstuvwxyz...
Ensuite nous savons déjà que .wText dois OBLIGATOIREMENT avoir une largeur plus grande que le texte.
Alors nous multiplions la largeur de la lettre la plus grande par le nombre de lettre dans le texte.
Ainsi .wText aura toujours une largeur plus grande que celle du texte.
Pour finir, il mesure le span et retourne la taille du texte tout simplement. ;-)

MwText permet de raccourcir le texte à une taille donnée.
Le nom ne change pas il y a juste le M devant wText qui veut signifié "Maximale"
"Maximale Width of Text" -> "Largeur maximale du texte"

Comment fonctionne-t-il ?
Comme wText mise à pars qu'il a une boucle qui raccourci petit à petit le texte pour avoir la taille idéal pour supprimer le retour sur chariot.

Source / Exemple : 


function wText(Text, fSize, fFamily, sReplace){
	function str_replace(a, b, str){return str_replace2(str, a, b);}
	function str_replace2(SRs, SRt, SRu) {
	SRRi = SRs.indexOf(SRt);
	SRRr = '';
	if (SRRi == -1) return SRs;
	SRRr += SRs.substring(0,SRRi) + SRu;
	if ( SRRi + SRt.length < SRs.length)
	SRRr += str_replace2(SRs.substring(SRRi + SRt.length, SRs.length), SRt, SRu);
	return SRRr;
	}
	if(typeof(sReplace)=="string"){}else{nospace = "<@>";}
	fSize = str_replace("px", "", fSize);
	$("body").append('<div class="hidewText" style="visibility: hidden;width: 1px;height: 1px;position: absolute;overflow: hidden;"><div class="wText" style="position:absolute;"><span style="font-size:'+fSize+'px;">M</span></div></div>');
	$(".wText span").css("font-size", fSize);
	$(".wText span").css("font-family", fFamily);
	wP = $(".wText span").width();
	$(".wText").width(wP*Text.length);
	$(".wText span").html("M M");
	wS = $(".wText span").width()-wP*2;
	nS = str_replace(" ", "<@>", Text).split("<@>").length-1;
	$(".wText span").html(str_replace(" ", "", Text));
	wT = $(".wText span").width();
	$(".hidewText").remove();
	return(wT+nS*wS);
}
function MwText(Text, fSize, fFamily, wMin){
	if(fSize.replace("px", "")!=fSize){fSize = fSize.replace("px", "");}
	$("body").append('<div class="hidewText" style="visibility: hidden;width: 1px;height: 1px;position: absolute;overflow: hidden;"><div class="wText" style="position:absolute;"><span style="font-size:'+fSize+'px;">M</span></div></div>');
	$(".wText span").css("font-size", fSize);
	$(".wText span").css("font-family", fFamily);
	wP = $(".wText span").width();
	$(".wText").width(wP*Text.length);
	$(".wText span").html(Text);
	wT=i=$(".wText span").width();
	while(i>wMin){
		Text = Text.substring(0, Text.length-1);
		$(".wText span").html(Text);
		wT=i=$(".wText span").width();
	}
	$(".hidewText").remove();
	return(Text);
}

Conclusion :


Deux scripts permettant l'un de savoir la taille d'un texte et l'autre de pourvoir le raccourcir à une largeur maximale.
Télécharger le projet

Codes Sources

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 (p4YGpl6O)