Come calcolare la larghezza totale del testo compreso il rilevamento sinistro e destro

Question

Sto provando a calcolare la larghezza totale di uno span in HTML, compresi i cuscinetti sinistro e destro del primo e dell'ultimo carattere. Ho già provato la funzione offsetWidth e jQuery della larghezza & della larghezza esterna di Javascript, ma nessuna di esse restituisce il valore corretto che sto cercando. Ecco un example di ciò che intendo. In esecuzione in Firefox la larghezza calcolata è di 135px, mentre la misurazione con il plug-in Web Developer fornisce una larghezza effettiva di 141px.

Modifica

Ecco quello che ho provato, e qui sono i valori che mi dà: offsetWidth = 135 jQuery.width() = 135 jQuery.outerWidth() = 135

Nessuno di loro sta calcolando la sporgenza di 6px sulla "f" (che renderebbe la larghezza 141).

Answer 1

Purtroppo, non esiste una soluzione semplice perché è all'esterno il regno del modello di box - il browser stesso non riconosce lo sbalzo della lettera "f" durante il rendering del layout. Puoi vederlo da solo se sposti lo <span> all'interno di uno <div> di width: 135px e overflow: auto - Non vengono visualizzate barre di scorrimento, la sporgenza viene semplicemente interrotta. Questo è anche il motivo per cui Firebug riporta la larghezza senza la sporgenza.

Come sottolineato da @Aaron, il problema non esiste con i caratteri a spaziatura fissa poiché nessuna lettera si estende oltre la casella a larghezza fissa del carattere in quei tipi di carattere.

L'unico modo per trovare la larghezza reale è tramite metodi basati su pixel (piuttosto che basati su layout). Posso pensare a un modo: disegnare lo stesso testo, con lo stesso carattere, su un elemento <canvas> e misurare la larghezza del pixel in questo modo.

Answer 2

E a proposito di jQuery's .width()?

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

e

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

Answer 3

In realtà, penso che il problema è il carattere stesso. Ho cambiato il jsfiddle in font-family: monospace, ed era tutto contenuto nella casella grigia (e calcolato correttamente, come risultato). Anche lasciandolo come carattere originale, ma cambiando il campione in "aaa" o "mmmm" funzionava alla grande. È solo il glifo "F" in quel font che lo sta soffiando per te.

Sfortunatamente, non conosco un attributo DOM che conti per quello. Non sono sicuro che questa sia una risposta, ma ho pensato che questi risultati potrebbero aiutarti a indirizzarti nella giusta direzione ...