Cómo calcular el ancho total del texto incluyendo el rumbo izquierdo y derecho

Question

Estoy tratando de calcular el ancho total de un tramo en HTML, incluidos los rodamientos izquierdo y derecho del primer y el último caracteres. Ya he probado el valor de offsetWidth de Javascript y el ancho de jQuery & funciones outerWidth, pero ninguno de ellos devuelve el valor correcto que estoy buscando. Aquí hay un example de lo que quiero decir. Al correr en Firefox, el ancho calculado es de 135 px, mientras que la medición con el complemento de desarrollador web brinda un ancho real de 141 px.

Editar

Esto es lo que he intentado, y aquí están los valores que me da: offsetWidth = 135 jQuery.width() = 135 jQuery.outerWidth() = 135

Ninguno de ellos calcula el voladizo de 6px en la 'f' (que haría el ancho 141).

Answer 1

Lamentablemente, no existe una solución sencilla porque está afuera el ámbito del modelo de caja - el navegador en sí no reconoce el saliente de la letra 'f' cuando se renderiza el diseño. Puede ver esto usted mismo si ajusta el <span> dentro de un <div> de width: 135px, y overflow: auto - No aparecen barras de desplazamiento, el voladizo simplemente se corta. Esta es también la razón por la cual Firebug informa el ancho sin el voladizo.

Como señaló @Aaron, el problema no existe con las fuentes monoespaciadas ya que ninguna letra se extiende más allá del cuadro de ancho fijo del carácter en esas fuentes.

La única forma de encontrar el ancho real es a través de métodos basados ​​en píxeles (en lugar de basados ​​en diseños). Puedo pensar de una manera: dibuje el mismo texto, con la misma fuente, en un elemento <canvas>, y mida el ancho del píxel de esa manera.

Answer 2

¿Qué tal jQuery's .width()?

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

y

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

Answer 3

En realidad, creo que el problema es la fuente misma. Cambié el jsfiddle a font-family: monoespacio, y todo estaba contenido dentro del cuadro gris (y calculado correctamente, como resultado). Incluso dejarlo como la fuente original, pero cambiar la muestra a "aaa" o "mmmm" funcionó muy bien. Es solo el glifo "f" en esa fuente que lo está soplando por ti.

Lamentablemente, no conozco un atributo de DOM que tenga en cuenta eso. No estoy seguro de que sea una gran respuesta, pero no tengo acceso para comentar la pregunta y pensé que estos hallazgos podrían ayudarlo a orientarlo en la dirección correcta ...