'the button text is Search for "butterfly" but when dir="rtl" the text shows in page is "Search for " butterfly, why the quote position is changed?

I have a button and I set it's value = Search for "butterfly", when dir="ltr", the button text is what I set.

But when I set html dir="rtl", the button text change to "Search for " butterfly, how should I solve this issue?

Is it an issue that when last text is punctuation mark?

Thank you very much.

This is my html 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>  
    <button class="b_button">
        <div class="b_button_label">Search for "butterfly"</div>
    </button>
</body>
</html>


Sources

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

Source: Stack Overflow

Solution Source