Page MenuHomePhabricator

1.45.0-wmf.1: When setting font size to "small", line-height is absolute, making lines with larger font-size cramped
Closed, ResolvedPublic

Description

Problem:
Lexeme lemmas (e.g. L123) look like this since T392171 rolled out today:

image.png (648×179 px, 20 KB)

Screenshot_20250514_145513.png (757×173 px, 13 KB)

To replicate, visit https://www.wikidata.org/wiki/Lexeme:L1453288?safemode=1 and set the font size in the appearance menu to "small".

According to @jhsoby, this is due to the line-height: var(--line-height-medium) on .vector-body, and thus it affects everything, not just lexemes (it just happens to be very noticeable there).

Other examples:

Screenshot_20250515_125735.png (542×259 px, 21 KB)

From https://meta.wikimedia.org/wiki/Grants:Project

Screenshot_20250515_131718.png (877×611 px, 68 KB)

From https://es.wikisource.org/wiki/Diario_Oficial_de_El_Salvador/Tomo_145/N%C3%BAmero_278

Acceptance criteria:

  • The lexeme UI looks normal again.

Open questions:
Is this due to Codex 2.0 or something else?

Event Timeline

It only happens for me when the text size is set to small.

It's also happening in MonoBook:

Bildschirmfoto_2025-05-14_15-40-30.png (679×61 px, 12 KB)

