Page MenuHomePhabricator

Hebrew Wikipedia problem with tables and captions in Minerva
Open, Needs TriagePublic

Description

In small screens, minerva breaks tables and captions and set them as block. (see below code from minerva)
The code comment isn't clear, but the outcome is undesired as you can see in this example (important: change the screen to small, remove the explicit display:table and display:table-caption from the page [can be identified visually with lavender background])
The template currently explicitly override the settings of Minerva.

It looks like this was introduced in T184221 (10 months ago) and originally in T170344 (in different way). Possibly the issue is for table within table for which it is probably not required to override the display.

https://en.m.wikipedia.org/w/load.php?debug=1&lang=he&modules=skins.minerva.content.styles&only=styles&skin=minerva
(I find the code comment good to explain HOW but not WHY and to get the relevant tasks I had to dig with blames)

// These are only intended for smaller screens.
// This avoids having to undo them from another media query,
// by putting the original in a media query instead.
// This also avoids having a reset with too-high specificity, which
// would break unrelated styles from core and extensions.
@media all and ( max-width: @width-breakpoint-tablet ) {
	.content {
		table {
			display: block;
			width: 100% !important;
		}

		caption {
			display: block;
		}
	}
}

Event Timeline

eranroz created this task.Feb 6 2019, 9:34 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptFeb 6 2019, 9:34 PM
eranroz updated the task description. (Show Details)Feb 6 2019, 9:36 PM

This isn't mysterious. This (setting caption and table as display block) is intentional and the fundamental way responsive tables work and an industry standard [1] - essentially we're forcing tables not to behave like tables until a reasonable breakpoint is reached. It's been live for much longer than the patch you point to (circa 2012). It's necessary for tables of data and certainly is desired.

In the example I'm seeing, it looks like some local overrides exist, and display flex is being used so I'm not 100% sure problem you are referring to here.


Possibly T168861...?

Please can you elaborate what this bug is about (preferably with screenshots), as right now it's not clear what problem you are reporting.

[1] https://css-tricks.com/responsive-data-tables/

Jdlrobson renamed this task from Minerva breaks tables and captions in smaller screens mysteriously to Hebrew Wikipedia problem with tables and captions in Minerva.Feb 6 2019, 9:44 PM
eranroz added a comment.EditedFeb 6 2019, 9:48 PM

I'm referring to $('table table caption') and $('table table') in:
https://he.m.wikipedia.org/wiki/%D7%99%D7%97%D7%96%D7%A7%D7%90%D7%9C_%D7%96%D7%95%D7%A0%D7%90%D7%91%D7%A0%D7%93


[after removing custom CSS that override minerva: $('table table').css('display', '') ]
or
https://he.m.wikipedia.org/wiki/%D7%90%D7%91%D7%99%D7%97%D7%99_%D7%9E%D7%A0%D7%93%D7%9C%D7%91%D7%9C%D7%99%D7%98

(Browser: Chromium 71.0.3578.80)

You are using inline styles to override these rules and correct the problem and that's perfectly fine and correct. I encourage doing that. AS a result I don't see a bug here. You are working within the limits of the system and finding ways to make it work how you expect without breaking the general case.

There might be an argument for a generic rule that ensures nested tables (tables within tables) do not apply the display rules, but I'd want to see many examples of broken templates and right now I'm only seeing one use case the infobox template.

There might be an argument for a generic rule that ensures nested tables (tables within tables) do not apply the display rules, but I'd want to see many examples of broken templates and right now I'm only seeing one use case the infobox template.

This is good point - I did a quick check in some major languages and couldn't find other examples. I see the following options:

  1. Keep this task as "Avoid overriding the display for nested table in Minerva" and wait for more examples before going further to adding CSS rule for it.
  2. Mark this task as invalid, and convert the internal table into div (invalid due to https://www.mediawiki.org/wiki/Recommendations_for_mobile_friendly_articles_on_Wikimedia_wikis#Avoid_tables_for_anything_except_data )

@eranroz we should probably update 2 with guidelines for nested tables. I worry if we leave this ticket open/mark it as invalid this important conversation will get lost! At least that way we can use the talk page to continue this discussion. What do you think?

eranroz added a comment.EditedMar 9 2019, 8:17 AM

Added some documentation in https://www.mediawiki.org/w/index.php?title=Recommendations_for_mobile_friendly_articles_on_Wikimedia_wikis&type=revision&diff=3130219&oldid=3085673 (if you think this is too detailed /disagree with it don't hesitate to rollback or rephrase it)