Page MenuHomePhabricator

Conflict between WikiHiero Egyptian hieroglyphs and Minerva
Open, MediumPublic

Description

Steps to reproduce

  1. Open a wiki page
  2. Add a <hiero>A1</hiero> example (see syntax)
  3. Open the wiki page on mobile (in Minerva)

Expected behavior
The appearance on the mobile view should be similar to a desktop view:

Snímek z 2018-01-05 00-33-39.png (741×1 px, 57 KB)

upravěný.png (412×448 px, 31 KB)

Current behavior
The result is strangely spaced.

Snímek z 2018-01-05 00-32-57.png (741×1 px, 49 KB)

Possible cause
If you look into HTML source, you can see <hiero> tag is converted by parser to <table class="..."> tag. Therefore the CSS rule .content table {...} from Minerva is also applied to the hieroglyph and then it creates this strangely spaced behavior.

Snímek z 2018-01-05 00-47-05.png (741×1 px, 91 KB)

If you turn off the margin rule, it would look almost ok, if you turn off also the display:block rule, it would be correctly centerred as in desktop mode

Configuration
Firefox 57

Event Timeline

Niedzielski renamed this task from Conflict between WikiHiero and Minerva to Conflict between WikiHiero Egyptian hieroglyphs and Minerva.Jan 5 2018, 1:45 PM
Niedzielski updated the task description. (Show Details)
Niedzielski moved this task from Incoming to Needs Prioritization on the Web-Team-Backlog board.
Jdlrobson subscribed.

After investigating this, it very much looks like the WikiHiero extension is assuming Vector in the print styles its using. It shouldn't do this. This is not a bug with Minerva. The Minerva styles work for the majority of tables.

I suggest the addition of the following rule:

.mw-hiero-table {     margin: 0;  }

I'm not sure if this is in the scope of the reading web team as we don't maintain this extension but fix looks straightforward.

ovasileva triaged this task as Medium priority.Jan 23 2018, 1:33 AM

Change 406849 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/extensions/wikihiero@master] Fix display in Minerva skin with explicit margins

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

Tested the current patch (for review):

Screenshot-2018-1-30 Aa (architekt) – Wikipedie.png (1×640 px, 46 KB)
Screenshot-2018-1-30 Aa (architekt) – Wikipedie(2).png (1×640 px, 48 KB)
Screenshot-2018-1-30 Aa (architekt) – Wikipedie(4).png (1×640 px, 50 KB)
current resultresult with patchexpected result

not perfect, but better

Change 428868 had a related patch set uploaded (by Krinkle; owner: Krinkle):
[mediawiki/skins/MinervaNeue@master] Change strategy for undoing '.content table' overrides

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

Change 428868 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Change strategy for undoing '.content table' overrides

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

Change 406849 abandoned by Jdlrobson:
Fix display in Minerva skin with explicit margins

Reason:
I think the problem here is that hiero is outputting tables for an image. I'm not sure what design decisions led to that, but I think they should be revisited. I don't think Minerva should be expected to patch such a usage.

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

Now the same conflicts also with Vector. Everything is aligned left

@Dvorapa That is because of ChangeId I92acda377f4eaf7238888bb2fe2703b2f8aa5646 of T202359: [Regression pre-wmf.18] Toolbar does not get activated after pressing return and related T210695: Hieroglyphs are no longer inline

Translation, the extensions sucks and needs major work...

@Dvorapa That is because of ChangeId I92acda377f4eaf7238888bb2fe2703b2f8aa5646 of T202359: [Regression pre-wmf.18] Toolbar does not get activated after pressing return and related T210695: Hieroglyphs are no longer inline

Translation, the extensions sucks and needs major work...

Okay. I noticed it also has issues with some syntax, like missing hiero letter rotation (markup: A1\r ) or hidden cartouche ending (markup: 0> ), etc.