(from https://test.wikidata.org/wiki/Lexeme:L1?useskin=monobook)

True, it looks fine in a private window. I guess I must’ve set my own Vector 2022 font size to small at some point and forgotten about it.

The modern skin is also affected, but vector (legacy) and minerva aren’t.

It seems unwise to me to set a general line-height to an absolute value (--line-height-medium defaults to 1.625rem in Codex), since it will also affect everything that has a different font-size and doesn't set line-height explicitly.

Would be nice if some Codex folks could give some input on that.

It seems T389900 is related to this change, so adding some of the people involved in that task as subscribers.

Also, I did some more digging, and it seems like the intention is that line-height should remain(?) at 1.6 for Vector-2022 (though I'm a bit concerned about the comment that it might be removed later? – but maybe I just don't fully understand the font mode stuff yet), but for html.vector-feature-custom-font-size-clientpref-0, it is being overridden by @line-height-small, which doesn't have a Vector-specific override to a relative value, so it defaults to 1.375rem.

jhsoby renamed this task from Lemmas are unreadably cramped on 1.45.0-wmf.1 to 1.45.0-wmf.1: When setting font size to "small", line-height is absolute, making lines with larger font-size cramped.May 15 2025, 11:18 AM
jhsoby updated the task description. (Show Details)

One of the DST designers will weigh in on this ASAP, but in the meantime, I can give my non-designer take: I believe the intention is to set different line heights per font size, e.g. setting both font-size: @font-size-xxx-large and line-height: @line-height-xxx-large (the font-size and line-height tokens are meant to scale together, making it easier to choose a line-height token when setting a font size). Since the text in question is a non-standard size (3em), it might be best to simply set line-height: 1.6 on it to get back to the previous state while we assess the bigger picture.

Since the text in question is a non-standard size (3em), it might be best to simply set line-height: 1.6 on it to get back to the previous state while we assess the bigger picture.

Assessing the bigger picture should include reconsidering the extremely large custom text size. It's inconsistent with everything else and causes or contributes to problems with the interface (e.g. T197929, T211761, T394309).

Since the text in question is a non-standard size (3em), it might be best to simply set line-height: 1.6 on it to get back to the previous state while we assess the bigger picture.

Assessing the bigger picture should include reconsidering the extremely large custom text size. It's inconsistent with everything else and causes or contributes to problems with the interface (e.g. T197929, T211761, T394309).

Since this bug is being listed as a potential train blocker, I would recommend a quick fix per @AnneT's suggestion (just set the line height for this custom text style to a unit-less 1.6 or similar for now), and then font sizes can be re-considered in the future.

If you want to support a range of relative text sizes in your feature in a way that will easily integrate with Codex font modes, I'd recommend taking a look at what the Growth Team did here: https://gerrit.wikimedia.org/r/c/mediawiki/extensions/GrowthExperiments/+/1133505. You can use tokens like font-size-xxx-large and line-height-xxx-large, and they will scale with the current font-mode.

(just set the line height for this custom text style to a unit-less 1.6 or similar for now), and then font sizes can be re-considered in the future.

By "this custom text style", do you mean the headers for lexemes? That's not gonna be enough, I'm afraid. This change affects all text in the page body for all pages in Vector-2022 (it just happens to be very noticeable in lexeme pages), as the screenshots I added in the description illustrate.

(just set the line height for this custom text style to a unit-less 1.6 or similar for now), and then font sizes can be re-considered in the future.

By "this custom text style", do you mean the headers for lexemes? That's not gonna be enough, I'm afraid. This change affects all text in the page body for all pages in Vector-2022 (it just happens to be very noticeable in lexeme pages), as the screenshots I added in the description illustrate.

Yes, sorry – I thought this was a Wikidata-specific feature but I was mistaken. We will post some patches in Vector, Minerva, and Monobook shortly to provide a work-around for now; the Vector and Monobook changes will need to be backported later today. Stay tuned for patches shortly.

@LucasWerkmeister or @jhsoby (or anyone with Wikidata familiarity) – is there an easy way to create one of these Lexeme lemmas in patchdemo so that I can test whether the fix is successful? I'm not very familiar with this part of Wikidata.

Change #1146703 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/skins/Vector@master] styles: Set override also to former value of `line-height-small` token

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

Change #1146704 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/skins/MonoBook@master] styles: Set override also to former value of `line-height-small` token

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

Test wiki created on Patch demo by EGardner (WMF) using patch(es) linked to this task:
https://patchdemo.wmcloud.org/wikis/574d2e0ab3/w/

@LucasWerkmeister or @jhsoby (or anyone with Wikidata familiarity) – is there an easy way to create one of these Lexeme lemmas in patchdemo so that I can test whether the fix is successful? I'm not very familiar with this part of Wikidata.

I don't think you need to check WikibaseLexeme specifically. This HTML snippet inserted on any wiki page should be enough:

<span style="font-size:350%;">Thijs is gtext!<br />This His Also TeXt</span>

(Looks fine on the patch demo!)

Change #1146703 merged by jenkins-bot:

[mediawiki/skins/Vector@master] styles: Set override also to former value of `line-height-small` token

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

Change #1146704 merged by jenkins-bot:

[mediawiki/skins/MonoBook@master] styles: Set override also to former value of `line-height-small` token

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

You can see the updated Lexeme page layout on Beta Wikidata with the corresponding patch applied (since it's been merged into master now):

https://wikidata.beta.wmflabs.org/wiki/Lexeme:L1

Screenshot 2025-05-15 at 1.21.32 PM.png (2,390×964 px, 206 KB)

It only happens for me when the text size is set to small.

It's also happening in MonoBook:

Bildschirmfoto_2025-05-14_15-40-30.png (679×61 px, 12 KB)

(from https://test.wikidata.org/wiki/Lexeme:L1?useskin=monobook)

I believe this was occurring before Codex 2.0.0-rc.1 as Codex line-height tokens aren't used in MonoBook at all. The following style is set in resources/screen-common.less that is the culprit:

.mw-body {
    line-height: 1.5em;
}

Change #1146726 had a related patch set uploaded (by Jdrewniak; author: VolkerE):

[mediawiki/skins/Vector@wmf/1.45.0-wmf.1] styles: Set override also to former value of `line-height-small` token

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

Change #1146726 merged by jenkins-bot:

[mediawiki/skins/Vector@wmf/1.45.0-wmf.1] styles: Set override also to former value of `line-height-small` token

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

Mentioned in SAL (#wikimedia-operations) [2025-05-15T21:00:32Z] <jdrewniak@deploy1003> Started scap sync-world: Backport for [[gerrit:1146726|styles: Set override also to former value of line-height-small token (T389900 T394305)]]

Mentioned in SAL (#wikimedia-operations) [2025-05-15T21:06:09Z] <jdrewniak@deploy1003> jdrewniak: Backport for [[gerrit:1146726|styles: Set override also to former value of line-height-small token (T389900 T394305)]] synced to the testservers (see https://wikitech.wikimedia.org/wiki/Mwdebug). Changes can now be verified there.

Mentioned in SAL (#wikimedia-operations) [2025-05-15T21:19:18Z] <jdrewniak@deploy1003> Finished scap sync-world: Backport for [[gerrit:1146726|styles: Set override also to former value of line-height-small token (T389900 T394305)]] (duration: 18m 45s)

This has been successfully backported to Vector legacy/Vector 2022! Thanks @Jdrewniak for this step here.

@​LucasWerkmeister or @jhsoby (or anyone with Wikidata familiarity) – is there an easy way to create one of these Lexeme lemmas in patchdemo so that I can test whether the fix is successful? I'm not very familiar with this part of Wikidata.

For future reference, you’d have to create an Item on Special:NewItem first, then create a new Lexeme on Special:NewLexeme with that Item as the language and lexical category.

Test wiki on Patch demo by EGardner (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmcloud.org/wikis/574d2e0ab3/w/

CCiufo-WMF claimed this task.
CCiufo-WMF reassigned this task from CCiufo-WMF to Volker_E.

I've filed T396263: `--line-height-small` is not defined today, it looks like something else is breaking? I wouldn't expect these specific settings to not end up at the end user...?