Page MenuHomePhabricator

mw-ui-button in wikitext causes text to be vertically misaligned
Open, LowPublic

Description

[[Link | <span class="mw-ui-button">Hello</span> ]]

Take a look at the button text in this picture:

buttons.png (243×1 px, 12 KB)

You can see that the text is not vertically centered; it's closer to the top border.

The cause of the problem is most likely the line-height, which is in this case equal to 1.28571429em. If we set the line-height to 1.5em (class: .mw-ui-button), the text will be displayed correctly:

ispravno.png (240×1 px, 11 KB)

Event Timeline

Similar to T235850. I'm not sure which project tag is correct, so I set Design. Correct me if I'm wrong.

Per discussion with @Acamicamacaraca, this happens everywhere: and in new and in old Vector.

Actually this regression is caused by one of the patches in T268241: Style language button and menu. Caused quite a few of issues on gadgets and pages over at ruWP.

Where are the affected buttons located? Please provide some URLs.

Where are the affected buttons located? Please provide some URLs.

Russian Wikipedia’s main page is using them and we had to add a style to remove min-height. Out of the more prominent places, ULS compact links button is affected.

Please provide links and follow https://www.mediawiki.org/wiki/How_to_report_a_bug (steps to reproduce) when reporting issues. Thanks.

Alright then.
Link: https://ru.wikipedia.org/wiki/Заглавная_страница
Where to look for misaligned buttons: the page header, prominent button ‘Создать статью’ (Create an article) and others
(present in every browser)

Previously this was also present in the footer of each page block, but we fixed it with CSS. The problem with the whole initial change is that the natural button height on a page is 30px, so 2px from min-height declaration get added to the bottom of the button. @Volker_E, is that description clear enough?

Yes, thanks @stjn. The bug filed is truly a regression and I was trying to pull out a bigger change (general style variables) in order to fix that smaller one, but that needs more time. Will go ahead with a quick-fix before next Tue.

LGoto subscribed.

This task was closed as part of backlog upkeep. If you believe it was closed in error, please respond on the ticket.

Reverting undiscussed silent close. Visual bug that still needs to be fixed.

This issue affects buttons using a <span> tag, but not those using a <button> tag. (Of course that's no help for content on wiki pages, but maybe it helps identify the issue.)

I noticed this with the "Jump to current event" button on https://wikitech.wikimedia.org/wiki/Deployments in top-right corner, the text of which jumps because of this bug, when the JS code loads and changes it from <span> to <button>.

The fact that centering works in <button> seems to be some built-in behavior of the tag, impossible to override using CSS. I can't find any documentation about it!

It looks like we could do the following to replicate it: (in supporting browsers)

.mw-ui-button {
    display: inline-flex;
    align-items: center;
}

…but that might mess up the layout of more complicated markup inside the button.

Krinkle renamed this task from Button text is not vertically centered to mw-ui-button in wikitext causes text to be vertically misaligned.Nov 27 2023, 5:48 PM
Krinkle updated the task description. (Show Details)

I notice this fairly often on-wiki. The text alignment looks poorly designed and does not match Wikimedia Design Style Guide. See for example the buttons on https://en.wikipedia.org/wiki/Help:Introduction. This page is promoted on every Wikipedia page view, from the 3-dot personal menu that Vector 2022 introduced.

Screenshot 2023-11-27 at 11.53.33.png (403×706 px, 38 KB)

Screenshot 2023-11-27 at 11.42.21.png (1×2 px, 795 KB)

added Reading-Web-Local-Wiki-Issues
The issue here is with the wikitext.

As I understand it, Reading-Web-Local-Wiki-Issues is used for issues where the software provides something that can be used correctly, but a community has done something unsupported or incorrect that we don't consider the software (and its maintainers) responsible for.

I'm moving this task to MediaWiki-User-Interface as such, since this appears to be an obvious software defect. There exists no common way to create a clickable mw-ui-button in wikitext such that it has the label text vertically aligned.

There is an explicit conflict between the min-height and line-height rules declared in the mw-ui-button stylesheet. Either the min-height override is too tall, causing an unintended gap to be created below the label, or the line-height is too short, causing the text to move up. Fixing either of the rules, seems to create a balanced rendering and one also matches the Wikimedia Design Style Guide.

Change #1140076 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/core@master] mediawiki.ui: Fix vertical alignment of buttons when in wikitext

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