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:
* 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=
- MediaWiki core (6 files)
- resources/src/mediawiki.content.json.less (1 matches)
- resources/src/mediawiki.debug/debug.less (4 matches)
- resources/src/mediawiki.diff.styles/diff.less (1 matches)
- resources/src/mediawiki.editfont.less (2 matches)
- resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.styles.less (1 matches)
- resources/src/mediawiki.widgets.datetime/mediawiki.widgets.datetime.definitions.less (1 matches)
- Wikidata Query GUI (1 files)
- style.less (7 matches)
- mediawiki/extensions/3D (1 files)
- modules/ext.3d.less (1 matches)
- mediawiki/extensions/BetaFeatures (1 files)
- resources/betafeatures.nojs.less (1 matches)
- mediawiki/extensions/CodeEditor (1 files)
- modules/jquery.codeEditor.less (1 matches)
- mediawiki/extensions/ContentTranslation (8 files)
- modules/entrypoints/styles/ext.cx.entrypoints.newarticle.less (1 matches)
- modules/entrypoints/styles/ext.cx.entrypoints.newbytranslation.mobile.less (3 matches)
- modules/entrypoints/styles/ext.cx.entrypoints.recenttranslation.less (2 matches)
- modules/source/styles/mw.cx.SelectedSourcePage.less (4 matches)
- modules/source/styles/mw.cx.SourcePageSelector.less (1 matches)
- modules/stats/styles/ext.cx.stats.less (1 matches)
- modules/ui/styles/mw.cx.ui.LanguageFilter.less (1 matches)
- skin/styles/skin.less (1 matches)
- mediawiki/extensions/DiscussionTools (1 files)
- modules/dt.ui.ReplyWidget.less (1 matches)
- mediawiki/extensions/Echo (1 files)
- modules/nojs/mw.echo.notifications.less (1 matches)
- mediawiki/extensions/ExternalGuidance (1 files)
- modules/mw.externalguidance/main.less (2 matches)
- mediawiki/extensions/Flow (1 files)
- modules/styles/board/topic/titlebar.less (1 matches)
- mediawiki/extensions/GrowthExperiments (1 files)
- mediawiki/extensions/JsonConfig (2 files)
- modules/JsonConfig.less (1 matches)
- modules/tabular-general.less (1 matches)
- mediawiki/extensions/Kartographer (6 files)
- modules/dialog/dialog.less (3 matches)
- styles/control-attribution.less (1 matches)
- styles/control-scale.less (1 matches)
- styles/kartographer.less (1 matches)
- styles/leaflet-overrides.less (1 matches)
- styles/specialMap.less (1 matches)
- mediawiki/extensions/MediaSearch (1 files)
- resources/components/EndOfResults.less (1 matches)
- mediawiki/extensions/MobileFrontend (4 files)
- resources/mobile.init.styles/main.less (1 matches)
- resources/mobile.special.styles/common.less (1 matches)
- resources/mobile.startup/Overlay.less (1 matches)
- resources/mobile.startup/search/SearchOverlay.less (1 matches)
- mediawiki/extensions/MultimediaViewer (2 files)
- resources/mmv/ui/mmv.ui.canvas.less (2 matches)
- resources/mmv/ui/mmv.ui.metadataPanel.less (3 matches)
- mediawiki/extensions/OAuth (1 files)
- resources/modules/ext.MWOAuth.AuthorizeForm.less (1 matches)
- mediawiki/extensions/PageTriage (1 files)
- modules/ext.pageTriage.toolbar/tags.less (1 matches)
- mediawiki/extensions/Popups (3 files)
- src/ui/templates/popup/popup.less (1 matches)
- src/ui/templates/preview/preview.less (1 matches)
- src/ui/templates/settingsDialog/settingsDialog.less (6 matches)
- mediawiki/extensions/RevisionSlider (1 files)
- modules/ext.RevisionSlider.less (2 matches)
- mediawiki/extensions/TemplateWizard (1 files)
- resources/ext.TemplateWizard.less (1 matches)
- mediawiki/extensions/TimedMediaHandler (1 files)
- resources/ext.tmh.player.inline.styles.less (2 matches)
- mediawiki/extensions/Translate (2 files)
- resources/css/ext.translate.groupselector.less (1 matches)
- resources/css/ext.translate.messagetable.less (5 matches)
- mediawiki/extensions/UniversalLanguageSelector (1 files)
- resources/css/ext.uls.compactlinks.less (1 matches)
- mediawiki/extensions/UploadWizard (2 files)
- resources/ui/steps/uw.ui.Deed.less (4 matches)
- resources/ui/steps/uw.ui.Details.less (1 matches)
- mediawiki/extensions/VisualEditor (2 files)
- mediawiki/extensions/WikiLove (1 files)
- resources/ext.wikiLove.less (2 matches)
- mediawiki/extensions/Wikistories (2 files)
- mediawiki/skins/MinervaNeue (3 files)
- mediawiki/skins/MonoBook (1 files)
- resources/screen-common.less (1 matches)
- mediawiki/skins/Vector (3 files)
- resources/skins.vector.styles/components/Icon.less (1 matches)
- resources/skins.vector.styles.legacy/typography.less (1 matches)
- skinStyles/ext.echo.styles.alert.less (1 matches)
- mediawiki/skins/WikimediaApiPortal (1 files)
Open questions
- How should icons scale with different font sizes? (follow up work for T365731 )