Reading/Web/Accessibility for reading/dev/Vector font-size audit

Before changing the font-sizes in skins, we need to understand the impact that change could have, on the skin as well as the broader ecosystem. The following is a summary of how font-size works in Vector as investigated in T344515.This summary goes through Life as a Less variable in MediaWiki: from inception in MediaWiki core, into the Vector skin, onto an HTML document in a browser, and from there into the wild MediaWiki ecosystem.

CSS variable sources
Vector imports Less variables from two places:


 * 1) Codex:   or
 * 2) The   module MediaWiki Core, i.e

Codex variables are grouped into themes. Currently either Wikimedia UI or Wikimedia UI Legacy. The  modules is imbued with far more magical ResourceLoader powers (and far less documentation). Although both of these sources share many of the same variables, Vector needs them both, and they both need to be imported in the correct order (first  then  ).

mediawiki.less &#x26; mediawiki.skin.variables.less
The  ResourceLoader module, specifically the mediawiki.skin.defaults.less file, enables skins to import, modify and share a standardized set of variables with extensions.

The process goes like this:


 * 1) The skin creates a file called
 * 2) That file imports MediaWiki core variables via  . That actually imports the file at core/resources/src/mediawiki.less/mediawiki.skin.defaults.less
 * 3) The skin overrides any or none of those variables.
 * 4) Extensions can use   to gain access to those core or modified variables.

If a skin creates a  file, and does not import  , then extensions will not have access to core variables, and the Less build will fail due to undefined variables. For this reason, we have to import  even if Vector doesn’t use those core variables.

As illustrated in the chart at the end of this section, core font-size variables such as  are actually initially defined in the core   file, then overridden by Vector several times.

variables.less
Currently both legacy vector and Vector 2022 import the mediawiki.skins.less file into a file called. That file is used by both legacy and modern Vector as the source of variables throughout the rest of the Less code.

This file uses , that means that it actually imports the file at:   OR   depending on whether the skin is legacy or modern Vector.

This behaviour is confusing. In general, legacy and modern Vector should be separated as much as possible.

Variable usage in Vector Less
Vector uses the following range of font-size values:

Computed values in the DOM
In Vector, nearly all relative font values are calculated in 's. This leads to cascading font-size issues based on the HTML structure because the ` ` unit calculates its value based on it's parents font-size value.

In the screenshot below, font-sizes that are computed to decimals, equal to 13px, or less than 12px are highlighted. The reason for this is that these values represent unintentional font sizes, i.e. they do not conform to any design specification or system.

Although many highlighted areas come from user generated content, there are plenty of arbitrary or miscalculated font sizes originating in the Vector skin as well.