Измените ограничительную рамку текста node в Javascript

У меня возникли проблемы с получением размера в пикселях текста node с помощью Javascript. Пример:

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

Мне нужно получить ограничительную рамку из двух текстовых блоков независимо. Я мог бы получить размер второго блока, просто измеряя элемент <b> , но первый ускользает от меня. Похоже, что текстовые индексы в Javascript имеют высоту или ширину, насколько я могу судить.

Обертка первого текстового блока в < span и измерение, которое не является опцией, потому что я обнаружил, что span не обязательно наследует все стили над ним, и когда я обертываю текст, он внезапно меняет размер. Это похоже на принцип неопределенности Гейзенберга Javascript; моя попытка измерить что-то меняет его.

Я создаю приложение, которое разбивает HTML на страницы (на самом деле, EPUB HTML), и мне нужно знать положение, высоту и ширину каждого блока текста на странице, чтобы я мог знать, этой страницы или следующей страницы.

Любые предложения?

Ответ 1

Вы можете сделать это с помощью Range, который поддерживает CSSOM View extensions, который является последним браузером (Firefox 4+, WebKit с раннего времени 2009, Opera 11, возможно, раньше) и TextRange в IE. Код 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;
}

Ответ 2

Попробуйте сделать элементы, которые вы хотите измерить в строке. Встроенные элементы занимают столько места, сколько требуется. Таким образом, он имеет абсолютную ширину и высоту, которые могут быть получены javascript. Элементы блока заполняют всю ширину содержащего элемента. Таким образом, javascript не может получить доступ к своей ширине.