[FAQ] determiner la longueur d'un texte

Version imprimable

question: comment caluler la longueur en pixels que prendra un texte à l'écran

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script type='text/javascript'>
 
function init(){
String.prototype.textWidth=function(police,taille){
        var container=document.createElement('div');
        container.style.visibility='hidden';
        container.style.width='1px';
        container.style.fontFamily=police
        container.style.fontSize=taille+'px'
        container.id="magicdiv";
        document.body.appendChild(container);
        document.getElementById('magicdiv').style.overflow="auto";
        document.getElementById('magicdiv').innerHTML=this;
        var longueur = document.getElementById('magicdiv').scrollWidth;
        document.getElementById('magicdiv').parentNode.removeChild(document.getElementById('magicdiv'))
        return longueur + ' px'
        }
var tt='ldfsezrargdfg'        
alert(tt.textWidth('arial',10))
}
</script>
</head>
 
<body onload='init()'>

on passe la police et la taille en pixels de la police et il affiche la longueur du texte ...

Une autre version affiné avec un display inline au lieu de l'overflow ...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script type='text/javascript'>
 
function init(){
String.prototype.textWidth=function(police,taille){
		var container=document.createElement('div');
		container.style.visibility='hidden';
		container.style.fontFamily=police
		container.style.fontSize=taille+'px'
		container.id="magicdiv";
		container.style.display='inline';
		document.body.appendChild(container);
		document.getElementById('magicdiv').innerHTML=this;
		var longueur = document.getElementById('magicdiv').offsetWidth;
		document.getElementById('magicdiv').parentNode.removeChild(document.getElementById('magicdiv'))
		return longueur + ' px'
		}
var tt='ldfsezrargdfgtretert'		
alert(tt.textWidth('arial',12))
}
</script>
</head>
 
<body onload='init()'>

testé sous IE et FFX
vérifié en mesurant la taille effective à l'écran ;)

10/01/2007, 11h58
SpaceFrog

tiens on pourrait en dériver un convertisseur de em, pts, cm, inch en pixels :lol:
10/01/2007, 15h46
Auteur

Citation:

Envoyé par SpaceFrog

tiens on pourrait en dériver un convertisseur de em, pts, cm, inch en pixels :lol:

cela ne dépend pas de la résolution de l'écran (généralement en px/cm) ?
10/01/2007, 16h10
SpaceFrog

si mais justement si tu détermines une taille en cm d'un div il te suffit d'en récupérer le offsetWidth qui te sera donné en pixels :D

et du coup ça devrait te donner la résolution en prime !
10/01/2007, 16h32
SpaceFrog

je l'ai deja fait d'ailleuirs :D
http://www.developpez.net/forums/sho...ghlight=taille
10/01/2007, 18h58
Auteur

Citation:

Envoyé par SpaceFrog

si mais justement si tu détermines une taille en cm d'un div il te suffit d'en récupérer le offsetWidth qui te sera donné en pixels :D

et du coup ça devrait te donner la résolution en prime !

là je m'incline :hola: