Jump to content

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

From mediawiki.org

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

[edit]

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

[edit]

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

[edit]

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

[edit]

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

[edit]

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. screenshot of a wikipedia article highlighting different font sizes


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.