How do I get the position of individual characters rendered on user's browsers? (Jquery/javascript)
<pre><code>&lt;p&gt; this is a very long text indeed. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. &lt;/p&gt;    
</code></pre>

<p>When I render the sample text on the web, the position of each characters change based on user's settings. (For example, the line divisions are different based on which browser the user is using, and how much is the page magnified  - zoom in any webpage with lots of texts and you'll see this changes a lot)</p>

<p>But the application I'm trying to make has to get the position of individual characters to work.
So I need the position relative to the entire webpage and/or some other position (such as the position relative to the starting point of the paragraph.)</p>

<p>BTW, I prefer Jquery solution...but if you can't do it with Jquery, I'm OK with solutions using other libraries/tools</p>

<p>Thank you :)</p>

<p>p.s:sorry for my bad English... if you don't get the question, it's probably my fault.</p>

<hr>

<p>I got the idea of using the span tag and the .offset()  - thank you for the quick solutions:)</p>

<p>But I wonder if there's another way than using the span tag...maybe somekind of empty tag that does nothing but contain a character or more...</p>

<p>Is this possible if I use CSS or some other stuff?</p>

<p>anyway, thank you again :)</p>
