Как узнать, визуально ли два текстовых узла

Я хочу знать, являются ли два текстовых узла визуально последовательными, независимо от структуры HTML, то есть, что между ними нет пустой строки или какого-либо другого элемента.

Я использую Диапазоны, чтобы получить прямоугольники (размер и положение), но между текстовыми узлами есть промежуток (нижняя часть первого прямоугольника не совпадает с верхней частью второго).

Я попытался вычислить это расстояние на основе line-height и font-size но не смог получить одно и то же значение.

Вот JsFiddle с моей попыткой: https://jsfiddle.net/3behsxxq/5/

Есть ли способ рассчитать это расстояние?

РЕДАКТИРОВАНИЕ: В первом случае кода jsFiddle есть четыре строки ("первый текст", "блок", "второй", "текстовый блок"), которые визуально последовательны, то есть визуально расстояние между ними одинаково, но число, которое я получаю, имеет разницу 7 (в этом первом случае). Если я попытаюсь отбросить это пространство, основываясь на разнице между высотой строки/размером шрифта и значениями диапазона, они не совпадают, поэтому я не могу противодействовать этому.

РЕДАКТИРОВАНИЕ 2. Контекст: на изображении ниже, 6 линий имеют одинаковое расстояние между ними. Я ищу способ определить, что они являются частью одного и того же абзаца, независимо от структуры html (потому что html может иметь элемент <p> или любой другой элемент для представления абзаца).

Ответ 1

var extractTextNodes = function(paragraph) {
  var nodes = [];
  function callback(node) {
    if (node.nodeType === Node.TEXT_NODE) {
      nodes.push(node);
    } else if (node.nodeType === Node.ELEMENT_NODE) {
      node.childNodes.forEach(callback);
    }
  }
  paragraph.childNodes.forEach(callback);
  return nodes;
};

var findParentParagraph = function(node) {
  var parent = node.parentElement;
  while (parent) {
    if (parent.tagName === "P") {
      return parent;
    }
    parent = parent.parentElement;
  }

  return null;
};

var areTextNodesSiblings = function(textNode1, textNode2) {
  var p = findParentParagraph(textNode1);
  if (!p) {
    return false;
  }

  var allTextNodes = extractTextNodes(p);
  var index1 = allTextNodes.indexOf(textNode1);
  var index2 = allTextNodes.indexOf(textNode2);
  if (index2 === -1) {
    return false;
  }
  return (index1 === index2 - 1) || (index1 === index2 + 1);
};

И просто вызовите areTextNodesSiblings, передав узлы.

Скрипка: https://jsfiddle.net/krmnve37/1/

Название гласит "визуально последовательный", но "отредактированный 2. контекст" говорит, что узлы должны быть в одном абзаце. Следующая функция проверит, находятся ли два узла в одном и том же абзаце, а не находятся ли они рядом друг с другом:

var areTextNodesInTheSameParagraph = function(textNode1, textNode2) {
  var p = findParentParagraph(textNode1);
  if (!p) {
    return false;
  }

  var allTextNodes = extractTextNodes(p);
  var index1 = allTextNodes.indexOf(textNode1);
  var index2 = allTextNodes.indexOf(textNode2);
  return index1 > -1 || index2 > -1;
};