rtl-selection-with-decoration.html

Enable keyboard shortcuts

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title>rtl-selection-with-decoration</title>

    <style>

p {

        font-size: 2em;

        text-decoration-color: rgba(0, 0, 0, 0.3);

        text-decoration-skip-ink: none;

      #text1 {

        text-decoration-line: line-through underline;

      #text2 {

        text-decoration-line: line-through overline;

      ::-moz-selection {

        background-color: white;

        color: black;

    </style>

    <script type="text/javascript" charset="utf-8">

      function select() {

        window.getSelection().removeAllRanges();

        var elems = document.getElementsByTagName('p');

        for (var i = 0; i < elems.length; ++i) {

          var range = document.createRange();

          range.setStart(elems[i].firstChild, 2);

          range.setEnd(elems[i].firstChild, 9);

          window.getSelection().addRange(range);

    </script>

  </head>

  <body onload="select()">

    <p id="text1" lang="he">זוהי עובדה הקורא שדעתו מבוססת של תהיה</p>

    <p id="text2" lang="he" dir="rtl">זוהי עובדה הקורא שדעתו מבוססת של תהיה</p>

  </body>

</html>