javascript - 构建网络阅读辅助工具 : row selector

Question

我一直在尝试制作一个行标记脚本来帮助我在线阅读文本。当我看书时，我总是用尺子或纸。在网上，我没有这个选项，通常会迷失在文本中。

W - move div up
S - move div down

JS fiddle for my current effort (S = down, W = up)

我能想到的最好的办法是让所有文本元素的行高相等，但这会使样式变得非常困难。此外，我希望能够在控制台中运行它以在任何网站上启用它(或将其作为附加组件安装)。

有没有更好的方法来设计这样的工具，使其更能适应未知内容？

• 我当然可以选择文本，而且我经常这样做。通常，它会导致我只选择一些词 -> 注意力会集中在那个词上，这是我想要避免的。
• 我也可以使用辅助窗口，我有时会这样做。但它有点不稳定，一旦你点击它就会消失。
• 跟随鼠标指针的 div 是可能的，但它太不稳定，感觉就像有什么东西卡在了你的手指上。

编辑:我用更改更新了 fiddle 。我保留了 javascript，因为没有它，您将无法将标尺移动到文本的下半部分。 Updated reading-ruler

Answer 1

您可以为 .ruler 设置 position: fixed 而不是 JavaScript。它将始终保持在同一个位置，因此您可以阅读其下方带有 .ruler 元素的文本。

这是 jsFiddle。 http://jsfiddle.net/RxDpP/1/