Webkit 列查找可见文本的范围

Posted 2023-03-14

【中文标题】Webkit 列查找可见文本的范围

【英文标题】：Webkit columns find range of visible text

【发布时间】：2012-03-22 22:01:10

【问题描述】：

我有一段 html，我使用 Webkit 样式表属性在 UIWebView 中显示。我使用 Webkit 在列中显示 HTML 以模拟一本书。

一次只能看到一列（一列代表一页）。现在，我正在尝试查找可见 HTML 的范围，以便可以在第一个可见单词之前插入一个 span 元素。

我设法通过使用 javascript 函数document.elementAtPoint（我可能把函数名弄错了）获取了包含第一个可见单词的 HTML 元素，并更改了它的 CSS 类。但这对我来说还不够准确。我需要它准确到第一个可见词。

这个想法是在字体大小增加或减少时在第一个可见单词处创建一个分栏符。我可以使用 JavaScript 来确定元素在哪一列，并以编程方式将用户滚动到该列，但首先我需要在其中获取元素。

谁能帮帮我？

【问题讨论】：

您是否使用 CSS 列（例如 -webkit-column-count）？也许你可以发布一个演示？特别是，如果@DavidMulder 对您已经在做和想要实现的目标有更清晰的了解，他可能会提供更多帮助。 :)

【参考方案1】：

CSSOM 视图模块规范将caretPositionFromPoint(x, y) 添加到Document 接口，该接口返回指定x 和y 坐标的插入符号位置。 WebKit 支持caretRangeFromPoint，它与早期规范非常相似，它返回一个Range。

该单词可能已被连字符并因此跨越两列，因此您可能希望考虑将span 直接插入光标点的更天真的方法，而不是将第一个单词包含在一个跨度中。这是一个例子：

var caretPos = document.caretRangeFromPoint(x, y);

if (caretPos)
    caretPos.insertNode(document.createElement('span'));

演示（仅限 WebKit——点击插入 span）： http://jsfiddle.net/Jordan/Aw9aV/

最后一个考虑：WebKit 最终可能会停止支持caretRangeFromPoint 来代替caretPositionFromPoint；如果是这样，您将需要调整您的代码。另请注意，后者返回一个CaretPosition，它可能无法实现insertNode 方法。规格仍在 WD 中，因此请注意它仍在不断变化。

【讨论】：

好的，我已经尝试了我能想到的一切，但无法让它在 UIWebView 中工作。有什么指点吗？

啊，开枪！我无法立即想到任何事情；我知道 iPad 上的 WebKit 支持 caretRangeFromPoint 方法，所以我只能猜测通过 UIWebView 运行 JS 有什么特别之处？也许您可以发布您正在使用的代码示例？

对不起，我应该在上面的回复中标记你@EZFrag。

好的，我将赏金奖励给了你，因为它最接近我的需要。稍后我将不得不继续讨论，因为我已被分配到另一个高优先级项目。感谢您迄今为止的帮助。我希望我们可以在以后继续调查这个问题。

@EZFrag 你和我。过去一周我在度假，所以我无法回来，但我有点懊恼这对你没有用。我正在研究使用这种方法的东西，所以我知道它有效；只需要弄清楚这个特殊案例的奇怪之处！

【参考方案2】：

好的，完全确定你目前在做什么，但至少我应该能够提供一些有用的提示，因为我有一些使用 javascript 构建页面浏览系统的经验。

首先，在 CSS3 中，您可以定义列 https://developer.mozilla.org/en/CSS3_Columns ，它会自动将内容拆分为单个元素中的不同列（其中单个列具有 uiwebview 的完整宽度），然后添加浏览控件移动包含该元素的整个元素（使用 css3 3d 翻译实现平滑的硬件加速运动，并且您知道列的宽度，因此您无需担心页面上的第一个单词是什么）。在这种情况下，您不必担心自己拆分分栏。 （不过，正如我所说，我不确定你已经在做什么了）。 或者，您可以决定将所有内容包装在小的内联块中（就像旧的列实现所做的那样），或者甚至是单个内联元素，每个元素都包含一个单词。 （虽然这似乎不再需要） 最后，http://www.w3.org/TR/css3-regions/ 的工作正在进行中，这将使这在未来变得更加容易，但目前它仅在 chrome 和 ie10 中可用

另一方面，您可能已经这样做了，或者我可能没有抓住重点，在这种情况下，我需要先查看一些代码，然后才能给您更具体的答案。 （我可以想到各种 javascript 技巧来处理文本中的字母，但在你的情况下似乎没有必要）