[JavaScript] [FAQ] determiner la longueur d'un texte

SpaceFrog · 10/01/2007, 11h23

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ...

SpaceFrog · 10/01/2007, 11h54

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

SpaceFrog · 10/01/2007, 11h58

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

Auteur · 10/01/2007, 15h46

Citation:

Envoyé par SpaceFrog

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

cela ne dépend pas de la résolution de l'écran (généralement en px/cm) ?

SpaceFrog · 10/01/2007, 16h10

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

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

SpaceFrog · 10/01/2007, 16h32

je l'ai deja fait d'ailleuirs

http://www.developpez.net/forums/sho...ghlight=taille

Auteur · 10/01/2007, 18h58

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

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

là je m'incline

10/01/2007, 11h58	#3
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 119 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 119 Points : 45 278 Points : 45 278	tiens on pourrait en dériver un convertisseur de em, pts, cm, inch en pixels __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

10/01/2007, 16h10	#5
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 119 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 119 Points : 45 278 Points : 45 278	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 et du coup ça devrait te donner la résolution en prime ! __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

10/01/2007, 16h32	#6
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 119 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 119 Points : 45 278 Points : 45 278	je l'ai deja fait d'ailleuirs http://www.developpez.net/forums/sho...ghlight=taille __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email