Page MenuHomePhabricator

".mw-hiero-table td { vertical-align: middle; }" is overridden when embedded in other tables.
Closed, ResolvedPublic

Description

The rule that ensures vertical centering:

.mw-hiero-table td {
    vertical-align: middle;
}

...is overridden when hieros are embedded in another table, such as infobox, which have their own vertical-align set. This is because rules set in Common.css override those in extension CSS (by being loaded later. A simple fix is to add specificallity, thus the rule should be changed to:

table.mw-hiero-table td {
    vertical-align: middle;
}

This ensures that blanket CSS rules (classes not attached to elements) do not override the extensions' CSS.

QA

  • Add following rule to MediaWiki:Common.css
.infobox td {
    vertical-align: top;
}

Expected:
They should be vertically center aligned.

Screen Shot 2023-01-30 at 1.25.46 PM.png (133×282 px, 7 KB)

Event Timeline

bzimport raised the priority of this task from to Medium.Nov 22 2014, 12:48 AM
bzimport added a project: WikiHiero.
bzimport set Reference to bz41869.
bzimport added a subscriber: Unknown Object (MLST).

Not sure how actively WikiHiero is maintained.
CC'ing its developer Guillaume, clarification welcome.

aoineko wrote:

Hi,
I'm not maintaining WikiHiero since some years (I was working on new hieroglyph system).
The CSS rule change seem OK for me. If anybody can commit it, it would be nice.

Change 880979 had a related patch set uploaded (by ಮಲ್ನಾಡಾಚ್ ಕೊಂಕ್ಣೊ; author: ಮಲ್ನಾಡಾಚ್ ಕೊಂಕ್ಣೊ):

[mediawiki/extensions/wikihiero@master] (T43869) td specificity to fix override when embed

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

Change 880979 had a related patch set uploaded (by Jdlrobson; author: ಮಲ್ನಾಡಾಚ್ ಕೊಂಕ್ಣೊ):

[mediawiki/extensions/wikihiero@master] td specificity to fix override when embedded in another table

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

Hey there! I'd be happy to review this patch but I need a little more context. Is there an example page on a production wiki that demonstrates this bug ?

@Jdlrobson: the bug can be seen using this markup -

{|class="infobox"
|-
|style="line-height:4em;"|  <hiero>q:rw-i-wA-p-A-d:r-t-A-H8</hiero>
|-
|}
{|class="wikitable"
|-
|style="line-height:4em;"| <hiero>q:rw-i-wA-p-A-d:r-t-A-H8</hiero>
|-
|}

infobox class applies this style for td -

.infobox td {
	vertical-align: top;
}

This causes hieroglyphs to get top aligned for tables with infobox class, messing up their display

Here's how it looks in jawiki - https://ja.wikipedia.org/w/index.php?title=利用者:ಮಲ್ನಾಡಾಚ್_ಕೊಂಕ್ಣೊ/sandbox&oldid=93598977

jawiki_hiero.png (741×1 px, 41 KB)

To fix it, many wikis use the below workaround in their MediaWiki:Common.css -

table.mw-hiero-table td {
	vertical-align: middle;
}

Here's how the same markup looks in enwiki, which uses the workaround - https://en.wikipedia.org/w/index.php?title=User:ಮಲ್ನಾಡಾಚ್_ಕೊಂಕ್ಣೊ/sandbox&oldid=1136009056

enwiki_hiero.png (680×1 px, 47 KB)

This patch fixes the alignment bug in wikis that don't use this workaround and also lets us remove the workaround in these wikis - https://global-search.toolforge.org/?q=table%5C.mw%5C-hiero%5C-table+td+*%5C%7B%5B%5Ev%5D*%3Fvertical%5C-align%5C%3A+*middle&regex=1&ignorecase=1&namespaces=8&title=Common.css

Change 880979 merged by jenkins-bot:

[mediawiki/extensions/wikihiero@master] td specificity to fix override when embedded in another table

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

To fix it, many wikis use the below workaround in their MediaWiki:Common.css table.mw-hiero-table td { vertical-align: middle;}

To be honest, I believe this was the correct fix here, since infoboxes are maintained on-wiki.
The only reason I merged the patch here is the age of this task, the fact that very few articles use hieroglyphics, the fix is small and the fact we don't have a concept of global templates to widely distribute such a fix.

To fix it, many wikis use the below workaround in their MediaWiki:Common.css table.mw-hiero-table td { vertical-align: middle;}

To be honest, I believe this was the correct fix here, since infoboxes are maintained on-wiki.
The only reason I merged the patch here is the age of this task, the fact that very few articles use hieroglyphics, the fix is small and the fact we don't have a concept of global templates to widely distribute such a fix.

The fixier fix is T214233: Modernize the rendered HTML of the hieroglyphs, probably using CSS flex/grid in case the images can't be changed to real text. But that one takes real work. :)

Barring the fixier fix at some later point, I am pretty sure this will be unfixed when Infobox is in TemplateStyles, since that will be two classes at a minimum (.mw-parser-output .infobox-full-data) being more proximate to the end user to boot. The patch should probably add .mw-parser-output instead of table, though I realize it's merged now, so I guess I'm recommending a followup.

Most (nearly all?) wikis define infobox in common.css so the current patch is sufficient for them. When enwiki moves to templatestyles for infobox, any changes can be handled locally. I do agree T214233 is the long term fix.

Most (nearly all?) wikis define infobox in common.css so the current patch is sufficient for them.

I have been advising where possible that users (1st party and 3rd party) who copy our CSS do so and place it in the TemplateStyles page that's already included for a limited set of base styles. So, no, I don't think so.

This being my first foray at contributing code to MediaWiki, my understanding is that patches like these are supposed to work on a broad range of wikis. Per Jdlrobson's comment above, this was not the most ideal fix. I don't want to submit another patch which is doubtful to be accepted since it is for something that is not widely used yet. Anyone else is free to submit the patch or file another task.

@Malnadach_Konkno your patch was much appreciated! Thank you! I hope to see more patches from you elsewhere!
We can continue thinking about improving on this in T214233.

Change 887352 had a related patch set uploaded (by Steven Rawson; author: Steven Rawson):

[mediawiki/extensions/wikihiero@master] Followup per task to use .mw-parser-output instead of the element.

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

Change 887352 abandoned by Steven Rawson:

[mediawiki/extensions/wikihiero@master] Followup per task to use .mw-parser-output instead of the element.

Reason:

Realized this breaks Special:Hieroglyphs.

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