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
Functionality a) has never been perfectly implemented, 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 b) 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.
== Proposal
[] 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 for hand-off 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