design issues in RTL layout

[ShlomoCode]

After I translated iina into Hebrew (with the kind and patient help of @uiryuu at #4742), I note here some display problems that appear only in the Hebrew language which is an RTL (right to left) layout and not in English which is LRT:

• The main video controls (play/pouse) should be on the left ("end of content"), and the others on the right ("start of content") Mistake. see below

• When "Show time and battery information in full screen" is enabled in UI settings, the battery icon is displayed garbled:
  

• When there is a scroll bar in the settings, in the RTL layout it should be on the right side of the scrollable content (where I added a yellow line in the picture) and not on the left:
  
  this only happens when the system language is LTR, and a RTL language is set for the application in the system settings. when the system language is RTL it is normal, because the buttons are located on the right side.
  but this such a mix is quite a common case.

• The buttons that open a color picker look a little damaged in shape:
  

• When adding an audio filter, the original sentence is 2 words "default (ffmage)", in Hebrew the only translation is 3 words, but it should not be cut like in the picture but the column will expand as needed to contain all the words:
  

• In "Audio delay" in audio panel the number box is too big, and in Hebrew "שנ'" (sec) is cut off
  Even if I only translate to the first letter (ש), it is partially cut off
  

[uiryuu]

The main video controls (play/pouse) should be on the left ("end of content"), and the others on the right ("start of content"):

@ShlomoCode I'm kinda confused by this. I want to ask some simple questions about some of the control layout/behaviors in the RTL languages.

1. "Play next media" should be a left arrow or a right arrow?
2. The "Play" button should be a left arrow or a right arrow?
3. As for the playback slider (progress bar), when the media is normally played, are you expecting the slider is moving from left to right or right to left?
4. For the volume control, do you expect the left represents higher volume or right represents the higher volume.
5. Why do you think the play back control buttons should be on the left in RTL language?
6. For the sidebar (quicksettings & playlist), do you want them to popup from left instead of from right?

If you can provide answers of these questions, it can help the devs to make better choice to optimize the UI for RTL languages.

[ShlomoCode]

@uiryuu

1. "Play next media" should be a left arrow or a right arrow?

left

2. The "Play" button should be a left arrow or a right arrow?

left

3. As for the playback slider (progress bar), when the media is normally played, are you expecting the slider is moving from left to right or right to left?

From right to left

4. For the volume control, do you expect the left represents higher volume or right represents the higher volume.

Left - higher
Right - lower

5. Why do you think the play back control buttons should be on the left in RTL language?

It was confusion... :|
they should stay on the right side

6. For the sidebar (quicksettings & playlist), do you want them to popup from left instead of from right?

Yes (actually this is the case now thanks to the automatic RTL)

---

The guiding principle is that while in LTR everything flows from left to right, in RTL everything flows from right to left.
This means that in English the start of the window is at the left end and everything flows from there, and in Hebrew the "start" of the window is the right end, and from there everything flows.
Just like when you set the MacOS system language to Hebrew, the apple icon moves to the right corner, and the clock to the left corner.

I see I'm a little unclear, so I edited a screenshot of iina with highlights of the desired changes:
before (now):

After (the changes are marked with yellow text):

[ShlomoCode]

@uiryuu How can we move forward?
I invested many hours in the translation 😶

[uiryuu]

Sorry, I was really busy these days. You work is well appreciated, and we will merge the translation PR and deal with layout related issue at appropriate time.

[low-batt]

From the Apple documentation for NSWindow.windowTitlebarLayoutDirection:

The layout direction of the window title bar includes the standard window buttons (close, minimize, maximize) and the title for the window. In general, this returns NSUserInterfaceLayoutDirection.rightToLeft if the primary system language is right to left. The layout direction may be right to left even in applications that don’t have a right to left language localization.

I'm not happy when documentation contains the words "may be" without an explanation. It sounds like macOS positions the buttons based on the system configured language and not the application configured language. To me that is a macOS defect. How can you provide the ability to set a language on an application basis and only change half of the application behavior?

As windowTitlebarLayoutDirection is a get only property I'm thinking it is not possible for an application to control where the window buttons appear.

I'm a junior IINA developer. Maybe one of the other IINA developers knows a way for an application to change this.

[ShlomoCode]

In fact the really big problem is the inversion when dragging:

CleanShot.2024-04-12.at.06.03.14.mp4

[low-batt]

The slider problem reproduced for me. I agree this is a critical problem. Investigating…

[low-batt]

Both Quicktime and Safari do not reverse the playback position slider when the language is Hebrew. That is the behavior you are expecting from IINA, yes? If that is the correct behavior the IINA problem is trivial to fix.

Quicktime does reverse the volume slider along with the speaker icon. IINA is failing to reverse that icon. That is another problem that needs to be corrected.

Quicktime also does not change the position of the volume slider or the buttons whereas IINA swaps the positions of the volume slider and buttons. What do you view as the correct behavior?

[ShlomoCode]

Both Quicktime and Safari do not reverse the playback position slider when the language is Hebrew. That is the behavior you are expecting from IINA, yes? If that is the correct behavior the IINA problem is trivial to fix.

It is true that usually video players (including Quicktime) do not invert the playback slider, so such behavior (not inverting, like Quicktime) would be accepted.

But if Quicktime was built for/by a Hebrew speaking person (RTL), he would absolutely build the software with a slider that moves from right to left.
So if IINA wants to be completely adapted to RTL habits, you should do everything from right to left, as I demonstrated above. (but it's an additional effort that I will accept with understanding if you don't want to invest)

[low-batt]

I already looked a little bit into implementing a reversed playback position slider. I believe I can change IINA to properly reverse the control. I'm expecting the mini player and Touch Bar will also need to be updated.

I will be entering a separate issue for this aspect of the RTL problems for tracking purposes. Stay tuned.

[low-batt]

I've entered issue #4878 specifically for the OSC related RTL problems.

[ShlomoCode]

See #4884 for the OSD related RTL issues.

[low-batt]

I'm working on these problems now.

[low-batt]

On this:

In "Audio delay" in audio panel the number box is too big, and in Hebrew "שנ'" (sec) is cut off
Even if I only translate to the first letter (ש), it is partially cut off

I'm pretty sure in Hebrew that label should be s. It is not a letter or an abbreviation, it is an International System of Units (SI) symbol. From the US Metric Association FAQ:

SI unit symbols are the same in all languages, as you can see on this nutrition label from Japanese snack cakes.

This label should not be presented to translators. I did not find an official Apple way to do that. I found people putting a special string in the Localizer hint and editing entries with that hint out of the exported localizations.

Will need to ask @uiryuu if IINA has some sort of convention for this.

At least that is my take on this particular problem.

[ShlomoCode]

SI unit symbols are the same in all languages, as you can see on this nutrition label from Japanese snack cakes.

I don't know what is happening in Japan... in Israel it is mandatory to mark components in Hebrew, and it is customary to translate the units as well. For example mg/ml are always translated into מ"ג and מ"ל, and even gram is sometimes translated into an abbreviated spelling גר' (if it is a force it is usually customary to write "gram" in the full form - גרם)
Anyway, you will never see the English-only unit.
That's why it is necessary to translate here also to ש or שנ' or שניה but certainly not to leave only the English measure which is something that is not accepted here.
Attached are some sample product photos:

[low-batt]

Understood. I will plan on looking into that overlapping. Currently struggling with the battery and color well problems.

[ShlomoCode]

@low-batt The effort you put in is greatly appreciated! Thanks

[low-batt]

@ShlomoCode It is all thanks to you that this localization support is being added. It was your PR #4864 that caught my attention and motivated me to help out. I really appreciate your reviews of my proposed changes and the nice way you report my dumb mistakes.

On this one:

When there is a scroll bar in the settings, in the RTL layout it should be on the right side of the scrollable content (where I added a yellow line in the picture) and not on the left

In the LTR layout the scroll bar is on the right edge of the window. Reversing that would put the scroll bar on the left edge of the window. I'm confused. Why should it be moved to the middle of the window?

I'm currently looking to see if a developer has the time to review and merge PR #4893 and then update Crowdin. That PR adds 3 new strings to be translated. Once Crowdin has been updated I'll be asking you to provide translations for the new strings. Once that is done then I will ask to have the latest translations pulled from Crowdin and merged into develop. Next up after that will be reviews and merging of the accumulated PRs. Once that is done it will be easier to spot anything that was missed.

[ShlomoCode]

On this one:

When there is a scroll bar in the settings, in the RTL layout it should be on the right side of the scrollable content (where I added a yellow line in the picture) and not on the left

In the LTR layout the scroll bar is on the right edge of the window. Reversing that would put the scroll bar on the left edge of the window. I'm confused. Why should it be moved to the middle of the window?

This is actually a form of bypassing what you referred to in #4776 (comment)
The Google Chrome browser does this (scroll bar on the right). But I notice that apple apps (Safari for example) don't do that.

System language: English & application language: Hebrew

System language: Hebrew & Application language: Hebrew

[ShlomoCode]

Now I noticed - the progress indicator in "playback history" (cmd + shift + h) is from right to left, when according to what was said in #4878 it should be from left to right

[ShlomoCode]

Another issue is the overlapping of the words "default" in the video tab of the quick settings
In Hebrew it cannot be translated into one word, and the 2 words are cut off, while the input is unnecessarily width.

[low-batt]

I will need to take closer look at the window buttons issue. I was already confused as to why the buttons are in the correct place when run under Xcode. That it is working for Safari suggests it is something IINA is doing wrong.

I was expecting we'd be finding additional problems for a while. These all look like problems that need to be corrected. I will keep investigating and proposing fixes.

[ShlomoCode]

That it is working for Safari suggests it is something IINA is doing wrong.

Even in Safari, the buttons are on the left side if the Hebrew language is not set for the entire system. there is simply a "header" area, so there is no overlap.

[low-batt]

Thanks for explaining the window buttons problem. I was confused about the situation with Safari.

I am continuing to work on fixes.

[ShlomoCode]

I found a layout problem in the equalizer slider in Quick Settings > Audio tab. The label of one of the sliders is out of place:

In English it is normal:

[low-batt]

I created issue #4923 for the equalizer problem.

[low-batt]

The translations on Crowdin are no longer at 100%. We have started merging and there is some new text that needs translating. Not sure how much new text will be added for this next release. The one after it is a feature release and definitely will be adding new text.

Have a look at my review of PR #4922.

[ShlomoCode]

I have translated the 4 new strings (in fact Hebrew is the only language that is at 100% now lol), and I will try to continue translating in the future when necessary
In any case, I don't think that the lack of a few single strings is a consideration for language activation

[low-batt]

Excellent. Yes, does not have to be at 100% for activation. Just thought you would like to be the only language at 100%. 😄