Comment calculer la largeur totale du texte y compris les relèvements gauche et droit

Question

J'essaie de calculer la largeur totale d'une travée en HTML, y compris les relèvements gauche et droit du premier et du dernier caractère. J'ai déjà essayé les fonctions externalWidth de widthWidth et de width de jQuery de jQuery, mais aucune d'entre elles ne renvoie la valeur correcte que je recherche. Voici un example de ce que je veux dire. En cours d'exécution dans Firefox, la largeur calculée est de 135 pixels, tandis que la mesure avec le plug-in Web Developer donne une largeur réelle de 141 pixels.

Modifier

Voici ce que j'ai essayé, et voici les valeurs qu'il me donne: offsetWidth = 135 jQuery.width() = 135 jQuery.outerWidth() = 135

Aucun d'eux ne calcule le dépassement de 6px sur le 'f' (ce qui ferait la largeur 141).

Answer 1

Malheureusement, aucune solution simple n'existe parce il est à l'extérieur le domaine de la boîte modèle - le navigateur lui-même ne reconnaît pas le surplomb de la lettre «f» lors de la mise en page de rendu. Vous pouvez voir cela par vous-même si vous envelopper le <span> dans un <div> de width: 135px, et overflow: auto - Aucun barre de défilement n'apparaît, le surplomb est simplement coupé. C'est aussi pourquoi firebug rapporte la largeur sans le surplomb. Comme le souligne @Aaron, le problème n'existe pas avec les polices à espacement fixe car aucune lettre ne s'étend au-delà de la boîte à largeur fixe du caractère dans ces polices.

La seule façon de trouver la largeur réelle est à travers des méthodes basées sur les pixels (plutôt que sur la mise en page). Je peux penser à une façon: dessiner le même texte, avec la même police, sur un élément <canvas>, et mesurer la largeur du pixel de cette façon.

Answer 2

Que diriez-vous de .width() de jQuery?

<span id="spanId"> ... </span> 

et

var w = $('#spanId').width(); 

Answer 3

En fait, je pense que le problème est la police elle-même. J'ai changé le jsfiddle à font-family: monospace, et tout était contenu dans la boîte grise (et calculé correctement, en conséquence). Même en le laissant comme la police originale, mais en changeant l'échantillon à "aaa" ou "mmmm" a fonctionné très bien. C'est juste le glyphe "f" dans cette police qui le souffle pour vous.

Malheureusement, je ne connais pas d'attribut DOM qui en tienne compte. Pas sûr que c'est une réponse, mais je n'ai pas accès à commenter la question et je pensais que ces résultats pourraient vous aider à vous diriger dans la bonne direction ...