S. Peter S. Peter - 2 months ago 7
CSS Question

Make left to right languages be written as right to left html

In my html page, I need to make my text input accept a specific set of letters. I do that by catching the keypressed event and checking that the entered character is valid.

Those allowed characters are both taken from english that is written from left to right, and from a few other languages that are written from right to left. Each word of the input can be a mix of both english and arabic, hebrew letters.

I need to make the text box display the text written from right to left (same behavior for hebrew or arab to apply to english) -
for example if I write down -

A

B

א

ב

C

D

Y

I want it to be presented exactly in this order from right to left.

Setting the

"style:dir=rtl"
doesn't solve it, it just present the text to be written from right to left, but doesn't actually change the order of the English characters to be presented as I need.

rtl
result is this:

B

A

א

ב

Y

D

C

What is the best way to do so?

Edit:

It seems like this addresses my problem : Right to left Text HTML input
although the solution is not explained to details as I'd hope to get.

Answer

Set your textbox style to this:

style="direction:rtl; unicode-bidi:bidi-override;"

Why?

When you're just setting directionality (using direction: rtl), you still have separate "directional runs" within that long text, each with its own rendering behavior. The "AB" part is a left-to-right run and that's why you see it rendered as an English word with the B to the right of the A.

Adding unicode-bidi: bidi-override tells the browser to forget about those separate runs and simply render all characters one after the other from right to left.

[Added to address potential client applications using the data]

For client applications that use this data, you can provide the string itself in a way that will force them to display it correctly even if those client apps are out of your control.

Assuming the client apps access the data using an API or service of some sort (meaning you don't let them access your database directly) then you can add a Unicode control character called Right-to-Left Override (RLO) to the beginning of the string, before sending it to the client.

The RLO character code is \u202E so following your example above, the resulting string you would return to your client would be:

\u202E

A

B

א

ב

C

D

Y

Most web browsers and operating systems respect BiDi control characters and apply the correct BiDi rendering logic. So when a client app outputs that string to the UI, the underlying rendering engine should display the string as you intended.

Note: Adding a unicode character by its hex code to a string may vary depending on your platform and programming language.