Page MenuHomePhabricator

Templatestyles + CSS + Listeria styling issue
Closed, ResolvedPublicBUG REPORT

Description

Steps to replicate the issue (include links if applicable):

The construction of the html content of the page has changed and I am not finding a way to circumvent the problematic html to reapply a templatestyle that was previously used to style the headers on the page.

<h3 id="kente_cloth" data-mw-thread-id="h-kente_cloth-New_2024_Living_Heritage_Elements"><span data-mw-comment-start="" id="h-kente_cloth-New_2024_Living_Heritage_Elements"></span>kente cloth<span data-mw-comment-end="h-kente_cloth-New_2024_Living_Heritage_Elements"></span></h3>
h1::first-letter, h1 span::first-letter, h1 span + ::first-letter, h2::first-letter, h2 span::first-letter, h2 span + ::first-letter, h3::first-letter, h3 span::first-letter, h3 span + ::first-letter, h4::first-letter, h4 span::first-letter, h4 span + ::first-letter, h5::first-letter, h5 span::first-letter, h5 span + ::first-letter{
	text-transform: capitalize;
}

What happens?:
The text remains lowercase when the source text is lowercase

What should have happened instead?:
All headers should start with a capital letter

PS. I think there should be a tag and a project for Listeria, as it is a widely used component in the wikis.

image.png (1×2 px, 1 MB)

Event Timeline

Izno subscribed.

The heading change is around 6 months old at this point, see https://www.mediawiki.org/wiki/Heading_HTML_changes This is not a bug in TemplateStyles.

And as for the why, I think this is because a bare h3 is not considered to be a block container. See the lead for ::first-letter at MDN. I think the way to fix this is to add some reasonable <span>, say <span class="wllh-box-first-letter">, inside of the <h3> in https://meta.wikimedia.org/wiki/Template:Wiki_Loves_Living_Heritage/Box , and then to target that. I will take a look.

Adding the span didn't fix it. :( The previous version of the page does work e.g. archive.org. Which also has the DiscussionTools markup, so that's definitely not a reason either.

@matmarex maybe you're smart enough to figure out how to restore this?

I think this will do what you want?

.mw-heading::first-letter {
	text-transform: capitalize;
}

After the heading HTML changes, the <div class="mw-heading"> effectively replaced the <h2>/<h3>/etc. in the HTML in the same position, so, if you go back to the CSS version before today's changes: https://meta.wikimedia.org/w/index.php?title=Template:Wiki_Loves_Living_Heritage/style.css&oldid=27968320#L-499

h1::first-letter, h2::first-letter, h3::first-letter, h4::first-letter, h5::first-letter {
	text-transform: capitalize;
}

…you basically just need to replace h2, h3, etc. with .mw-heading.

Izno assigned this task to matmarex.

Yes, that fixes it. Sigh. The one thing I didn't try and probably should have.