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
# 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
== Problem statement
Ability 1. has never been implemented well. We've got `font-size: 0.875em` rules on elements that are outside of `.mw-body-content` to ensure correct scaling root in ContentTranslation dialogs for example.
{F28606655}
Functionality 2. 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
-- https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/core/+/refs/heads/master/resources/src/mediawiki.legacy/shared.css#281
- 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
== Dev notes
Use
- Firefox: Preferences > Language and Appearance > Fonts and Colors > Size > Pump up tp 44
- Chrome: Preferences > Appearance > Font size > Very large
and browse the web and compare with OOUI demos
One more time, from qualitative user feedback in accessibility circles, increasing the default font size is one of the most used user settings.
=== 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