Salut !
J'ai un bloc avec du texte dedans. Cool.
J'aimerais faire en sorte que le texte soit proportionnel par rapport au bloc.

Genre si la police fait 1em, et le bloc 200px de largeur et que d'un coup le bloc fait 400px, la police doit automatiquement monter à 2em.

Donc, comme je n'ai pas trouvé comment faire en CSS, j'ai codé une fonction qui gère ça via la proportionnalité.

Le problème c'est que c'est trop lourd !

Quand y'a un bloc, ça va, mais quand il commence à y avoir 4-6 blocs, dieu que ça rame. C'est ça le problème.

Une idée ?
Merci !

Bah fait voir ta fonction =)

Tout-con. Ça proportionnalise tous les name="bloc" par rapport à l'id os_body.

function proportionalitee(vieux_body_largeur, vieux_body_hauteur) {
	//alert(vieux_body_largeur+' > '+vieux_body_hauteur);
	var bloc = document.getElementsByName('bloc');
	for( val in bloc )
	{
		
		if(!isNaN(val))
		{				
			bloc[val].style.fontSize =  parseFloat(window.getComputedStyle(document.getElementById('os_'+'body') ,null).getPropertyValue('height')) * parseFloat(window.getComputedStyle(bloc[val] ,null).getPropertyValue('font-size')) / vieux_body_hauteur+'px';		
		}
		
	}
	
}

Et ce code lag ?

Tu l'appelles comment ?

Edit: for( val in bloc )
C'est mal.

Fait :
for (var val = 0; val < bloc.length; val++)

Citation : Tiller

Et ce code lag ?

Tu l'appelles comment ?

Edit: for( val in bloc )
C'est mal.

Fait :
for (var val = 0; val < bloc.length; val++)

Faut dire que je l'appelle souvent 15fois de suite ( pour donner un effet de « glissade » ) et s'il y a QUE 6 blocs, ça fait 15*6 = 90 fois le calcul
C'est le problème, la meilleure solution de dire au navigateur de faire ça en CSS, mais là non plus je ne vois pas comment.

C'est à priori la seule méthode de faire.

Fait voir comment tu fais tes appels, ils sont p-e mal fait

Citation : Tiller

C'est à priori la seule méthode de faire.

Fait voir comment tu fais tes appels, ils sont p-e mal fait

Heu... Ils sont bien fait et puis c'est tout.

Je me disais que je pourrais faire ça :

- On crée une petite div dans la grande div.
- La petite div on lui dit par exemple « hauteur : 20%; »
- Toujours dans la petite div, on y met le texte et on lui dit : « Tu auras toujours la même hauteur que la petite div.

Comme ça le texte aura toujours 20% de hauteur par rapport à la grande div même s'elle change de taille.

Sauf que je n'ai aucune idée de comment faire le point n°3 sans faire appel à trop de JS.

Une idée ?
Merci !

[Edit] Mais je suis con u_u"

var taille_petite_div =window.getComputedStyle(document.getElementById('os_'+'body') ,null).getPropertyValue('height');
bloc_text.style.fontSize = taille_petite_div;

Et ça évite les 90 proportionalisation

Je considère le sujet comme résolu, si vous avez une meilleure idée, dites là quand même svp.

Merci Tiller !

Petit UP car il y a un petit bug :

var taille_petite_div =window.getComputedStyle(document.getElementById('os_'+'body') ,null).getPropertyValue('height');
bloc_text.style.fontSize = taille_petite_div;

Admeton que l'on exécute le script plusieurs fois :

Bloc parent : 100px de haut.
-> Exécution du script. La taille de la police devient 100px.
--> Comme la police d'écriture a une sorte de « bordure » ou un truc du genre, le bloc va s'agrandir.

Et donc, plus on fait le script, plus le bloc va grandir et plus la police va grandir

Une idée ?
Merci !

Mais c'est au onresize ?

Citation : xavierm02

Mais c'est au onresize ?

Oui, et dans d'autres cas aussi.

Comme ?