title: Get a range's start and end offset's relative to its parent container
body: <p>Suppose I have this HTML element:</p>
  
  <pre><code>&lt;div id="parent"&gt;
   Hello everyone! &lt;a&gt;This is my home page&lt;/a&gt;
   &lt;p&gt;Bye!&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the user selects "home" with his mouse.</p>
  
  <p>I want to be able to determine how many characters into <code>#parent</code> his selection starts (and how many characters from the end of <code>#parent</code> his selection ends). This should work even if he selects an HTML tag. (And I need it to work in all browsers)</p>
  
  <p><a href="https://developer.mozilla.org/en/DOM/range.startOffset" rel="noreferrer"><code>range.startOffset</code></a> looks promising, but it is an offset relative only to the range's immediate container, and is a character offset only if the container is a text node.</p>