RÉCUPERER LA LARGEUR D'AFFICHAGE D'UN TEXTE
cs_bultez
Messages postés
13615
Date d'inscription
jeudi 13 février 2003
Statut
Membre
Dernière intervention
15 octobre 2013
-
5 mars 2007 à 11:01
cs_nullite Messages postés 9 Date d'inscription mardi 25 janvier 2005 Statut Membre Dernière intervention 18 novembre 2009 - 9 févr. 2009 à 04:48
cs_nullite Messages postés 9 Date d'inscription mardi 25 janvier 2005 Statut Membre Dernière intervention 18 novembre 2009 - 9 févr. 2009 à 04:48
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.
https://codes-sources.commentcamarche.net/source/41737-recuperer-la-largeur-d-affichage-d-un-texte
https://codes-sources.commentcamarche.net/source/41737-recuperer-la-largeur-d-affichage-d-un-texte
9 févr. 2009 à 04:48
fallait y penser
13 mars 2007 à 10:42
En fait, il faut que le style du texte soit en "position: absolute" sous Opera.
Il faut donc rajouter :
oSpan.style.position = "absolute";
Voilà :)
13 mars 2007 à 09:58
J'ai remarqué qu'il était possible d'obtenir la largeur du texte sans attendre la fin du chargement de la page sous Internet Explorer et Firefox.
Par contre, cela ne marche pas sous Opéra :(
Comment peut-on faire (sans passer par un onload).
Merci
9 mars 2007 à 13:34
"il a tout"... y compris le savoir faire.
9 mars 2007 à 13:11
[y_a_pa_de_honte]c'est quoi exactement un snippet/y_a_pa_de_honte en anglais cela veut dire un truc comme petit bout, fragment, c'est les morceaux de codes que tu peux trouver en page d'acceuil à la rubrique
Derniers Snippets sur Codyx pour Javascript / DHTML
Bon revenons au code, en relisant j'en ai oublié un autre, paramètre, qui influ sur la taille, c'est le fontStyle si en italic, et il y en a surement d'autre...
Pour tout dire je pensais plus à un truc du style
String.prototype.computeDisplayWidth = function( font, class_)
avec
//-- Affectation de la class si en paramètre
oSpan.className = ( class_ ? class_: '');
et pour le reste faisons confiance à The Bultez
;0)
8 mars 2007 à 16:55
il n'a pas du avoir le temps...
ch'tit exemple, alors :
<html>
<head>
<script type="text/javascript">
String.prototype.computeDisplayWidth = function(font, size,gras)
{
var retour={"w":0,"h":0};
var oText = document.createTextNode(this);
var oSpan = document.createElement("span");
oSpan.style.fontFamily = font;
oSpan.style.fontSize = size;
var gr = gras ? gras : "bold"; // valeur par défaut
oSpan.style.fontWeight = gr;
oSpan.appendChild(oText);
document.body.appendChild(oSpan);
retour.w = oSpan.offsetWidth;
retour.h = oSpan.offsetHeight;
document.body.removeChild(oSpan);
return retour;
}
window.onload = function()
{
var r=("Coucou".computeDisplayWidth("Georgia", "11","bold"));
alert(r["w"]+"\t"+r["h"]);
}
</script>
</head>
</html>
pas testé ... à tester et finaliser donc...
°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°
6 mars 2007 à 21:02
Donc auriez-vous une idée ?
Merci !
++ !
L.S.
6 mars 2007 à 18:49
et même +3, pour les 3 bonnes remarques.
et peut-être même +4... avec les Snippets.
6 mars 2007 à 18:31
comme le dit The Bultez dommage pour les commentaires mais bon...
il reste que cette source à le mérite d'exister et c'est celle que l'on n'a jamais eu le temps, ou la motivation, d'écrire après avoir répondu aux question sur le forum.
Quelques petites remarques
1/ Il manque un élément important pour le calcul de la taille d'un texte c'est le fontWeight qui si il est GRAS donnera une dimension supérieure, pourquoi ne pas passer plutôt un style en paramètre.
2/ Pourquoi retourner la valeur avec px en plus, pas sur que cela soit utile, il est plus facile de l'ajouter que de l'enlever si besoin.
3/ Pourquoi ne pas retourner un tableau de dimension avec la Largeur et la Hauteur, on a souvent besoin des deux.
C'est peut être même à mettre dans les Snippets sur Codyx.
Bonne continuation...
;0)
5 mars 2007 à 22:20
C'est vrai qu'il faudrait poster plus de commentaires sur les sources, ça pourrait permettre de corriger bon nombres d'erreur, et puis aussi faire avancer les auteurs des sources !
++ !
L.S.
5 mars 2007 à 11:01
faudrait que tous ( surtout moi ) nous fassions un effort,
ce serait sympa.
>>récuperer la largeur d'un texte
problème connu et souvent posé.
>>pas si évident
auquel peu de "bonnes" réponses. pas si simple.
>>on doit attendre que la page soit chargée avant de l'utiliser.
testé ( avec IE ) pas de souci.
<script type="text/javascript">
alert("Exemple".computeDisplayWidth("Comic Sans MS", "12px"));
</script>
>>ajoutée comme méthode du prototype de l'objet String.
probablement une bonne approche.
et ça pourra servir d'exemple à d'aucuns.
>>C'est pas grand chose comme source
ben si. ça me semble nickel.
>>si ça peut aider quelqu'un
plus d'un.
@+