Webkit列可查找可见文本的范围

Webkit columns find range of visible text

本文关键字：范围 文本 查找 Webkit      更新时间：2023-09-26

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

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

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

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

有人能帮我吗？

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

该单词可能已连字符，因此跨越了两列，因此与其将第一个单词包装在一个跨度中，您可能希望考虑直接在光标点插入span的更简单的方法。这里有一个例子：

var caretPos = document.caretRangeFromPoint(x, y);
if (caretPos)
    caretPos.insertNode(document.createElement('span'));

演示（仅限WebKit--单击可插入跨度）：http://jsfiddle.net/Jordan/Aw9aV/

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

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

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

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

相关文章：