iina/iina

RTL language causes OSC to malfunction

Opened this issue · 19 comments

System and IINA version:

  • macOS 13.6.3
  • IINA 1.3.4 + PR #4922

Expected behavior:
The on screen controller works properly with right to left languages such as Arabic and Hebrew.

Actual behavior:
Currently IINA does not support any right to left languages. However PR #4922 enables Hebrew. If you build IINA with that pull request and set Hebrew as the language then the slider in the OSC malfunctions. When you click on the slider the knob does not move to where the cursor is. The A-B Loop knobs can not be dragged. If you hover over the slider the thumbnail preview shown is not for the correct position in the video. Some images on the OSC point in the wrong direction.

These problems were reported by @ShlomoCode in issue #4776. As that issue reports quite a few RTL related problems I have created this issue that focuses on the OSC problem due to the malfunctioning behavior of the slider.

Steps to reproduce:

  • Open the IINA project in Xcode
  • Under the Product menu open the Scheme menu and select Edit Scheme…
  • Click on the Options tab
  • Scroll down to the App Language setting
  • In the pull down select Right-to-Left Pseudolanguage near the end of the list
  • Start IINA running under Xcode
  • Start playing a video
  • Click on various places in the OSC slider
  • Notice the knob moves the the wrong place

Or you can build with PR #4922 and set your language to Hebrew.

  • MPV does not have this problem.

mpv does not support localization.

How often does this happen?
Every time.

I will be posting a PR soon that corrects the problems.

@ShlomoCode Do you spot anything wrong in this screenshot?:

he-osc

I did some more testing and found dragging the floating OSC around is broken. I will add a fix for that once I figure out the proper fix.

@low-batt It looks fine! 👏
If you want me to pull and check the PR locally please let me know

I suggest waiting for me to fix the problem with moving the OSC in floating mode. I may be able to get that done tomorrow.

My understanding is that the IINA project's position is that localization is a priority and must be done right. So please do point out anything you notice that is not correct even if it is minor.

I am expecting this will be an iterative process. First priority is to fix anything that is actually malfunctioning due to RTL.

@ShlomoCode I normally don't work on localization, so I'm still reading and learning, especially about RTL. This morning I'm thinking the orientation of media controls shown by the Quicktime Player and Safari we discussed in issue 4776 was not an oversight and was very deliberate.

From the Apple Internationalization and Localization Guide:

Types of controls and content that should not flip in a right-to-left language are:

  • Video controls and timeline indicators
  • Images, unless they communicate a sense of direction, such as arrows
  • Clocks
  • Music notes and sheet music
  • Graphs (x– and y–axes always appear in the same orientation)

Other articles about RTL agree.

From the Mozilla post Building RTL-Aware Web Apps & Websites: Part 1:

Hardware legacy UI is a thing: In MENA (Middle East and North Africa) and other regions where RTL languages are spoken, people use gadgets too. Audio hardware has the same control layout as anywhere else in the world. So buttons like Play, Fast Forward, Next, Previous have always been the same. And because of that, it’s not a good idea to mirror any of those buttons. Please don’t RTL the media player buttons.

From the Medium post Fundamentals of Right to Left UI Design for Middle Eastern Languages

- Media Controls — Media controls like playback buttons and media progress indicators always run LTR. This is because media controls are reflecting the way a cassette players rolls the tape in a cassette. So elements containing a play/pause/stop button will never flip.

From the Media Player Icons section of RTL Styling 101:

Some icons are universal, and it doesn't require us to flip them. The reason is that because those playback buttons represent the direction of the tape being played, not the direction of the time.

It goes on to show how the Spotify app looks identical in English and Arabic pointing out the playback icons are not flipped since they are universal icons.

From the OneSky post Right-to-Left (RTL) Localization: What You Need To Know:

For instance, you should flip elements that indicate a progression (e.g., A→B should become B←A). Also, mirror page selectors, sliders, and chat icons. Meanwhile, media controls (e.g., play buttons and progress bar) and circular progress bars (i.e., clockwise direction) should not be mirrored.

From WOMEN IN LOCALIZATION Three Considerations for RTL Languages Localization:

When not to mirror
Media controls

You may assume that media control elements should also be flipped, but they should not. Playback buttons, progress bars – all these elements retain the left-to-right direction because they refer to the progress of tape, not time.

