如何确定两个文本节点在视觉上是否相邻？

Question

我想知道两个文本节点是否在视觉上相邻，而不考虑html结构，即两者之间没有空行或其他任何元素。

我正在使用Ranges来获取矩形（大小和位置），但是文本节点之间存在间距（第一个矩形的底部与第二个矩形的顶部不匹配）。

我尝试基于line-height和font-size计算这个间距，但我无法得到相同的值。

这里有一个带有我的尝试的JsFiddle：https://jsfiddle.net/3behsxxq/5/ 有没有一种方法可以计算这个间距？

在jsFiddle代码的第一种情况中，有四行文本（'first text'、'block'、'second'、'text block'）在视觉上是连续的，也就是说，它们之间的视觉距离是相同的，但我得到的数字差异为7（在这个第一种情况下）。如果我尝试根据行高/字体大小和范围值之间的差异来丢弃这个空格，它们并不匹配，因此我无法抵消它。

编辑2. 上下图像中的6行之间具有相同的距离。我正在寻找一种方法来确定它们属于同一段落，而不考虑html结构（因为html可能有一个<p>元素或任何其他元素来表示段落）。

- jcbp

---

我认为这里的困难部分在于像素字体大小与从最高升高（通常为d、b、l等）到最低降高（p、q）的完整高度不同。关于这个图形设计问题的答案非常有帮助：http://graphicdesign.stackexchange.com/questions/4035/what-does-the-size-of-the-font-translate-to-exactly - Robin James Kerrison

你是否知道矩形之间的间距小于行高和字体大小之差就足够了吗？ - Robin James Kerrison

这是一个相关问题，展示了如何使用 jQuery 来 确定屏幕顶部到元素顶部的垂直距离。你应该能够结合元素的高度使用它来确定第二个元素在第一个元素底部下面多远。 - kmoser

@jcbp，您想要获取两个文本节点之间的距离。您的问题不够清晰，请详细说明。 - Maheer Ali

即使两个元素在视觉上是连续的，如果有另一个元素通过CSS相对或绝对定位重叠在它们两个之上，会怎样呢？ - nnnnnn

Answer 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/

---

标题说“视觉上连续”，但“EDITED 2. Context”说节点必须在同一段落中。下面的函数将检查这两个节点是否只在同一个段落中，而不是它们是否相邻：

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

- Dimitar Nestorov