search

lingua-libre / BlueLL

🌻 MediaWiki skin used by LinguaLibre.org
BSD 2-Clause "Simplified" License
6 stars 4 forks source link

Fix the Record button for RTL languages #12

Closed amire80 closed 2 years ago

amire80 commented 2 years ago

Have you actually applied the change, or made an edit in the developer tools?

Poslovitch commented 2 years ago

An edit in the developer tools. We don't have means to "test" such changes in a live environment, and I'm currently unable to deploy changes to the live server as well.

amire80 commented 2 years ago

OK, so the problem with this is that MediaWiki automatically changes "left" to "right" when the UI language is one of the RTL languages. If you change it to "right", then you'll see how the change will look like. You can read more about it in https://www.mediawiki.org/wiki/ResourceLoader/Architecture#Flipping . The technology is known as "CSSJanus".

hugolpz commented 2 years ago

Hello Amire, I switch my browser to arabic display to get LTR. Via the inspector, I applied your changes left 10x center. This what I obtain by (images n⁰2 and n⁰3): System: Firefox 100.0.2 (Ubuntu 21.10).

1) Thanks for your feedback, we see we have issues on that LTR front. I wasn't aware. Good we see this issue. 2) On my system I see no change while adding your left style.

Before

Screen Shot 2022-07-10 at 19 34 48

After

Screen Shot 2022-07-10 at 19 35 22

After full page

Screenshot_20220710_194237

If I understand well your last message, the inspector may mess up my test by restoring RTL ?

amire80 commented 2 years ago

The MediaWiki software flips it. So to test it using the inspector, write "right" and not "left".

hugolpz commented 2 years ago

This is what I obtain with right 10px center.

After ar

With fix, in RTL (ar) : it does fix the UI for RTL Screen Shot 2022-07-11 at 10 09 17

After en

With fix, in LTR (en) : it adds a css bug to LTR Screen Shot 2022-07-11 at 10 11 00

Conclusion

I'm getting my first confrontation with this RTL issue, it seems we will need deeper work and fixes. The right value should be active only when RTL is active. @amire80 , are you familiar with such solution ?

amire80 commented 2 years ago

Have you tried "right" in English? If you did, then it will look incorrect.

If you are testing using the browser developer tools, you are supposed to do "left" in an LTR language, and "right" in an RTL language.

When the CSS file in the source code says "left", it stays "left" for LTR languages, and automatically changes to "right" for RTL languages.

hugolpz commented 2 years ago

Oh I see ! So the toggle is done by the browser when the left is hard coded. Nice ! Sorry for my lack of knowledge on the issue. We are learning.

In that case I'm in favor to accept the initial commit with left 10px center. @Poslovitch, understood too ? This commit seems ready to accept.

amire80 commented 2 years ago

Oh I see ! So the toggle is done by the browser when the left is hard coded.

For the sake of precision, it's not exactly the browser that is doing it. The automatic replacement of "left" to "right" is done by CSSJanus, a component of the MediaWiki software.

Nice ! Sorry for my lack of knowledge on the issue. We are learning.

No problem, that's what I'm here for :)

In that case I'm in favor to accept the initial commit with left 10px center. @Poslovitch, understood too ? This commit seems ready to accept.

Thanks :)

(There's also https://github.com/lingua-libre/RecordWizard/pull/16 ...)