Mainly originated in two(?) specific needs, OOUI has been using `em` based sizing in its code base:
# Establishing relative sizes to the parent elements, resulting in simpler sizing balance in more complex widgets
- Establishing relative sizes to the parent elements, resulting in simpler sizing balance in more complex widgets
- # Enabling zooming capabilities on old browsers like IE 6
-- # Enabling text zooming only full-interface capabilities, which got more and more hidden in most modern browsers
Functiona== Problem statement
Ability a)1. has never been perfectly implemented well, we see for example specific rules `font-size: 0.875em` needed for elements that are outside of `.mw-body-content` for example in ContentTranslation dialogs
{F28606655}
Functionality b2) is not needed any more as those browsers are [[ https://endoflife.software/applications/browsers/internet-explorer | beyond end-of-life support, effective January 12, 2016 ]]. Every other major browser nowadays supports full-page-zooming for several years now.
What remains needed from current state of technology, is the ability for users to set their font size in browser preferences. **Using `px` for `font-size` removes this ability!** (see below)
Example of current issues in code:
- OOUI WikimediaUI theme (covered by patch)
- MW core DateInputWidget: https://github.com/wikimedia/mediawiki/blob/master/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.styles.less#L21 (hard to write, hard to debug, depending where you're starting)
- Echo: https://github.com/wikimedia/mediawiki-extensions-Echo/blob/master/modules/styles/mw.echo.ui.NotificationBadgeWidget.less#L17 (hard to write, hard to maintain, hard to debug)
If we go further and apply that approach to other, non-OOUI based products, for example:
- MW core https://github.com/wikimedia/mediawiki/blame/master/resources/src/mediawiki.special.search.interwikiwidget.styles.less#L66
- Vector https://github.com/wikimedia/mediawiki-skins-Vector/blob/master/components/tabs.less#L70
- MinervaNeue https://github.com/wikimedia/mediawiki-skins-MinervaNeue/blob/master/resources/skins.minerva.base.styles/pageactions.less#L155
We already have a mix of `px` based where `em` was supposed to be used, for example:
- MinervaNeue https://github.com/wikimedia/mediawiki-skins-MinervaNeue/blob/master/resources/skins.minerva.base.styles/ui.less#L37
- WikibaseMediaInfo https://github.com/wikimedia/mediawiki-extensions-WikibaseMediaInfo/blob/c68989fa7b9ff10f47aeedd222a393ede56b579f/resources/mediainfo-variables.less#L48
== Proposal
Therefore we should limit the usage of `em` to the properties where it enables consumption of content independently of the users' settings:
- readability by `font-size` and `line-height` (latter preferred without unit value for simpler maintainability in the long-term)
- icon sizing as icons are an important information carrier in the user interface and could also result in covered textual information if not sized in `em`s alongside text. Sizing here includes `width`/`height`, `padding` to the surrounding text.
- `width`/`height` and `max-width`/`max-height` property values as they would result in cutting off user sized text when set larger than default size
And usage of `px` for all the rest.
It should result in a perfectly laid-out result at default font size and an always readable result on larger font size.
[] Remove `em` based sizing in favor of `px` on all box sizing properties, like width, margin, padding, border, box-shadow
[x] Evaluate if `font-size` is needed either by feature branch and cross-browser testing
[x] Evaluate `font-size` override in user-agent settings differences
**Decisive point for `font-size` in `em`s:**
User's choice of other starting size for default font would not impact browser rendering when set to `px`. A popular accessibility feature and a no-go for user customization. `font-size`s should remain in a relative value unit.
Nonetheless box-sizing properties could be used in `px` when ensuring that for example `height`/`max-height` are not set to an absolute value.
Pro tip: Try for yourself to set the standard font higher than the default `16px` and browse your favorite websites.
=== Wins through pixels (for box-sizing properties max-width, max-height, margin, padding, border, …)
* **Simpler hand-off between designers/developers**
* **Easier to write code** (no more `@start-framed-indicator-only: 15 / @ooui-font-size-browser / @ooui-font-size-base;` LESS var definition)
* **Easier to maintain code**
* **Easier to debug code** (no more `margin-top: 1.14285714em;`
We need to be careful with width/height in px here though.
=== Comparison with other big web entities
All tested in IE 8&9
- [[ https://www.google.com/?gws_rd=ssl | Google search homepage ]]
-- widths/margins/paddings/borders in `px`
-- font-size `px`
-- line-height `em` (ex: 0.8em) or rel (ex: 1.2)
- [[ https://medium.com/ | Medium ]]
-- widths/margins/paddings/borders in `px`
-- fonts `px`
-- line-heights relative (ex: 1.22)
-- Doesn't support IE<11 any more
- [[ https://m.facebook.com/?refsrc=https%3A%2F%2Fwww.facebook.com%2F&_rdr | Facebook ]]
-- widths/margins/paddings/borders in `px`
-- font-size `px` or relative (ex: medium)
-- line-height `px`
-- IE 8 is not supported anymore
- [[ https://www.ebay.de/ | eBay Germany ]]
-- widths/margins/paddings/borders in `px`
-- font-size `%` or relative or px (ex: medium)
-- line-height `px`
-- IE 8 only basic support any more
- [[ https://www.nytimes.com/ | NYTimes ]]
-- widths/margins/paddings/borders in `px`
-- font-size `rem`, but not for older browsers
-- line-height `rem`
-- IE 8 is not supported any more
=== Further resources
- https://stackoverflow.com/questions/11799236/should-i-use-px-or-rem-value-units-in-my-css
- https://engageinteractive.co.uk/blog/em-vs-rem-vs-px