begin process at 2012 02 05 23:40:02
  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 :7 546
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

Source avec Zip Source avec une capture SUBDIVISER LE RÉSULTAT D'UNE RECHERCHE EN PAGES par kimmp
Source avec Zip TIMER : SETTIMEOUT & SETINTERVAL AMÉLIORÉS par jdmcreator
Source avec Zip Source avec une capture ONGLETS ET CHANGEMENT INSTANTANÉ DE LA LANGUE par william voirol
Source avec Zip Source avec une capture COPIER DU TEXTE par m22001111
Source avec Zip DIALOGUE ENTRE FENÊTRES MÈRE ET FILLE par william voirol
Toutes les sources de la catégorie Trucs & Astuces

 Sources en rapport avec celle ci

TAILLE DE TEXTE EN FONCTION DE LA RÉSOLUTION par tefa24600
Source avec Zip MARQUEE VERSION2 COMPATIBLE MOOTOOLS, JQUERY, PROTOTYPE ET S... par Kimjoa
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

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

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 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 Taille écran ou fenêtre ! [ par vdzh ] Décidément, je suis bavard aujourd'hui. Commençant, à un age canonique (57 ans) à programmer sur PC (au lieu de AS400), j'aurais besoin de pouvoir ( Taille d'une chaine de caractere en pixel [ par mchab ] Bonjourcomme le sujet le laisse pr&#233;voir, je cherche &#224; r&#233;cup&#233;rer la taille en pixel d'une chaine de caracteres affich&#233;e dans&n Problème de string.replace(); [ par thomvaill ] Bonjour, &nbsp;Il se trouve que j'ai un petit probl&#232;me avec un replace(); Au d&#233;but j'avais fait : res.replace("Statut",""); Mais &#231;a ne firefox proxy authentification afin de mettre a jour plugin java [ par Ronnymoi ] Bonjourj'ai un petit probleme concernant la mise &#224; jour des plugins java sous firefoxEn effet firefox attend l'authentification au proxy du clien Redimensionnement auto iframe en largeur - pb sous FireFoX [ par pico_rasta ] J'utilise 2 codes javascript diff&#233;rents pour le redimensionnemenent automatique d'une iframe dans un page :sous IE :document.all[frame].style.hei détecter la taille d'une image [ par attentio ] bonjour, j'ai une fonction qui me permet d'ouvrir des images dans une popup a la taille de la popup, ca marche bien.Mais le probleme c'est que de temp Taille de police [ par biskbart ] Bonjour, je souhaiterais savoir si c'est possible pour une police &#224; largeur non constante de connaitre la longueur de la chaine en pixel. J'ai ch recuperer la taille de l'ecran de l'internaute [ par s_tatoue ] Bonjour, -La page principale de mon site est un tableau.-J'aurai aimais savoir s'il &#233;tait possible de r&#233;cup&#233;rer la hauteur de


Nos sponsors


Sondage...

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

Photo Beautiful woman in a bikini meditating on the beachPhoto Renewable Energy is Within Reach
Photo Happy Bright Landscape WIth Butterflies 

Visiter la photothèque
 
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,842 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)