Page MenuHomePhabricator

Implement initial CSS Custom properties for font-size in Minerva Neue
Closed, ResolvedPublic3 Estimated Story PointsBUG REPORT

Description

In order to support variable font-size in Minerva Neue, we should implement CSS custom properties as was done in T348984 for Vector.

The difference between Minerva and Vector however, is that Minerva already has a variable font-size implementation via the Special:MobileOptions page

Screenshot 2023-10-19 at 10.03.04 AM.png (307×476 px, 46 KB)

and it also supports Apple's Dynamic Type feature for iOS in resources/skins.minerva.base.styles/content/main.less.

When implementing these initial CSS custom properties, they should be compatible with these existing font-scaling methods.


New font-sizes per T356339

Standard: font-size: 16px, line-height: 24px
Medium: font-size 18px, line-height: 27px
Large: font-size: 20px, line-height: 30px

QA steps

  • On Special:MobileOptions there are 3 options for font size on Minerva
  • Options Should represent Default, small, and large
  • Options Names to match the ones in Vector

QA Results - Beta

ACStatusDetails
1T349303#9530872
2T349303#9530872
3T349303#9547887

QA Results - Prod

ACStatusDetails
1T349303#9568077
2T349303#9568077
3T349303#9568077

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
Jdlrobson lowered the priority of this task from High to Medium.Nov 30 2023, 6:09 PM
Jdlrobson renamed this task from Implement initial CSS Custom properties in Minerva Neue to Implement initial CSS Custom properties for font-size in Minerva Neue.Mon, Jan 29, 4:34 PM

@ovasileva we might want to consider punting this to the next sprint since design is not ready and prioritizing something that is as it seems we don't want to rush the design work in T356339.

JScherer-WMF added a subscriber: JScherer-WMF.

@ovasileva we might want to consider punting this to the next sprint since design is not ready and prioritizing something that is as it seems we don't want to rush the design work in T356339.

Design spec for new sizes is in the description now.

Change 998580 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/extensions/MobileFrontend@master] Drop X-Large font size control

https://gerrit.wikimedia.org/r/998580

Change 998586 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/extensions/MobileFrontend@master] Drop legacy font size code/classes

https://gerrit.wikimedia.org/r/998586

Change 998589 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/extensions/MobileFrontend@master] Visual change: Change font size values

https://gerrit.wikimedia.org/r/998589

Test wiki created on Patch demo by Jdlrobson using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/bbf1259665/w

Looks great!

I want to tweak paragraph spacing around the h3/4 headers, but what's in there is correct, so it passes for now. I'll make a new ticket to address the spacing.

Change 998580 merged by jenkins-bot:

[mediawiki/extensions/MobileFrontend@master] Drop X-Large font size control

https://gerrit.wikimedia.org/r/998580

Change 998586 merged by jenkins-bot:

[mediawiki/extensions/MobileFrontend@master] Drop legacy font size code/classes

https://gerrit.wikimedia.org/r/998586

Change 998589 merged by jenkins-bot:

[mediawiki/extensions/MobileFrontend@master] Visual change: Change font size values

https://gerrit.wikimedia.org/r/998589

Edtadros added a subscriber: Edtadros.

Test Result - Beta

Status: ❌ FAIL
Environment: beta
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

QA Steps

✅ AC1: On Special:MobileOptions there are 3 options for font size on Minerva
see below

✅ AC2: Options Should represent Default, small, and large
see below

❌ AC3 Options Names to match the ones in Vector
the default is Regular on mobile, but Standard on vector

Mobile MinervaVector Desktop
screenshot 463.png (860×432 px, 69 KB)
screenshot 462.png (460×258 px, 25 KB)

Change 1000251 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/extensions/MobileFrontend@master] i18n: Rename "Regular" font size to "Standard"

https://gerrit.wikimedia.org/r/1000251

Change 1000251 merged by jenkins-bot:

[mediawiki/extensions/MobileFrontend@master] i18n: Rename "Regular" font size to "Standard"

https://gerrit.wikimedia.org/r/1000251

@Edtadros AC3 should now pass if you want to repeat the test.
Otherwise this can be QAed in production.

Soda reopened this task as Open.EditedThu, Feb 15, 8:08 PM
Soda added a subscriber: Soda.

There has been some feedback on the Wikimedia Discord community that this particular change makes the text very hard to read.

Edit: Also see discussion on en:WP:VPT

Based on some initial tests, it seems like the problem here is that people who had previous intentionally set the font to "Regular" (renamed "Standard" now) are now getting a bigger font instead of the "Small" font (which is now the default font).

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

QA Steps

✅ AC1: On Special:MobileOptions there are 3 options for font size on Minerva
see below

✅ AC2: Options Should represent Default, small, and large
see below

✅ AC3 Options Names to match the ones in Vector
the default is Regular on mobile, but Standard on vector

Mobile MinervaVector Desktop
screenshot 546.png (849×389 px, 61 KB)
screenshot 548.png (285×908 px, 50 KB)
screenshot 547.png (417×1 px, 187 KB)