Page MenuHomePhabricator

Address interface sizing issues on different base font size calculations for thorough consistency in MediaWiki projects
Open, Needs TriagePublic

Description

Current state of interface in MediaWiki includes big inconsistencies in sizing interface elements in extensions built on-top.


(Collection of button sizes within 15 minutes of English Wikipedia. Not everything is connected to the task, though some of the sizing portions are visible)

One of the reasons at core is that we're still relying on em based sizing – with its advantages like zoomability – but didn't go for one base font size as anchor for the sizing of elements with Vector as quasi-default skin in our main projects.
Instead we have to deal with above-mentioned inconsistencies with its negative effect on professional look & feel and user satisfaction.
There are also further side-effects, like

  • problematic hand-over from designers visual templates to implementors
  • slightly confusing inheritance of ems which lead to unwanted outcomes
  • rounding errors in browsers, which need counter-intuitive hacks to address those.

This task is meant to collect the current shortcomings and evaluate possible solutions.

Event Timeline

Volker_E created this task.Jun 1 2016, 8:58 PM
Restricted Application added subscribers: Zppix, Aklapper. · View Herald TranscriptJun 1 2016, 8:58 PM
Volker_E added a comment.EditedJun 1 2016, 9:04 PM

One of the most promising approaches would be to set a distinct base font-size in Vector (and having it as guideline for other themes) and go for rem based sizing with px fallbacks for older browsers.
Pros:

  • hand-over between design and implementation much easier
  • no rounding errors
  • no sizing inheritance issues
  • zoomability in all ways

Cons:

  • slightly (have to evaluate how much) bigger CSS over-the-wire due to doubling values for pixel fallbacks
  • maybe very time-intensive transformation phase between current code and rem based one.
  • Templates affected?
Volker_E updated the task description. (Show Details)Jun 1 2016, 9:05 PM