| Esanders | |
| Feb 18 2017, 8:02 PM |
| F5692344: pasted_file | |
| Feb 18 2017, 8:02 PM |
| F5692324: pasted_file | |
| Feb 18 2017, 8:02 PM |
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.
| Subject | Repo | Branch | Lines +/- | |
|---|---|---|---|---|
| styles: Improve vertical alignment of elements' & widgets' icons | oojs/ui | master | +54 -66 |
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
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.
Change 338542 merged by jenkins-bot:
styles: Improve vertical alignment of elements' & widgets' icons