Medir el cuadro delimitador del nodo de texto en Javascript

Question

Tengo problemas para obtener el tamaño, en píxeles, de un nodo de texto que usa Javascript. Ejemplo:

 
<p> 
    first text block 
    <b>second text block</b> 
</p> 

necesito para obtener la caja de delimitación de los dos bloques de texto de forma independiente. Pude obtener el tamaño del segundo bloque simplemente midiendo el elemento < b>, pero el primero se me escapa. No parece que los nodos de texto en Javascript tengan un alto o ancho, por lo que puedo decir.

Envolviendo el primer bloque de texto en un < span> y midiendo eso no es una opción, porque he descubierto que un tramo no necesariamente hereda todos los estilos anteriores, y cuando envuelvo el texto, cambia repentinamente tamaño. Es como el Principio de Incertidumbre Heisenberg de Javascript; mi intento de medir algo lo cambia.

Estoy construyendo una aplicación que divide HTML en páginas (HTML EPUB, en realidad), y necesito saber la posición, altura y ancho de cada bloque de texto en la página para saber si ponerlo en esta página o en la siguiente.

¿Alguna sugerencia?

Answer 1

Usted puede hacer esto con un Range que soporta CSSOM View extensions, que es la mayoría de los navegadores recientes (Firefox 4+, WebKit desde principios de 2009, Opera 11, tal vez antes) y una TextRange en IE. El código TextRange es tedioso, así que lo he omitido aquí.

jsFiddle: http://jsfiddle.net/gdn6C/1/

Código:

function getTextNodeHeight(textNode) { 
    var height = 0; 
    if (document.createRange) { 
     var range = document.createRange(); 
     range.selectNodeContents(textNode); 
     if (range.getBoundingClientRect) { 
      var rect = range.getBoundingClientRect(); 
      if (rect) { 
       height = rect.bottom - rect.top; 
      } 
     } 
    } 
    return height; 
} 

Answer 2

Intente hacer los elementos que desea medir en línea. Los elementos en línea solo ocupan tanto espacio como sea necesario. Por lo tanto, tiene un ancho y alto absoluto que puede ser recuperado por javascript. Los elementos del bloque llenan todo el ancho del elemento contenedor. Por lo tanto, javascript no puede acceder a su ancho.