simple-underline-selection-ref.html

Enable keyboard shortcuts

<!--

     Any copyright is dedicated to the Public Domain.

     http://creativecommons.org/publicdomain/zero/1.0/

-->

<!DOCTYPE html>

<style>

html, body { margin: 0 }

svg, div { display: inline-block; width: 700px; height: 200px }

div { font: 16px sans-serif; text-decoration: underline; margin-left: -700px; vertical-align: 100px }

span { margin-left: 100px; }

</style>

<body>

  <svg></svg><div><span>hello</span></div>

  <script>

    var span = document.getElementsByTagName("span")[0];

    var range = document.createRange();

    range.setStart(span.firstChild, 1);

    range.setEnd(span.firstChild, 4);

    window.getSelection().addRange(range);

  </script>

</body>