RTL UI has some reversed features

[yarons]

URL

No response

How to reproduce the issue?

Simply login and switch to any RTL language, you'll see that the search box has overlapping words and that the buttons on the top right are clipped on the wrong side (due to hard coded left/right style arguments).

Screenshot(s) or anything else?

Which deployed environments do you see the issue in?

Released version at openstreetmap.org/edit

What version numbers does this issue effect?

No response

Which browsers are you seeing this problem on?

Firefox

[danieldegroot2]

cc: @gravitystorm This issue should be moved to openstreetmap/openstreetmap-website.

[biswajit-k]

I think it can be resolved by adding styles for placeholder for RTL language, @gravitystorm could you please let me know if this is correct? I can work on this.

[yarons]

CSS supports such behavior:
https://stackoverflow.com/questions/22511460/css-dir-rtl-vs-style-directionrtl (The resolving answer)

I can try and tinker with the CSS in my browser and take a screenshot of it if it helps.
Thanks!

EDIT

It's not only the placeholder, look at the buttons on top (There's a small glitch and one of the lines is thicker, I'm sure it can be fixed):

[tomhughes]

It can be fixed yes, my draft fix is to replace https://github.com/openstreetmap/openstreetmap-website/blob/master/app/assets/stylesheets/common.scss#L29 with:

[dir=rtl] {
  /* no-r2 */ text-align: right;

  ::placeholder {
    /* no-r2 */ text-align: right;
  }
}

[dir=ltr] {
  /* no-r2 */ text-align: left;

  ::placeholder {
    /* no-r2 */ text-align: left;
  }
}

That works, though in my (english) browser the cursor winds up at the wrong end but I'm guessing that won't be the case if your browser is configured for an RTL language?

[biswajit-k]

For me, it still shows the placeholder text on the left, I think it is because dir => "auto" attribute is set on the input field. Also, dir set to auto always displays placeholder text on the left irrespective of the language. So, I think we should remove the dir attribute for the input fields and let the input and placeholder text be left or right-aligned based on the language selected.
I referred below-
A similar issue and an attempted fix

[yarons]

I'm not sure if we can do it but we can use CSS vars but it may solve this issue, we simply need to avoid the "auto" configuration and set the style for this field instead.
If I'm adding direction: rtl to the CSS it looks great, not sure why is doesn't inherit that from the HTML property.
Thanks :)

[gravitystorm]

We need to be very careful here that we aren't creating more problems than we are fixing. For example, there is a proposal in a comment here to remove dir="auto" from input fields, as an attempt to fix the placeholder problem, but we also have an open issue to add dir="auto" to all input fields.

I find this topic is usually more complex than it first looks, and I don't want to see us rush into trying to solve one thing while accidentally making lots of other things worse.

[yarons]

You're absolutely right, usually I'm using [dir="rtl"] to make sure it won't affect the LTR variant.

But we haven't discussed the buttons at all and these are also broken.