'What should I do to solve the trailing punctuation mark is rendered at the start when I set dir="rtl" in html label?

When I set dir="rtl", the trailing punctuation mark is rendered at the start.

I expect that the result is I have a cat, her name is "butterfly"

but the actual result is "I have a cat, her name is "butterfly

What should I do to get the right text?

Thanks for your help.

Below is my code,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US" dir="rtl">

<head>
  <title>
    Create custom shape button
  </title>
</head>

<body onload="load()">
  <button id="b_button">
        <div id="b_button_label" width="500px" height="30px"></div>
    </button>
</body>
<script>
  function load() {
    let label = document.getElementById("b_button_label");
    label.textContent = `I have a cat, her name is "butterfly"`;
  }
</script>

</html>

The wrong result picture is,

enter image description here

javascripthtmldirectory


Solution 1:[1]

I'm a baby to programming and I aim to spend a few short minutes a day going through Stack to try to help the community however I can.

I struggled to find, or use the right phrases, to search the web but while testing how the characters in the quotation marks, I noticed that you can add "butterfly" to make it, '..."butterfly" butterfly'. and the output works just fine.

This could be a logic/grammar issue. Sorry I couldn't be of much help - hope this somehow helps your search!

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 smaB

Related Questions