Hi @TheDJ, it seems Idbc2a309fbca15 broke RTL

oopsie.

I think I have some time this weekend to fix it.

@TheDJ,

This is in the CSS ?debug=1 output of the page,

.mw-mmv-next-image::after[dir='rtl'],
html[dir='rtl'] .mw-mmv-next-image::after:not( [ dir='ltr' ] ) {
  transform: scaleX(-1);
}

This part is generated by https://github.com/wikimedia/mediawiki/blob/30c622c09149eda2e37b5c9c76de492bafda09f4/resources/lib/codex/mixins/css-icon.less#L187-L192 but the problem is that ::after on the second line should come after :not, not before it.

So I imagine one of the following solutions,

• To not use ::after for icons themselves and partially revert the mentioned change (more plausible solution I guess)
• Add a dir attribute to the next and previous icons (and stripe and dialog icons also apparently) so the first line of the CSS can match them at least
• Apply the following that only fixes it for the next and previous icons,

diff --git a/resources/mmv/ui/mmv.ui.canvasButtons.less b/resources/mmv/ui/mmv.ui.canvasButtons.less
index 83cb057d..a318ccfb 100644
--- a/resources/mmv/ui/mmv.ui.canvasButtons.less
+++ b/resources/mmv/ui/mmv.ui.canvasButtons.less
@@ -69,6 +69,9 @@
 
        &&::after {
                mask-size: @buttons-icon-size-large;
+               html[ dir='rtl' ] & {
+                       transform: scaleX( -1 );
+               }
        }
 }

(also that double & is extra it seems)

• Somehow teach the LESS engine to put :not before ::after

And I've fixed it temporarily for Persian Wikipedia https://fa.wikipedia.org/w/index.php?title=مدیاویکی%3ACommon.css&diff=39856756&oldid=39784393 so you can see the issue now only in the safemode https://fa.wikipedia.org/wiki/حافظیه?uselang=fa&safemode=1#/media/پرونده:HAFEZIA_TOMB_ROOF_Ariafar_Khosravi.jpg

In T369659#9968307, @Ebrahim wrote:

So I imagine one of the following solutions,

• To not use ::after for icons themselves and partially revert the mentioned change (more plausible solution I guess)
• Add a dir attribute to next and previous icons (and stripe and dialog icons also apparently) so the first line of the CSS can match them at least
• Apply the following that only fixes it for next and previous icons,

The code is not using the proper way to set codex icons. Just rewriting it to use an extra element instead of ::after, the way codex is documented to be used, is probably the best fix. I just left this in there because it wasn't causing too many problem before and there were already so many changes for the buttons, but now that it is a problem, I'll just do it the proper way.

In T369659#9968422, @TheDJ wrote:

In T369659#9968307, @Ebrahim wrote:

So I imagine one of the following solutions,

• To not use ::after for icons themselves and partially revert the mentioned change (more plausible solution I guess)
• Add a dir attribute to next and previous icons (and stripe and dialog icons also apparently) so the first line of the CSS can match them at least
• Apply the following that only fixes it for next and previous icons,

The code is not using the proper way to set codex icons. Just rewriting it to use an extra element instead of ::after, the way codex is documented to be used, is probably the best fix. I just left this in there because it wasn't causing too many problem before and there were already so many changes for the buttons, but now that it is a problem, I'll just do it the proper way.

Arabic Wikipedia and other RTL Wikipedias suffer from the same bug, so we need a general solution for RTLs.

Change #1053722 had a related patch set uploaded (by Ebrahim; author: Ebrahim):

[mediawiki/extensions/MultimediaViewer@master] Fix icons in RTL by using an element instead of ::after

https://gerrit.wikimedia.org/r/1053722

Test wiki created on Patch demo by TheDJ using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/9d2b2ebf66/w

This made me realise. Do users actually expect the left side is Next action and the right side is Previous ? Are we the exception to everything else or not ?

I seem to remember Amir telling me once that progress is often mapped from left to right in RTL languages, simply because people have become so accustomed to that because all kinds of hardware and early software was introduced in the market like that in the past.

also, the arrow key navigation is not in sync with this...

Change #1053722 merged by jenkins-bot:

[mediawiki/extensions/MultimediaViewer@master] Fix icons in RTL by using an element instead of ::after

https://gerrit.wikimedia.org/r/1053722

This made me realise. Do users actually expect the left side is Next action and the right side is Previous ? Are we the exception to everything else or not ?

That indeed is a reality but it is just some exceptions here and there and not the general rule, say video players sliders in Persian websites and desktop players are left to right (I haven't seen any exceptions even) though I preferred they to make their users accustomed not to this but understandably that was hard to do and now perhaps it's too late for a change. Or a similar situation exists in some circular indicators or circular loading indicators and some say it's just clockwise but I don't like it personally and preferred they to be mirrored just like progress bars themselves (but maybe I'm wrong). In here the current behavior is desired at least for me.

also, the arrow key navigation is not in sync with this...

It seems is working as intended https://patchdemo.wmflabs.org/wikis/9d2b2ebf66/wiki/The_Hitchhiker%27s_Guide_to_the_Galaxy?uselang=fa#/media/File:Adam_Pope_Zaphod_Beeblebrox.JPG right arrow key goes to the next media and left arrow key goes to the previous media, following what is shown on the interface also.