Page MenuHomePhabricator

Phonos icon on the wrong side in RTL on MonoBook
Closed, ResolvedPublic3 Estimated Story PointsBUG REPORT

Description

What is the problem?

Compare how the Phonos icon looks on Vector in RTL vs. MonoBook in RTL:

SkinLTRRTL
Vector
vector_ltr.png (74Γ—155 px, 2 KB)
vector_rtl.png (79Γ—156 px, 2 KB)
MonoBook
monobook_ltr.png (74Γ—170 px, 2 KB)
monobook_rtl.png (71Γ—167 px, 2 KB)
Steps to reproduce problem
  1. View an article with a Phonos element in the MonoBook skin and an RTL language (e.g. https://patchdemo.wmflabs.org/wikis/34377c5aff/wiki/Main_Page?uselang=he&useskin=monobook)

Expected behavior: The speaker icon should be on the right of the IPA transcription
Observed behavior: It is on the left

Environment

Wiki: Local docker Phonos 0.1.0 (44b1ff7) 08:20, 10 October 2022.

Acceptance Criteria
  • This should look identical across all current skins (vector, new-vector, minerva-neu, monobook, timeless), ideally across all.

Event Timeline

Restricted Application added a subscriber: Aklapper. Β· View Herald Transcript

I'm not quite sure what the desired layout is for this. It looks like there's some inconsistent handling of text direction, certainly, but which way around is it? Phonos buttons and icons are part of the content, and so take the directionality of the content. That'd suggest that the icon should not change sides based on the interface language. If that's the case, then MonoBook might be displaying it correctly. On the other hand, we might want to consider the Phonos button to be an interface element, and so it should flip with the interface.

In the example link the page is LTR and the interface is RTL, and the button displays LTR (with some errors in margins and padding).

Let's have the direction of the button follow the content language (and not the interface language), i.e. uselang will have no effect on which side the icon appears.

Change 880419 had a related patch set uploaded (by Samwilson; author: Samwilson):

[mediawiki/extensions/Phonos@master] Improve icon size and position, and baseline of label

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

Change 880419 merged by jenkins-bot:

[mediawiki/extensions/Phonos@master] Improve icon size and position, and baseline of label

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

Doesn't look great on Firefox RTL.

Screenshot 2023-02-26.png (65Γ—336 px, 3 KB)

Experimenting with this, the position and direction of the speaker icon appears to depend on a few different factors, including the direction of the interface language, content language and the text surrounding the Phonos button.

The direction the icon points in depends on the user's interface language.

The side the icon appears on depends on the page's content language, unless both the label of the Phonos element and the surrounding text are in a direction contrary to the content language.

I believe the vertical divider seen in T320415#8646783 is shown when the direction of the label of the Phonos element is contrary to the direction of both the surrounding text and content language.

Testing on Firefox 102, Vector 2022 (Vector 2010, Minerva and Timeless behave the same):

Testing on an LTR content language with an LTR interface language (https://en.wikipedia.beta.wmflabs.org/wiki/Phonos_RTL):

LTR_LTR.png (192Γ—170 px, 8 KB)

Testing on an LTR content language with an RTL interface language (https://en.wikipedia.beta.wmflabs.org/wiki/Phonos_RTL?uselang=ar):

LTR_RTL.png (193Γ—179 px, 8 KB)

Testing on an RTL content language with an LTR interface language (https://en-rtl.wikipedia.beta.wmflabs.org/wiki/Phonos_RTL?uselang=en):

RTL_LTR.png (189Γ—178 px, 8 KB)

Testing on an RTL content language with an RTL interface language (https://en-rtl.wikipedia.beta.wmflabs.org/wiki/Phonos_RTL):

RTL_RTL.png (193Γ—163 px, 8 KB)

MonoBook behaves almost the same with the exceptions below and it does not show the vertical divider shown in T320415#8646783.

Label directionSurrounding text directionInterface directionContent directionScreenshot
LTRRTLLTRLTR
monobook_LTR_LTR_LTR_RTL.png (29Γ—139 px, 1021 B)
LTRRTLRTLLTR
monobook_LTR_RTL_LTR_RTL.png (28Γ—148 px, 1 KB)
RTLLTRLTRRTL
monobook_RTL_LTR_RTL_LTR.png (26Γ—131 px, 794 B)
RTLLTRRTLRTL
monobook_RTL_RTL_RTL_LTR.png (25Γ—124 px, 869 B)

I have not tested other browsers yet, or Phonos buttons without a label.

Test pages:

I have not tested other browsers yet, or Phonos buttons without a label.

The vertical dividers do not appear on Chromium 110 or Safari 16.

Change 897786 had a related patch set uploaded (by Samwilson; author: Samwilson):

[mediawiki/extensions/Phonos@master] Fix inline display of label next to inline-block icon

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

It looks like there's slightly variable handling of directionality when an inline block is next to an inline element (like the label and icon are, within the anchor). One fix is to make them both inline-block.

An example of wikitext that reproduces this issue is:

foo <span dir="rtl"><phonos lang="en-in" text="ipsum" ipa="-">lorem</phonos></span> bar

Change 897786 merged by jenkins-bot:

[mediawiki/extensions/Phonos@master] Fix inline display of label next to inline-block icon

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

I spoke too soon. There's an issue when Phonos isn't the only thing in the parent element. For example, the last of following four has the icon displayed on a different side:

<span dir="rtl"><phonos lang="en-in" text="ipsum" ipa="-">lorem</phonos></span>

<span dir="rtl"><phonos lang="en-in" text="ipsum" ipa="-">lorem</phonos> y</span>

<span dir="rtl">x <phonos lang="en-in" text="ipsum" ipa="-">lorem</phonos></span>

<span dir="rtl">x <phonos lang="en-in" text="ipsum" ipa="-">lorem</phonos> y</span>

Screenshot 2023-03-22 at 14-53-41 Phonos2 - Dev wiki1.png (131Γ—115 px, 4 KB)

Here's a minimal example of this in action: https://codepen.io/freosam/pen/XWPxyvy

We can fix this by changing the outter element (the OOUI <span>) to be display:inline-block.

Change 903850 had a related patch set uploaded (by Samwilson; author: Samwilson):

[mediawiki/extensions/Phonos@master] Revert PhonosButton to display:inline-block instead of inline

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

I still don't really understand the bug, but the above is a patch to fix it. :-)

Change 903850 merged by jenkins-bot:

[mediawiki/extensions/Phonos@master] Revert PhonosButton to display:inline-block instead of inline

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

@Samwilson Just a couple of observations. I don't know if they are related to this work. I might just raise them as separate bugs.

The vertical alignment of the speaker icon is a bit inconsistent on Vector 2022, Vector 2010 and Monobook. See below for this article on Vector 2022 on Firefox 102:

inconsistent_speaker_alignment.png (480Γ—179 px, 16 KB)

I also find for Timeless on Chrome the position and size of the speaker icon can change when you play the audio. See below examples taken on Chromium 111 Debian Buster:


(https://en.wikipedia.beta.wmflabs.org/wiki/Phonos?useskin=timeless#Article_fragment)


(https://en.wikipedia.beta.wmflabs.org/wiki/Phonos_RTL?useskin=timeless)

I can reproduce these problems on Chrome 112 on Windows 11 and Mac Ventura. I can reproduce them to a lesser extent on Safari as well.