begin process at 2010 03 22 03:36:10
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Trucs & Astuces

 > RÉCUPERER LA LARGEUR D'AFFICHAGE D'UN TEXTE

RÉCUPERER LA LARGEUR D'AFFICHAGE D'UN TEXTE


 Information sur la source

Note :
Aucune note
Catégorie :Trucs & Astuces Classé sous :taille, string, prototype, largeur Niveau :Débutant Date de création :04/03/2007 Vu :6 032
Auteur : LocalStone

Ecrire un message privé
Commentaire sur cette source (11)
Ajouter un commentaire et/ou une note

 Description

Salut,
Je me demandais tout à l'heure comment on pouvait faire pour récuperer la largeur d'un texte ... Quand je dis "largeur", je ne veux pas dire le nombre de caractères, mais plutôt la largeur que va prendre le texte si on l'affiche sur une page. Bah en fait, c'est pas si évident. Du coup, j'ai trouvé cette solution là. Elle vaut ce qu'elle vaut : c'est un peu du bricolage puisqu'on doit attendre que la page soit chargée avant de l'utiliser. Sinon, ça provoque une erreur.

Source

  • <html>
  • <head>
  • <script type="text/javascript">
  • String.prototype.computeDisplayWidth = function(font, size)
  • {
  • var oText, oSpan, width;
  • oText = document.createTextNode(this);
  • oSpan = document.createElement("span");
  • oSpan.style.fontFamily = font;
  • oSpan.style.fontSize = size;
  • oSpan.appendChild(oText);
  • document.body.appendChild(oSpan);
  • width = oSpan.offsetWidth + "px";
  • document.body.removeChild(oSpan);
  • return width;
  • }
  • window.onload = function()
  • {
  • alert("Coucou".computeDisplayWidth("Georgia", "11px"));
  • }
  • </script>
  • </head>
  • <body>
  • </body>
  • </html>
<html>
   <head>
      <script type="text/javascript">
         String.prototype.computeDisplayWidth = function(font, size)
         {
            var oText, oSpan, width;
            oText = document.createTextNode(this);
            oSpan = document.createElement("span");
            oSpan.style.fontFamily = font;
            oSpan.style.fontSize = size;
            oSpan.appendChild(oText);
            document.body.appendChild(oSpan);
            width = oSpan.offsetWidth + "px";
            document.body.removeChild(oSpan);
            return width;
         }
         
         window.onload = function()
         {
            alert("Coucou".computeDisplayWidth("Georgia", "11px"));
         }
      </script>
   </head>
   <body>
   
   </body>
</html>

 Conclusion

Plutôt que de définir une fonction indépendante et tout ça, je l'ai directement ajoutée comme méthode du prototype de l'objet String. Voilà !
N'hésitez pas à laisser des commentaires. C'est pas grand chose comme source, mais si ça peut aider quelqu'un :) ...


 Sources du même auteur

DÉBUT D'UNE LIBRAIRE DE GESTION AVANCÉE DU STYLE ...
Source avec Zip MACHINE DE TURING (ENTIÈREMENT CONFIGURABLE) ...
PSEUDO SELECTBOX EN DHTML ...
Source avec Zip JEU DE LA VIE DE CONWAY ...
Source avec Zip CONVERTISSEUR DE COULEUR RGB VERS HTML ET VICE VERSA
Toutes les sources de LocalStone

 Sources de la même categorie

HTML_ENTITIES_DECODE par zen69
ACCÈS À LA MÉTHODE SETATTRIBUTE('STYLE','') SOUS IE6 par masternico
OUTIL DE SÉLECTION par jdmcreator
Source avec Zip SIMPLIFIER LA CREATION DYNAMIQUE D'ELEMENT HTML par kazma
DÉTECTER SI CSS EST ACTIVÉ par jdmcreator
Toutes les sources de la catégorie Trucs & Astuces

 Sources en rapport avec celle ci

TRIM, REMOVESPACE, PATTERN MAIL, PATTERN TÉLÉPHONE, PATTERN ... par labotemplates
Source avec une capture TAILLEFONTE par tiger222
Source avec Zip Source avec une capture JVSMENU : MENUS CLASSIQUES ET CONTEXTUELS AVANCÉS EN JAVASCR... par emericv
Source avec Zip CLASS.JS , TEST D'IMPLÉMENTATION DE CLASS EN JAVASCRIPT par Kimjoa
Source avec Zip Source avec une capture DOM BUILDER : PROTOTYPE ROCKS ! par ralecul

Commentaires et avis

