Why Is a Trailing Punctuation Mark Rendered at The Start with Direction:Rtl

Why is a trailing punctuation mark rendered at the start with direction:rtl?

The reason is that the exclamation mark “!” has the BiDi class O.N. ('Other Neutrals'), which means effectively that it adapts to the directionality of the surrounding text. In the example case, it is therefore placed to the left of the text before it. This is quite correct for languages written right to left: the terminating punctuation mark appears at the end, i.e. on the left.

Normally, you use the CSS code direction: rtl or, preferably, the HTML attribute dir=rtl for texts in a language that is written right to left, and only for them. For them, this behavior is a solution, not a problem.

If you instead use direction: rtl or dir=rtl just for special effects, like making table columns laid out right to left, then you need to consider the implications. For example, in the table case, you would need to set direction to ltr for each cell of the table (unless you want them to be rendered as primarily right to left text).

If you have, say, an English sentence quoted inside a block of Arabic text, then you need to set the directionality of an element containing the English text to ltr, e.g.

<blockquote dir=ltr>Hello, World!</blockquote>

A similar case (just with Arabic inside English text) is discussed as use case 6 in the W3C document What you need to know about the bidi algorithm and inline markup (which has a few oddities, though, like using cite markup for quoted text, against W3C recommendations).

HTML/CSS RTL and vertical-rl cause trailing punctuation marks placed to wrong places

I think this is exactly what you need

p.rtl {
   direction: ltr;
}

Full example:

p.rtl {
  writing-mode: vertical-rl;
  display: inline-block;
  height: 100vh;
  white-space: normal;
  text-align: left;
  direction: ltr;
}

body {
  margin: 0px;
  white-space: nowrap;
  direction: rtl;
  display: flex;
}

The page explains why uses "direction: ltr" for texts in "Han-based writing mode":

Han-based systems are commonly written using a left-to-right inline
direction with a downward (top-to-bottom) block flow direction, or a
top-to-bottom inline direction with a leftward (right-to-left) block
flow direction. Many magazines and newspapers will mix these two
writing modes on the same page.
https://www.w3.org/TR/css-writing-modes-4/

HTML/JS end of line punctuation wrongly aligns to the left

See if any of your CSS has direction: rtl. If your intention is not to support RTL, then removing this should fix the problem.

If you do need to support it, then I recommend this excellent (but long!) article: http://moriel.smarterthanthat.com/tips/the-language-double-take-dealing-with-bidirectional-text-or-wait-tahw/

TLDR: the reason your punctuation changes order is due to the weak directionality of certain characters... and it's a right PITA when dealing with multilingual sites that mix LTR and RTL!

use direction=rtl in pre with html tags

Using the &lrm to your punctuations seems to have fixed the problem.

Your snippet would look something like this;

   <pre>
        <html meta= test"‎>
        Hello, World!
        </html>
    </pre>

For more explanation see: https://stackoverflow.com/a/42551367/11226302

There may be other solutions/workarounds as well, but this is what I found to be most practical and useful in cases such as yours!

Flash - punctuation marks get aligned wrongly

Ok, so three hours later I am here with a solution. I hope it saves time for other people.

Flash cs5 has got a built in support for rtl languages. You need to enable it:
1. Change your project publish settings to flash player 10 (only supported there)
2. Go to edit --> preferences --> text --> show right-to-left text options
2. Change your textfield's type to tlftext (it's a new option that suddenly shows)
3. Set your alignment

Now, if you just want to set text statically your fine, but if you want to set text using some as3 code you need to do the following as wel:

Create a new text format, give it the following settings and apply it to your text field:

var tfFormat:TextFormat = new TextFormat();  
tfFormat.align = TextFormatAlign.RIGHT;
txt.setTextFormat(tfFormat);

And that's it. Good luck to you all.

How not to make dir='rtl' send special characters like . / + to the left side?

You need to use the <bdi> (bi-directional text) tag to wrap your text, see this article

<div dir="RTL">
   <bdi>
      Hello There!
   </bdi>
</div>

More on bdi from MDN

Unfortunately this is only supported in Chrome and FireFox.

As Jukka mentions, this will effectively accomplish the same as right-aligning your text, in which case you should be doing that.

See here for a list of examples

Can I put Ellipsis on the Left and Periods on the Right?

One way is to put the content of the div in a span with dir="ltr", forcing the content to be rendered in the standard order while still cutting off to the left as desired.

div {  width: 300px;  white-space: nowrap;  border: solid 1px #000;  margin-bottom: 10px;  direction: rtl;  text-overflow: ellipsis;  overflow: hidden;}

<div>  <span dir="ltr">This is a sentence that is too long to fit in the space provided.  The ellipsis is where I want it.</span></div>
<div>  <span dir="ltr">Where is the question mark?</span></div>

Why Is a Trailing Punctuation Mark Rendered at The Start with Direction:Rtl