Taille de texte en fonction de la résolution

Soyez le premier à donner votre avis sur cette source.

Snippet vu 7 574 fois - Téléchargée 16 fois

Contenu du snippet

Petit script en jQuery qui permet de modifier la taille de la police en fonction de la taille du navigateur ; plus votre résolution est grosse, plus la police sera grande !

Source / Exemple :


<html>
	<head>
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

	<script type="text/javascript">
	$(document).ready(function(){

		// id, classe ou balise HTML dont la fonte est modifiable dans ce tableau
		// indiquez html ou body si vous voulez modifier toute la page
		var section = new Array('div');
		//var section = new Array('span','.section');
		section = section.join(',');

		
		$(window).resize(function() {
			
			$(section).each(function () {
				
				var currentFontSize = $(this).css('font-size');
				var currentFontSizeNum = parseFloat(currentFontSize, 10);
			
				var compt = 0;
				str = $(this).text();
				var code=new Array(str.length);
				for(var i=0;i<str.length;i++){
					if(str.charCodeAt(i)>=65 && str.charCodeAt(i)<=90){
						compt = compt + 2;
					} else {
						compt++;
					}
				}
				
				var newFontSize = (($(this).width()/compt-1)*3);
				
				$(this).css('font-size', newFontSize);
			});
			
			return false;
		});
		
		$(window).resize();
	});
	</script>
	
	</head>
	<body onload="">

	<div  style="width: 50%; background: #F0F0F0;" class="section">
		<span><b>La taille de police est MODIFIABLE dans cette partie</b></span>  
	</div>
	<div  style="width: 50%; background: #F0F0F0;" class="section">
		<span><b>La taille de police est MODIFIABLE dans cette partie</b></span>  
	</div>
	</body>
<html>

Conclusion :


Évidemment, il faut mettre des pourcentages sur vos blocs si vous voulez que votre texte bouge avec ;)

A voir également

Ajouter un commentaire

Commentaires

ben moi je trouve l'idée et l'application simples et efficaces... je cherchais un moyen de parvenir à mettre un texte de taille relative (uniquement le menu) et je suis tombée sur ton jaja et ça m'a parfaitement convenu... compatible avec ff/opéra/safari/chrome/ie7,8&9

après, il est certain que c'est un javascript qui servira davantage aux graphs qu'aux codeurs, mais c'est un outil vraiment sympa ^^

exemple : http://kewee.free.fr/V2/
le site est en cours, mais ça permet d'avoir un usage possible de ce javascript en image ;)

++ et merci encore ^^
tefa24600
Messages postés
30
Date d'inscription
samedi 4 août 2007
Statut
Membre
Dernière intervention
21 février 2012

@STAM21 : c'est exactement comme je l'ai dit dans mon précédent commentaire, le véritable but de ce code était de calculer la largeur exacte que prenait une chaine de caractère et d'afficher une taille proportionnelle à la résolution de l'utilisateur.

Il n'existe pas de vraie solution en html/javascript pour le problème soulevé (à part un applet JAVA => lourd pour un calcul et ne fonctionnera pas si JRE n'est pas installé chez l'utilisateur)...

le seul moyen que j'ai trouvé est de générer une balise qui contient le texte à grossir sans marge et de calculer sa largeur... Autant dire que, si l'on veut modifier toute la page (qui pourrait comprendre des div mais aussi des tableaux), ce code montre aussi ses limites...

Je voulais plus travailler sur un calcul de ratio largeur/hauteur et de dire que, tant qu'aucune des deux dimensions n'a été altérée par le texte, on modifie la taille du texte. A méditer !
stam21
Messages postés
1
Date d'inscription
lundi 2 février 2009
Statut
Membre
Dernière intervention
18 décembre 2010

Merci pour ton code même si après l'avoir testé il montre vite ses faiblesses.. L'effet est visible de suite mais difficilement réutilisable.
tefa24600
Messages postés
30
Date d'inscription
samedi 4 août 2007
Statut
Membre
Dernière intervention
21 février 2012

Merci du commentaire !
Ben en fait ce petit bout de code était un 'brouillon' pour un projet plus gros.
Mais il a vite montré ses limites, c'est pour ça que je n'ai pas pris la peine de séparer les différents langages.
Dans tous les cas, je te remercie de ton commentaire et la prochaine fois je n'oublierai pas de séparer les langages et de commenter pour les futurs utilisateurs de mon code !
marcelsnews
Messages postés
7
Date d'inscription
jeudi 9 avril 2009
Statut
Membre
Dernière intervention
1 novembre 2010

Salut,

J'ai testé ton code...ca marche nickel ;)

Juste une petite suggestion : découpler les composantes de ton "application" serait une bonne idée..
- mettre le css à part
- ton JS à part
etc ...

Bref aussi petit que peu te paraître ton application ..c'est une bonne habitude ;)

bien à toi

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.