JavaScriptのテキストノードのバウンディングボックスを測定します。

Question

JavaScriptを使用してテキストノードのサイズをピクセル単位で取得できません。例：

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

2つのテキストブロックの境界ボックスを個別に取得する必要があります。 < b>要素を測定するだけで、2番目のブロックのサイズを取得できましたが、最初のブロックはわかりません。 Javascriptのtextnodeの高さや幅は、私が知る限りは現れていません。

<スパンの最初のテキストブロックを折り返して測定することはオプションではありません。スパンが必ずしもその上のすべてのスタイルを継承するとは限らないことがわかったので、突然変更しますサイズ。それはJavascriptのハイゼンベルグ不確実性原理のようです。何かを測定する私の試みはそれを変える。

私はHTMLをページ（実際にはEPUB HTML）に分割するアプリケーションを構築していますが、ページ上の各テキストブロックの位置、高さ、幅を知る必要がありますこのページまたは次のページで

提案がありますか？

Answer 1

あなたは、最新のブラウザ（多分それ以前のFirefox 4+、2009年初頭以来のWebKit、オペラ11、）とIEでTextRangeあるCSSOM View extensionsをサポートRange、でこれを行うことができます。 TextRangeのコードは面倒ですので、ここでは省略しました。

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

コード：

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

測定したい要素をインラインにしてみてください。インライン要素は、必要なだけ多くの領域を占有します。したがって、それはjavascriptによって取り出すことができる絶対幅と高さを持っています。ブロックエレメントは、包含エレメントの幅全体を埋めます。したがって、javascriptはその幅にアクセスできません。