Page MenuHomePhabricator

Vertical alignment of icon within ButtonElement, CapsuleMultiselect-, Dropdown- & SelectFileWidget is incorrect
Closed, ResolvedPublic

Description

For framed ButtonElement:

In Chrome, 2px above, 4px below:

In Firefox 2px above, 5px below:

This issue is compounded by the fact we aren't sure how tall the ButtonElement is as the browser may or may not be applying the min-height: 2.5em rule, which doesn't play nicely with border-box.

For the other widgets relying on em sizing is unreliable due to different fonts used as sans-serif default.

Details

Event Timeline

Esanders created this task.Feb 18 2017, 8:02 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptFeb 18 2017, 8:02 PM

The examples given we actually the button groups containing indicators, but error is similar in other button elements. Chrome & Firefox seem to be using a slightly different y-origin for the absolute positioning, so we might have to just fudge it until we can come up with a better solution.

Change 338542 had a related patch set uploaded (by Esanders):
Improve vertical alignment of button icons in MW

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

Volker_E added a subscriber: Volker_E.EditedFeb 25 2017, 1:49 AM

By the way, both our solutions proposed won't change it on Ubuntu as Chrome uses 'Liberation Sans' and Firefox 'DejaVu Sans' as [[ http://fontfamily.io/sans-serif | sans-serif font-family ]]. This has direct influence on em distance calculation. A good, at the same time depriving read is http://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align – it explains the dependency issues with em sizing.
On Mac, with serif 'Helvetica', icons in Firefox & Chrome start at 3.2px.

Restricted Application added a project: Design. · View Herald TranscriptFeb 25 2017, 1:49 AM
Volker_E renamed this task from Regression: Vertical alignment of icon within button element is incorrect to Vertical alignment of icon within ButtonElement, CapsuleMultiselect-, Dropdown- & SelectFileWidget is incorrect.Feb 25 2017, 4:10 AM
Volker_E claimed this task.
Volker_E updated the task description. (Show Details)
Volker_E added subscribers: matmarex, Jdforrester-WMF.
Volker_E moved this task from Backlog to Reviewing on the OOUI board.Feb 25 2017, 4:17 AM

Change 338542 merged by jenkins-bot:
styles: Improve vertical alignment of elements' & widgets' icons

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

Volker_E closed this task as Resolved.Feb 28 2017, 11:03 PM
Volker_E triaged this task as Medium priority.
Volker_E moved this task from Reviewing to OOjs-UI-0.19.4 on the OOUI board.
Volker_E edited projects, added OOUI (OOjs-UI-0.19.4); removed OOUI.
Volker_E removed a project: Patch-For-Review.
Volker_E removed a subscriber: gerritbot.