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
Aklapper removed Volker_E as the assignee of this task.Jun 19 2020, 4:15 PM

This task has been assigned to the same task owner for more than two years. Resetting task assignee due to inactivity, to decrease task cookie-licking and to get a slightly more realistic overview of plans. Please feel free to assign this task to yourself again if you still realistically work or plan to work on this task - it would be welcome!

For tips how to manage individual work in Phabricator (noisy notifications, lists of task, etc.), see https://phabricator.wikimedia.org/T228575#6237124 for available options.
(For the records, two emails were sent to assignee addresses before resetting assignees. See T228575 for more info and for potential feedback. Thanks!)