I'm thinking my proposed changes are incorrect and I need to make IINA match up with Quicktime and Safari and not reverse the media controls.

@low-batt Interesting, I never thought about the hardware emulation thing in software.
I personally still think a mirror will be more intuitive for RTL people, but you should probably follow the guidelines of apple, mozilla and google, and not mirror the slider.
Sorry about that!

No problem. Investigating and rethinking is a normal part of development. I looked into this as I was worried about defending not matching up with Quicktime's behavior to the other developers. I will redo the PR to follow Apple's guidelines.

In the meantime I had been looking into the problems with dragging the floating OSC and I now have a fix for that. I also found that resizing the playlist panel was broken as well and I have a fix for that too.

Tuesday is busy for me, so I won't be posting an update today. I should be able to post a revised PR soon.

I've updated PR #4879. These features should be working with RTL:

  • Floating OSC, including dragging
  • Bottom and top OSC
  • Music mode OSC
  • Touch Bar controls
  • Playlist, including adjusting the size of the panel

Try it out if you have time. A critical review is always welcomed.

Of course there are still other RTL problems to solve.

I had to update the PR today as I lost a fix when cleaning up the XIB files.

Quicktime English:
Quicktime-English

Quicktime Hebrew:
Quicktime-Hebrew

IINA English:
IINA-English

IINA RTL:
IINA-RTL

One difference is that the order of the customizable buttons reverses in the IINA OSC.

I did not reverse the full screen button icon. Should that one be flipped?

I did not reverse the full screen button icon. Should that one be flipped?

With Apple itself it is not mirrored in RTL, but it is always the other way around:
CleanShot 2024-04-19 at 01 02 23@2x
cbc9640c551e7e8d12556206a56b22a1

One difference is that the order of the customizable buttons reverses in the IINA OSC.

Why is this so? On purpose or by mistake?

  • The OSD (on screen display) has a playback progress slider while changing the position, and it should be like the slider in the OSC (from left to right, like a tape).
  • The numbers in the OSD are also not in the right direction, meaning it should be
    {current_time} / {remaining_time} (as in the OSC indicator)
    and not {remaining_time} / {current_time}
  • In addition, the OSD should be on the left side of the window and not on the right side
CleanShot.2024-04-19.at.01.46.36.mp4

(If you want you can turn this comment into a new issue for OSD issues)

Quicktime Hebrew: Quicktime-Hebrew

IINA RTL: IINA-RTL

Note that the next/previous arrow buttons are messed up. It should be like in Quicktime Hebrew, arrows pointing outwards and not towards each other.
its also in my mackbbok's keyboard:
unnamed

On the full screen button icon I think we stick with not flipping it. I had searched around and did not find a consistent standard. I will defer to the senior developers as to whether the IINA icon should be changed to be more like the Apple button.

Let's treat the OSD as a separate issue.

I can't believe I missed the reversed buttons. That must be fixed. I will revise the PR tomorrow. I suspect I broke that when trying to clean up all the extraneous changes Xcode added to the XIB.

@low-batt I opened a new issue for OSD, if you could take a look #4884

Why actualy the order of the customizable buttons reverses in the IINA OSC?

Thanks for opening the OSD issue. I will tackle that once we are satisfied with the PR for this issue.

My thinking on the list of customizable buttons is that they do not fall under the "video controls and timeline indicators" exception. So they should flip, just like the audio controls. The counter argument is that Apple did not reorder the two Quicktime buttons. So I am a little uncertain.

One inconsistency on Apple's part. Quicktime flips the pip icon, so I made IINA's icon also flip. But in the pip window the pip icon to exit is not flipped. Seems incorrect to me. Makes me unsure as to how close we should follow Apple's example.

What are your thoughts?

I've updated PR #4879 with fixes for speed buttons. I did not change the behavior of the customizable buttons. I'm waiting to hear your thoughts. I'm still unsure on what the correct behavior should be, but still thinking they should flip like the audio controls as the these buttons are not video controls.

I did not change the behavior of the customizable buttons. I'm waiting to hear your thoughts. I'm still unsure on what the correct behavior should be, but still thinking they should flip like the audio controls as the these buttons are not video controls.

But a true inversion should be of the entire layout (ie the group of customizable buttons will be on the left side of the window), not just the order within the group.

True. I did not do that because Apple didn't do that with the audio controls. They left them on the left side of their OSC and reordered within the audio group. And yes I am confused by this.