Monobook pads from the icon:

Whereas Vector pads from the text?

I am also finding that the last phonos element on a line has margin-right: 0. There appears to be a .oo-ui-buttonWidget:last-child CSS rule determining this.

See examples on https://en.wikipedia.beta.wmflabs.org/wiki/Phonos_Whitespace.

I don't think there should be any padding around. The primary place where it'll be used is article lead, where there tends to be clutter already. If it came with so much space as the current version, and not like Template:Audio, an outcry (and perhaps an attempt to override the styles) would ensue.

Change 870745 had a related patch set uploaded (by HMonroy; author: HMonroy):

[mediawiki/extensions/Phonos@master] Review whitespaces around the Phonos element

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

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

Still seems like there's a discrepancy between Monobook and Vector:

• Monobook

• Vector

Slightly less noticeable (and maybe less of an issue?), Minerva (and/or MobileFrontend) seems to drop the vertical alignment?

{F35886802}

• Minerva

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

Thank you @TheresNoTime Submitted a new patch, please try again :)

Change 870745 merged by jenkins-bot:

[mediawiki/extensions/Phonos@master] Review whitespaces around the Phonos element

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

@HMonroy Do we need to sort out the padding when Phonos does not have a label?

This is how Phonos looks in a table (e.g. see https://en.wikipedia.beta.wmflabs.org/wiki/Phonos_Combinations_Regular). See the label/IPA overlaps the table's border.

I also notice the height of the Phonos element is a little inconsistent with and without a label and on the last line, e.g. examples here https://en.wikipedia.beta.wmflabs.org/wiki/Phonos_Wikibase_Performance.

Above screenshots are both on Vector. I did not test other skins.

Change 875194 had a related patch set uploaded (by HMonroy; author: HMonroy):

[mediawiki/extensions/Phonos@master] Clean up white spaces around Phonos

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

Test wiki created on Patch demo by HMonroy (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/2d7cb0c778/w

Thank you @dom_walden! I submitted another patch for review to address the white spacing issues:

In T320421#8488257, @dom_walden wrote:

@HMonroy Do we need to sort out the padding when Phonos does not have a label?

This is how Phonos looks in a table (e.g. see https://en.wikipedia.beta.wmflabs.org/wiki/Phonos_Combinations_Regular). See the label/IPA overlaps the table's border.

I also notice the height of the Phonos element is a little inconsistent with and without a label and on the last line, e.g. examples here https://en.wikipedia.beta.wmflabs.org/wiki/Phonos_Wikibase_Performance.

Above screenshots are both on Vector. I did not test other skins.

I noticed that in monobook, the spacing between the icon in label is a bit wide. I think I need to fix that in the monobook skin code. I'll check with the team about that, and I'll probably open up a new ticket for that. Please let me know if you notice any other issues. Thanks again!

Your patch looks good! The only thing that I'm not sure about is the uneven padding above and below the text (maybe the min-height should be 22 instead of 24px; but I know there's some complicated interaction there with font size…).

I do sort of wonder if we're making the CSS more complicated than it needs to be though — after all, we're basically trying to create a series of inline elements that appear inline and which should all share a baseline. With the exception of the image, that should be a pretty straight-forward thing in HTML! But because we're starting from the point of a OOUI button, it's pretty messy. Should we instead be going back to first principles and only adding the styles we need to make it look how we want? That would have the drawback of not applying the extra spacing that we originally wanted, but it does seem that we've progressively done away with that, and it's all a bit less like a button than it was then. (Personally, I think not having the spacing is probably fine, given that it's not really any different from a link and those are always considered big enough to click — which I think is the point of having a larger area around it all.)

The basic structure of what we're trying to style is this:

<span><a><span class="oo-ui-iconElement-icon"></span><span class="oo-ui-labelElement-label">Label</span><span class="oo-ui-indicatorElement-noIndicator"></span></a></span>

Test wiki on Patch demo by HMonroy (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/c6c956dae9/w/

Test wiki created on Patch demo by HMonroy (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/75ae1ea76e/w

@Samwilson Thank you for testing this out. I submitted a new patch where the min-height is 22px rather than 24px. I didn't notice any anomalies with the font size (crossing fingers). I also added some CSS for monobook.

Going back to basics makes sense. Thank you for sharing that perspective. Since we want to deploy this next week, we can do it in a new patch so that have enough time to fully test a new structure.

Going back to basics makes sense. Thank you for sharing that perspective. Since we want to deploy this next week, we can do it in a new patch so that have enough time to fully test a new structure.

Yes absolutely! Sorry, I was mostly thinking aloud. :-)

I think the vertical alignment of the phonos speaker icon is slightly inconsistent on Minerva (and Timeless to a lesser extent).

But, we can probably just raise this as a separate bug.

Vector 2010, Vector 2022 and MonoBook are good (at 16px font as per T320820).

For example, https://patchdemo.wmflabs.org/wikis/75ae1ea76e/wiki/Phonos_Foobar2?useskin=minerva

Test wiki created on Patch demo by HMonroy (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/12ab3837ff/w

@dom_walden keen eye for details!! I just updated patch with changes to Minerva and Timeless. Above is the patch demo.

Change 875194 merged by jenkins-bot:

[mediawiki/extensions/Phonos@master] Clean up white spaces around Phonos

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

I have a couple of design/UI questions, @JFernandez-WMF @HMonroy?

Do we want the label of the Phonos element to align with other text? The below affects all skins and browsers:

I think having the Phonos element in a paragraph affects the line-height/spacing between lines. I don't know if you can tell by comparing the screenshots below. It is a fairly small effect. This affects all skins (to a greater or lesser extent). I am not sure what the expected behaviour is.

(Screenshots are from pages https://en.wikipedia.beta.wmflabs.org/wiki/Phonos_Natural and https://en.wikipedia.beta.wmflabs.org/wiki/Phonos_Natural2 respectively, taken on Firefox 102 Vector 2022.)

I am happy to raise these as separate bugs because they probably existed before this change.

Created some examples to show whitespace on different skins:

Skin	LTR IPA	LTR File	RTL IPA	RTL File
Vector 2022
Vector 2010
Minerva
MonoBook
Timeless

All screenshots taken on Chromium 108.

Articles:

• https://en.wikipedia.beta.wmflabs.org/wiki/Phonos_Natural
• https://en.wikipedia.beta.wmflabs.org/wiki/Phonos_Natural3
• https://en-rtl.wikipedia.beta.wmflabs.org/wiki/Phonos_Arabic_Natural
• https://en-rtl.wikipedia.beta.wmflabs.org/wiki/Phonos_Arabic_Natural1

I did some cross-browser and skin testing, focusing on RTL. I imported some articles from arwiki which use IPA on to https://en-rtl.wikipedia.beta.wmflabs.org and replaced the IPA with Phonos tags, to test some (hopefully) realistic usage examples (for example https://en-rtl.wikipedia.beta.wmflabs.org/wiki/%D9%84%D8%A7%D9%88%D8%B3).

Browsers and skins tested:

• Firefox: Vector 2022
• Chromium: Vector 2022, 2010, Minerva
• Safari: Vector 2022, Minerva

I will raise the bugs in T320421#8512270 separately.

Thanks again for your great QA documentation Dom!

Test wiki on Patch demo by HMonroy (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/e92b567961/w/

Test wiki on Patch demo by HMonroy (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/75ae1ea76e/w/

Test wiki on Patch demo by HMonroy (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/12ab3837ff/w/

Test wiki on Patch demo by HMonroy (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/2d7cb0c778/w/