すべての文字の位置を取得する方法

Question

一部のノードの各文字の位置（左上、上端）を取得する方法は？私はただ一つの方法を知っています：それ自身のタグ内のすべての文字をラップし、次にそれを座標にすることができます。しかし少しゆっくりです

Answer 1

私は質問に答えが見つかりました - 範囲のインターフェイスは私が必要とするすべての情報を表示することができます（詳細 - http://www.w3.org/TR/DOM-Level-2-Traversal-Range/ranges.html）。

Answer 2

すでに見た文字の幅をキャッシュすることができます。

function findOffset(index) { 
    // Set some variables early on 
    var sizes   = {}, 
     text   = "The text you are getting an offset from.", 
     lineHeight  = 16, // You can get this dynamically if you want 
     containerWidth = 500, // Same with this one 
     leftOffset  = 0, 
     topOffset  = 0, 
     i    = 0, 
     cur; 

    // Loop through and count up the sizes of each character until this one 
    for (; (i < text.length) && (i <= index); i++) { 

    // Set the current character 
    cur = text.charAt(i); 

    // Check to see if we have a size 
    if (typeof size[cur] == "undefined") { 
     // If not: Wrap it in a span (You seemed to already know how to do this) 
     // then cache the result 
     size[cur] = findWidthByTemporarilyWrappingInASpan(text, i); 
    } 

    // If it's greater than a line can hold, we'll wrap 
    if ((sizes[cur] + leftOffset) > containerWidth) { 

     // Reset the left offset 
     leftOffset = 0; 

     // Increment the top offset 
     topOffset += lineHeight; 
    } 
    // Otherwise, increment from the left 
    else { 
     leftOffset += sizes[cur]; 
    } 
    } 

    // return an object with the coordinates 
    return { 
    leftOffset: leftOffset, 
    topOffset : topOffset 
    }; 
} 

次に、この機能を呼び出すときに取得する各インデックスをメモして、1つずつ閉じることができます。つまり、各キャラクタではなく、普通は〜50（英数字+句読点など）時間を超えない限り、DOMから離れることを意味します。

これは確かにモノスペースフォントでは機能しますが、他のタイプのフォントにはメリットがあると思います。さまざまなブラウザのラッピングリサーチを行うだけです。

また、これは左寄せなどを前提としていることに注意してください。実際のコードソリューションよりも優れています。