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
editVector imports Less variables from two places:
- Codex:
theme-wikimedia-ui.lessortheme-wikimedia-ui-legacy.less - The
mediawiki.lessmodule MediaWiki Core, i.emediawiki.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
editThe 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:
- The skin creates a file called
mediawiki.skin.variables.less - 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 - The skin overrides any or none of those variables.
- 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
editCurrently 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
editVector 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
editIn 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.