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.

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):

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

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

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

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

Label direction	Surrounding text direction	Interface direction	Content direction	Screenshot
LTR	RTL	LTR	LTR
LTR	RTL	RTL	LTR
RTL	LTR	LTR	RTL
RTL	LTR	RTL	RTL

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

Test pages:

• https://en.wikipedia.beta.wmflabs.org/wiki/Phonos_RTL
• https://en-rtl.wikipedia.beta.wmflabs.org/wiki/Phonos_RTL

In T320415#8647882, @dom_walden wrote:

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 think this is all good now.

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>

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:

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.

As discussed, I've moved the alignment issues to T335555, so this task can be resolved.