Calculate width & height of the selected text (javascript)
<p>I need to calculate the <code>width</code> and the <code>height</code> of the selected/highlighted text using JavaScript.</p>

<p>I am using the following code written by Tim Down, as the starting point,</p>

<pre><code>function getSelectionCoords() {
    var sel = document.selection, range;
    var x = 0, y = 0;
    if (sel) {
        if (sel.type != "Control") {
            range = sel.createRange();
            range.collapse(true);
            x = range.boundingLeft;
            y = range.boundingTop;
        }
    } else if (window.getSelection) {
        sel = window.getSelection();
        if (sel.rangeCount) {
            range = sel.getRangeAt(0).cloneRange();
            if (range.getClientRects) {
                range.collapse(true);
                var rect = range.getClientRects()[0];
                x = rect.left;
                y = rect.top;
            }
        }
    }
    return { x: x, y: y };
}
</code></pre>

<p>The <code>left</code> &amp; the <code>top</code> co-ordinates are being displayed correctly. To calculate the width &amp; the height, I need the <code>right</code> &amp; the <code>bottom</code> positions as well.</p>

<p>So I added few lines of code to find the <code>bottom</code> &amp; the <code>right</code> positions (Code available here - <a href="http://jsfiddle.net/pankajparashar/kv2Bp/">http://jsfiddle.net/pankajparashar/kv2Bp/</a>). But to my surprise, the code displays the <code>left</code> &amp; the <code>right</code> co-ordinates always the same, even though there is visible difference between them (tested only in firefox). </p>

<p>There is no problem with the <code>top</code> &amp; the <code>bottom</code> positions, as they are working perfectly, which will help me calculate the height. But to calculate the width, I would still need the correct <code>right</code> co-ordinate.</p>

<p>Can anybody point any flaws with the code? or any alternate approach, using which I can calculate the width &amp; the height of the selected text?</p>