Commentaire de bultez le 05/03/2007 11:01:39


on ne commente jamais assez les sources déposées
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.
<body>
<script type="text/javascript">
alert("Exemple".computeDisplayWidth("Comic Sans MS", "12px"));
     </script>
</body>
>>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.

@+

Commentaire de LocalStone le 05/03/2007 22:20:55

Hé bah merci beaucoup, ça fait plaisir d'avoir un commentaire aussi sympa.
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.

Commentaire de PetoleTeam le 06/03/2007 18:31:22

Bonjour,
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)

Commentaire de bultez le 06/03/2007 18:49:30

+1 avec PetoleTeam.
et même +3, pour les 3 bonnes remarques.
et peut-être même +4... avec les Snippets.

Commentaire de LocalStone le 06/03/2007 21:02:16

Merci pour vos conseils ... Néanmoins, j'ai 2 petites questions. La première  : [honte]c'est quoi exactement un snippet[/honte] ? La seconde, comment ça, passer un style en paramètre ? Enfin j'ai bien quelques petites idées (voir ma source précédente ;) !!), mais je ne pense pas que ce soit vraiment une bonne idée dans l'état actuel des choses.
Donc auriez-vous une idée ?
Merci !
++ !
L.S.

Commentaire de bultez le 08/03/2007 16:55:45


ah... mais j'étais sûr que PetoleTeam allait répondre,
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>
<body>
</body>
</html>

pas testé ... à tester et finaliser donc...
°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°°

Commentaire de PetoleTeam le 09/03/2007 13:11:49

Bonjour, et il est vrai que je n'est pas beaucoup Forumé ces derniers jours...
[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)

Commentaire de bultez le 09/03/2007 13:34:37

pour le reste faisons confiance à LocalStone !
"il a tout"... y compris le savoir faire.

Commentaire de flexx le 13/03/2007 09:58:06

Bonjour

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

Commentaire de flexx le 13/03/2007 10:42:14

Bon, j'ai trouvé le problème :)

En fait, il faut que le style du texte soit en "position: absolute" sous Opera.

Il faut donc rajouter :
oSpan.style.position = "absolute";

Voilà :)

Commentaire de nullite le 09/02/2009 04:48:59

Bravo,
fallait y penser

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

creer des tableaux dynamiquement [ par nemos4284 ] bonjour je dois creer un tournoi pour un jeu d'othello en java donc pour &#231;a je veux faire des rencontres par poules donc creer des tableaux mais hauteur de police [ par inaden ] Bonjour,y a-t-il à votre connaissance le moyen de changer la largeur d'une police via CSS. Pas sa taille, mais sa largeur pour une taille donnée.Merci [a supprimer] PS la couleur de fond de mon texte ne s'affiche pas [ par 59cortex59 ] bonjour, je voudrais afficher du texte qui change de couleur sur un fond rouge. Le texte s'affiche et change de couleur, mais la couleur de fond ne s [a supprimer] background de mon rectangle [ par 59cortex59 ] bonjour,le code suivant permet de créer un rectangle avec du texte.le texte change de couleurmai le fond du rectangle non... /******************* Le nom d'une variable (ou classe) en string , ce serait superbe !?! [ par diaod8 ] J'aimerais que si j'ai une classe toto, que de cette classe je peu récupérer un string "toto", sans savoir quel est le nom de la classe (si c'est tyty avoir le nom d'une variable en string, ce serait superbe ?!? [ par diaod8 ] J'aimerais que si j'ai une classe toto, que de cette classe je peu récupérer un string "toto", sans savoir quel est le nom de la classe (si c'est tyty banniere selon résolution [ par potter64 ] Bonjour,Je suis le webmaster de la Chambre des Secrets, et nous avons refait notre design il y a quelques jours.Il reste quelques bugs que l'on corrig Recherche du script du code sur la date du jour uniquement en chiffre avec couleur et taille personnalisable merci... [ par pixelb ] Bonjour je souhaite mettre de la couleur sur les chiffres de ce script de date et pouvoir personnaliser la taille de cette date aussi. Merci d'avance  taille sur un script [ par Damou56 ] Bonjour,j'ai fais un script de news sur mon site mais le problème c'est que l'endroitoù est mon script d'adapte en fonction de la news, j'aimerais lui prototype.js --> bindAsEventListener [ par alexflex25 ] var obj = { name: 'A nice demo' };function handler(e)<


Nos sponsors


Sondage...

Comparez les prix


Archos 5 (250 Go)
Entre 440€ et 440€

Visiter le guide achat

CalendriCode

Mars 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,811 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)