TextInput rtl: true is not working

Bugs
1

Hi,

When document is rtl this code:

document.body.style.direction = "rtl";
            const input = new TextInput({
                width: 500,
                height: 100,
                rtl: true,
                "placeholder": "מס' הבית ברח' MINA שבו\nנמצא המוזיאון היהודי"
            }).loc(100, 100);

gives the right result:
image

But when the document is ltr, and the TextInput is rtl:

 document.body.style.direction = "ltr";
            const input = new TextInput({
                width: 500,
                height: 100,
                rtl: true,
                "placeholder": "מס' הבית ברח' MINA שבו\nנמצא המוזיאון היהודי"
            }).loc(100, 100);

the TextInput is also ltr:
image

I hope you can fix it.
Thank you,
Herut

2

I made the document ltr becuase I have a calculator in this document, and the label of the calculator must be ltr.
Maybe the best solution is adding rtl parameter for Label, and then I will be able to make the document rtl, and only the calculator label ltr.

3

Perhaps if we set the hidden field to rtl rather than rely on the document setting that this will fix the issue. We have made a version of ZIM that does this. Could you please test it and see if it works. If not, you could check out what we have done and see if you can make changes that help.

https://zimjs.com/cdn/016/zim_doc_rtl.js

On line 30540 we added this:

this.hiddenInput.style.direction = rtl?"rtl":"ltr";

To use this script, do not use import but rather the script tags:

<script src="https://zimjs.org/cdn/1.4.1/createjs.js"></script>
<script src="https://zimjs.org/cdn/016/zim_doc_rtl.js"></script>
4

This line doesn't help:
this.hiddenInput.style.direction = rtl ? "rtl" : "ltr";

This code is working:

document.body.style.direction = "ltr";
this.hiddenInput = document.createElement("INPUT");
this.hiddenInput.setAttribute("id", zim.makeID());
this.hiddenInput.setAttribute("dir", "rtl");
this.hiddenInput.value = "מס' הבית ברח' MINA שבו נמצא המוזיאון היהודי";
document.body.appendChild(this.hiddenInput);

We tried to add this line:
this.hiddenInput.setAttribute("dir", "rtl");
to the ZIM_doc_rtl file, but it does't help.

5

Thanks for helping out.

I don't see the difference between what you say works and the last thing that you said did not work.

So I have added the

this.hiddenInput.setAttribute("dir", rtl?"rtl":"ltr");

to the ZIM_doc_rtl.js file on line 30541.

What would we have to do to the file to make it work?

The one thing that we did not do was hard code your value in the ZIM code. Yet we are getting our value from what is typed on input - see the onInput 30560. So do not know why there would be a difference.

6

I tried both value and onInput, but it doesn't work.
I don't know why.
Thank you for trying to help!

7

You had said:

image
image800×221 6.77 KB

that this works. How did you apply this code? Did you put it in the ZIM_doc_rtl file? And it worked for you?

1 Like
8

No, I didn't put this code in the ZIM_doc_rtl file.
I put this code in my index.html file, and the input html element is working for me.

1 Like