How to know what lines / chars are currently visible in a textarea?

Question

Online editor with \"live preview\": there is a textarea on the left and a preview div on the right. Whenever the textarea changes, the preview is updated.

This work

Answer 1

Well, as a crazy way for doing it you can look how ACE converts the text into canvas-drawn lines. I assume with this approach you can determine the exact position (or better to say, the exact line objects that are currently visible.

But this could also be a kind of vicious circle if the canvas-generated text is compatible in complexity to what you are having in the preview.

Alternatively you can use a fixed-width font which will give you a knowledge of the exact number of chars in the single line, and thus a way of calculating the exact first / last lines.