Page MenuHomePhabricator

h1 headings render much larger in Vector skin with Parsoid HTML
Open, LowPublic1 Estimated Story Points

Description

See https://en.wikipedia.org/wiki/Talk:WrestleMania_38?useparsoid=1 for an example (with the vector 2022 skin). Looks like this is an issue with legacy vector as well.

Steps to reproduce

Example (with Vector 2022 skin enabled):

Expected results

  • The h1- headings would be rendered identically in both Parsoid and non-Parsoid renderings

Actual results

  • The h1-heading with Parsoid are much larger.

Environments observed

So, this bug seems specific to Vector skin and not Parsoid HTML or any transformations done in core.

QA Results - Beta

ACStatusDetails
1T359881#9730921

QA Results - Prod

ACStatusDetails
1T359881#9730927

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

This diff also showed up on enwikivoyage pages.

nshahquinn-wmf renamed this task from h1 headings render different in Vector skin with Parsoid HTML to h1 headings render much larger in Vector skin with Parsoid HTML.Fri, Mar 29, 1:17 AM
nshahquinn-wmf subscribed.

According to @ssastry is a blocker for further rollout on any wikis (either talk or main namespace since it shows up everywhere) -- so that takes precedence over mobile front end (which we can disable for parsoid read views if push came to shove).

So, this bug seems specific to Vector skin and not Parsoid HTML or any transformations done in core.

These classes are being placed on a div wrapping the h1 heading, but it doesn't seem like DT wraps the h1 similarly. At least there's no mw-heading1 in the legacy output.

$div->setAttribute(
	'class', 'mw-heading mw-heading' . $section->hLevel
);

https://github.com/wikimedia/mediawiki/blob/master/includes/OutputTransform/Stages/HandleParsoidSectionLinks.php#L108

As I understand @matmarex's https://www.mediawiki.org/wiki/Heading_HTML_changes there /will/ be a mw-heading1 added once the legacy parser adopts the new heading HTML, but there's not one from the legacy parser currently (and that's expected). Any CSS rule which targets <h1> should also target .mw-heading1 in the way shown by https://www.mediawiki.org/wiki/Heading_HTML_changes#Skins_and_sitewide_styles.

With

.mw-heading2, .mw-body h2 {
    font-size: 1.5em;
}

the nested heading has its font-size scaled by its parent though, so it's applied twice,

<div class="mw-heading mw-heading2">
  <h2 id=...>

DT works around this by setting,

.ext-discussiontools-init-section.mw-heading2 {
	// stylelint-disable-next-line declaration-no-important
	font-size: inherit !important;

https://github.com/wikimedia/mediawiki-extensions-DiscussionTools/commit/8271401e73dd81d7205f947b19c301b2edc0d83f

DT works around this by setting,

.ext-discussiontools-init-section.mw-heading2 {
	// stylelint-disable-next-line declaration-no-important
	font-size: inherit !important;

https://github.com/wikimedia/mediawiki-extensions-DiscussionTools/commit/8271401e73dd81d7205f947b19c301b2edc0d83f

Whoops, no, it looks like it was fixed in T357929 by,
https://github.com/wikimedia/mediawiki-skins-Vector/commit/9f1b94ce20a60112b65dc25baf9014e46133ae64

That's just missing .mw-heading1 h1

Change #1017105 had a related patch set uploaded (by Arlolra; author: Arlolra):

[mediawiki/skins/Vector@master] Add h1 headings to fix for applying font-sizes

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

Change #1017105 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Add h1 headings to fix for applying font-sizes

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

Jdlrobson lowered the priority of this task from High to Low.Mon, Apr 15, 8:20 PM
Edtadros subscribed.

Test Result - Beta

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

Test Artifact(s):

Test Steps

See Parsoid rendering of https://en.wikipedia.org/wiki/Talk:WrestleMania_38?useparsoid=1
See non-Parsoid rendering of that page with https://en.wikipedia.org/wiki/Talk:WrestleMania_38?useparsoid=0
✅ AC1: The h1- headings would be rendered identically in both Parsoid and non-Parsoid renderings

parsoid=0parsoid=1
screenshot 240.png (684×1 px, 152 KB)
screenshot 239.png (684×1 px, 166 KB)

Test Result - Prod

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

Test Artifact(s):

Test Steps

See Parsoid rendering of https://en.wikipedia.org/wiki/Talk:WrestleMania_38?useparsoid=1
See non-Parsoid rendering of that page with https://en.wikipedia.org/wiki/Talk:WrestleMania_38?useparsoid=0
Expected results
✅ AC1: The h1- headings would be rendered identically in both Parsoid and non-Parsoid renderings

parsoid=0parsoid=1
screenshot 241.png (684×1 px, 215 KB)
screenshot 242.png (684×1 px, 218 KB)