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: theme-wikimedia-ui.less or theme-wikimedia-ui-legacy.less
2. The mediawiki.less module MediaWiki Core, i.e mediawiki.skin.defaults.less

Codex variables are grouped into themes. Currently either Wikimedia UI or Wikimedia UI Legacy. The mediawiki.less 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 mediawiki.skin.variables then codex).

mediawiki.less & mediawiki.skin.variables.less

The mediawiki.less 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 mediawiki.skin.variables.less
2. That file imports MediaWiki core variables via @import 'mediawiki.skin.defaults.less'. 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 @import 'mediawiki.skin.defaults.less' to gain access to those core or modified variables.

If a skin creates a mediawiki.skin.variables.less file, and does not import 'mediawiki.skin.defaults.less' , 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 mediawiki.skin.defaults.less 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 @font-size-base are actually initially defined in the core mediawiki.skin.defaults.less 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 Vector/resources/common/variables.less. 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 @import 'mediawiki.skin.variables.less' , that means that it actually imports the file at: Vector/resources/mediawiki.less/vector/mediawiki.skin.variables.less OR Vector/resources/mediawiki.less/vector-2022/mediawiki.skin.variables.less 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:

Font Sizes	Class Name/ID	File Name	Line Number
84%	``#contentSub2`	./skins.vector.styles/layouts/screen.less	96
@font-size-base	.vector-page-titlebar-toc.ve-active	./skins.vector.styles/components/PageTitlebar.less	29
@font-size-base	.vector-toc	./skins.vector.styles/components/TableOfContents.less	18
@font-size-base	.vector-dropdown-label-text	./skins.vector.styles/components/LanguageDropdown.less	30
@font-size-base	.vector-body	./common/typography.less	86
@font-size-base	.mw-indicators	./common/components/Indicators.less	4
@font-size-base--trident-hack	.vector-search-box	./skins.vector.styles/components/SearchBox.less	10
@font-size-base--trident-hack	.vector-body	./common/typography.less	89
@font-size-dropdown	.mixin-vector-dropdown-menu-item()	./common/mixins.less	44
@font-size-footer	.mw-footer	./common/components/Footer.less	17
@font-size-heading-1	.mw-body	./common/typography.less	74
@font-size-heading-2	.vector-sticky-header	./skins.vector.styles/components/StickyHeader.less	65
@font-size-heading-2	#siteSub	./common/typography.less	106
@font-size-heading-3	#siteSub	./common/typography.less	120
@font-size-nav-main	.vector-legacy-sidebar	./skins.vector.styles.legacy/components/LegacySidebar.less	21
@font-size-nav-main-body	.vector-menu-content	./skins.vector.styles.legacy/components/LegacySidebar.less	69
@font-size-nav-main-heading	.vector-menu-heading	./skins.vector.styles.legacy/components/LegacySidebar.less	47
@font-size-nav-personal	.vector-user-menu-legacy	./skins.vector.styles.legacy/components/UserLinks.less	6
@font-size-reset	#siteSub	./common/typography.less	131
@font-size-reset	.toc h2	./common/typography.less	136
@font-size-root	N/A	./common/typography.less	11
@font-size-search-input	.searchButton	./skins.vector.styles.legacy/components/SearchBox.less	77
@font-size-site-notice	#siteNotice	./common/components/SiteNotice.less	10
@font-size-sticky-header-links	.vector-sticky-header	./skins.vector.styles/components/StickyHeader.less	76
@font-size-tabs	.vector-page-toolbar-container	./skins.vector.styles/components/PageToolbar.less	8
@font-size-tabs	.vector-menu-heading	./skins.vector.styles.legacy/components/MenuDropdown.less	24
@font-size-tabs	.mw-list-item	./skins.vector.styles.legacy/components/MenuDropdown.less	92
@font-size-tabs	.vector-menu-heading	./skins.vector.styles.legacy/components/MenuTabs.less	54
@font-size-user-links	.vector-user-links .mw-portlet-vector-user-menu-overflow	./skins.vector.styles/components/UserLinks.less	46
0.75em	.vector-toc-toggle	./skins.vector.styles/components/TableOfContents.less	35
12.8px	#siteSub	./common/typography.less	97
14px	.cdx-mixin-css-icon-alignment( );	./skins.vector.styles/components/Icon.less	8
16px	.vector-feature-custom-font-size-clientpref-enabled &	./common/typography.less	93
inherit	.vector-toc-list-item	./skins.vector.styles/components/TableOfContents.less	102
inherit	.vector-dropdown-label	./skins.vector.styles/components/MenuTabs.less	83
inherit	.mixin-vector-dropdown-content-flip();	./skins.vector.styles/components/LanguageDropdown.less	67
unit( @font-size-browser, px )	.vector-popup-notification	./skins.vector.styles/components/PopupNotification.less	2
unit( 14 / @font-size-browser, rem )	.vector-pinnable-header-label	./skins.vector.styles/components/PinnableHeader.less	18
unit( 16 / @font-size-browser, rem )	.search-toggle	./skins.vector.styles/components/Header.less	29

Computed values in the DOM

In Vector, nearly all relative font values are calculated in em's. This leads to cascading font-size issues based on the HTML structure because the `em` 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.