構建網頁閱讀幫助：行選擇器

Question

我一直在嘗試製作行標記腳本以幫助我在線閱讀文本。當我讀書時，我總是使用尺子或紙張。在線上，我沒有這個選項，通常會在文本中迷失方向。

W - move div up 
S - move div down 

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

我能想出的最好的事情是讓所有文本元素等於行的高度，反而使得造型挺難的。此外，我希望能夠在控制檯中運行它，以便在任何網站上啓用它（或將其作爲附件安裝）。

有沒有更好的方法來設計這樣一個工具，這使得它更能夠適應未知內容？

• 我當然可以選擇文本，我做了很多。通常，這會導致我只選擇一些詞 - >注意那個詞，這是我想避免的。
• 我也可以使用輔助窗口，我有時會這樣做。但它有點搖擺，只要你點擊它就會消失。
• 一個跟隨鼠標指針的div是一種可能性，但它太搖擺不定，感覺像是有東西卡在手指上。

編輯：我更新了小提琴的變化。我保留了javascript，因爲如果沒有它，你將無法將標尺移動到文本的較低部分。 Updated reading-ruler

Answer 1

代替JavaScript，您可以爲.ruler設置一個position: fixed。它將始終保持在同一個位置，所以您可以使用它下面的.ruler元素閱讀文本。

這裏是的jsfiddle。 http://jsfiddle.net/RxDpP/1/