CSS direction: rtl bug?

1

Hello, I am working on the calculator project using React

I am using the window calculator as sample. On window calculator, numbers, symbols, and operators input from right to left. I want to do the same thing using the “direction: rtl” to make the same thing. However, I am countering a bug when inputting symbols or operators, they are inputting from left to right while numbers are from right to left.

https://codesandbox.io/s/reactcaculator-re5pd
If you input some numbers
then input any operators or symbols,
it would display on the left side
then input a number again would display the operator or symbols on the right side again

For example
First, I input some numbers 12345
12345

then, I input a decimal
.12345

then I input a number again
12345.5

Using “direction: ltr” doesn’t has the problem

Also,
I try to do it in another way, I consider to work on left to right, however, because it is “overflow: hidden”
it would hide the numbers. Is it possible to move the text to the latest input position ?

Thank

2

This will not work, because numbers don’t go right to left. You can’t make them do that by applying direction. That property is explicitly used to make rtl languages display correctly: numbers still go ltr in Chinese or Arabic etc (or any language, full stop). Setting rtl won’t change that (and putting that aside, the setting just changes how text displays on-screen, it doesn’t change how it exists in the HTML).

3

Thank for the answer
I thought direction would apply every text in html, but actually it doesn’t?
anyways, I also found another solution for this


:smiley:

1 Like
4

It does apply to all text, but numbers read left to right, no language on earth reads [standard Arabic] numbers right to left (if 1234 is a number it has to remain as 1234 if the reader is English or is Chinese – 4321 is a different number).

5