Question

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

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

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

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

任何人都可以帮助我吗？

Answer 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只需点击即可插入跨度）： http://jsfiddle.net/Jordan/Aw9aV/

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

Answer 2

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

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

另一方面，您可能已经这样做了，或者我可能会忽略这一点，在这种情况下，我需要先查看一些代码才能给出更具体的答案。（我可以考虑使用各种javascript技巧来处理文本中的字母，但在您的情况下似乎没有必要）

Webkit列可以找到可见文本的范围

2 个答案: