Page MenuHomePhabricator

Reconsider `em` values in CSS with current state browsers
Open, Needs TriagePublic


Throughout MediaWiki core and extensions we have a unbearable mess mish-mash of em, px (and furthermore %, pt (for screen CSS!) and newest addition rem/vh values).

We should reconsider especially the first two in where to use what to serve whom.
Some questions in the year 2018; relying on px only would simplify a few things on the programming side. So let's evaluate possible issues:

  • Does it make sense to rely on ems for font-sizes and distance/positioning values?
    • Text zooming got completely(?) out of fashion, support is somewhere hidden in submenus in remaining implementations (Firefox > Zoom > Zoom Text only), IE 6-8 should not be a show stopper for us any more
  • Do we need a combination of both, but allowing ems only for font sizing, line height (with help of stylelint)?
  • Are there other technical restrictions to consider moving away from em only?
    • any mobile browser with considerable market share,
    • assistive technology building on top of font size based zooming, although not related, similar things like T204807 comes to my mind

Event Timeline

A big pro-argument for removing ems is the inconsistent usage in our products. We are currently (and already for many months and years) delivering products that are only relying on pixels and it doesn't seem to result in bug reports. One example, which I'm currently working on is personal tools extension of ULS (no pun intended, there are many more all over), which in contrast to Vector's implementation relies only on px. Vector itself uses a mix, so not much better.

Devs seem to give up quickly on ems under pressure, as they are harder to calculate, and a floating number and resulting rounding is often involved.
I've tried to come up with some LESS em calculation in OOUI (@size-icon: 20 / @ooui-font-size-browser / @ooui-font-size-base;), but it's extra dev effort and clogs up code quickly.

assistive technology building on top of font size based zooming, although not related, similar things like T204807 comes to my mind

That would be my major concern with using pixels instead of ems. Although text zooming is not much of a concern anymore, I think our layouts should adapt to the font-size preference set by the OS. This is especially true on mobile devices, where if a user sets a large font-size, that size is reflected in all native apps. Not conforming to that preference would put the web properties at a disadvantage IMO.

That being said, the browser font-size is only set at the root-em level, so I agree that using ems can be confusing because of how font-sizes are inherited from parent elements.

To alleviate that, I'd be more inclined to use rems instead of ems where possible. This reminds me of the conversation in T160704, where the idea what proposed that we set 10px as the root-em value, thereby easing calculations so that 16px = 1.6rem. I'm not sure how this could work while maintaining the accessibility settings, but if it could, I think it might be a novel approach.