Page MenuHomePhabricator

[EPIC] Various parts of MediaWiki don't respect default browser font size
Open, Needs TriagePublic

Assigned To
None
Authored By
Jack_who_built_the_house
Jul 18 2022, 2:02 PM
Referenced Files
Unknown Object (File)
Jul 18 2022, 2:06 PM
Unknown Object (File)
Jul 18 2022, 2:06 PM
F35320502: image.png
Jul 18 2022, 2:02 PM
F35320500: image.png
Jul 18 2022, 2:02 PM
F35320496: image.png
Jul 18 2022, 2:02 PM
F35320491: image.png
Jul 18 2022, 2:02 PM
F35320488: image.png
Jul 18 2022, 2:02 PM
Tokens
"Love" token, awarded by Volker_E."Love" token, awarded by stjn.

Description

Parent task: T363845

Having started with T312933 and T312970 related to WikiEditor (2010), I discovered that quite many MediaWiki parts and extensions don't respect the default browser font size, setting an absolute font-size in px instead of relative in em/rem. I'm not sure whether I should create an individual task for every finding because there's quite a few of them, their list is likely to grow, and they are typical.

Here's what I stumbled upon as of now:

image.png (366×737 px, 179 KB)
image.png (454×1 px, 62 KB)
image.png (254×262 px, 12 KB)
image.png (345×240 px, 27 KB)
image.png (339×204 px, 8 KB)
* Page-Previews have a fixed font-size of 14px. Here's how they look in Firefox with 20px as the default font size. The width of the popup in various orientations is also fixed (450px, 320px).Diffs are rigidly set to 13px. That's their look.#siteSub is strictly 12.8px. Here's how it looks like.line-height in .sidebar-toc is exactly 18px. It may be not obvious what's so bad but here's the difference with 16px as the default size.padding-left of subsections on the same screenshot is 8px (IMHO, difficult to see even with standard settings).

According to some research, more than 3% of users have non-default browser font size.

Related task: T27257: Don't specify font-size in pixels for accessibility

Hardcoded font-size audit

The following query in codesearch identified font-sizes set in px (font-size:.*px;) in Wikimedia maintained repos:
https://codesearch.wmcloud.org/deployed/?q=font-size%3A.*px%3B&files=.less&excludeFiles=&repos=

Open questions

  • How should icons scale with different font sizes? (follow up work for T365731 )

Event Timeline

Jdlrobson subscribed.

We are handling the desktop improvements part of this in T261334

Results of T363845 should help point the way for this issue. An audit of hardcoded font sizes wouldn't hurt as pre-work for the implementation. It's something we'll probably have to do anyways eventually.

I think this ticket can remain open as a tracking or epic, but various fixes should be handled separately with dedicated tickets, so that the teams responsible for maintaining the repos are made aware of the changes, and potential regressions are easier to track.

The fixes for these issues are very much in line with T363845, and should consist of replacing the hard coded values with Codex design tokens. The font-sizes for these token are now in rem's, yay! I actually think this makes the changes safer than if the values were in ems.

Regarding an audit of these hardcoded sizes, the following codesearch query identifies px values in Less files, in Wikimedia maintained repos: https://codesearch.wmcloud.org/deployed/?q=font-size%3A.*px%3B&files=.less&excludeFiles=&repos=
There seems to be a fair bit in Popups, so I'll create a task for that, but for this ticket, I'm removing the web-team tag as the issue spans multiple teams, and I'll paste the results of that query into the task description.

Jdrewniak updated the task description. (Show Details)
Jdrewniak subscribed.
Jdlrobson renamed this task from Various parts of MediaWiki don't respect default browser font size to [EPIC] Various parts of MediaWiki don't respect default browser font size.Tue, May 28, 10:01 PM
Jdlrobson moved this task from Incoming to Epics/Goals on the Web-Team-Backlog board.