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

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

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

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

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

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

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

Ответы

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;
}