Page MenuHomePhabricator

Large tables created by editors are not responsive
Open, HighPublic

Description

Background

Many tables generated by wikitext are bigger than 320px. On a 320px screen, this causes the entire viewport to grow to the size of the table and can break the experience of the entire site. This stretches the search bar and makes the mobile site very unusable.

On Vector 2022 the large tables often overlap sidebar menus for similar reasons.

Current solution (hack)

Ths current hack only applies to mobile. It potentially could be applied to desktop.

Currently the mobile site deals with this situation by forcing the table to have width 100% and adding overflow scrolling (which is enabled by making the table a block element). This solution is not perfect as overflow-x is not fully supported across all mobile devices. To see an example of the sort of table this rule targets the table on the presidental election results page [2] provides a good example.

Per T342505 this also interferes with voice-over capabilities.

Side note: We may also want to make it possible for templates in the short term to opt out of the styling hack e.g. using a nohacks class

Long term solution

Ideally it should be possible for templates to define their own behaviour for tables on mobile devices.

There are various responsive tables [1] techniques but there is no one fit for all solution. Note some tables [2] do not even scale well on even desktop devices.

It should be possible for template editors to use media queries to style tables differently with the closure of the templating RFC [3] so that we can kill this table hack.

Other solutions are welcomed.

Further information/history

See T66516: table width is marked !important and T38936: Tables in mobile

[1] http://css-tricks.com/responsive-data-tables/
[2] https://en.m.wikipedia.org/wiki/List_of_United_States_presidential_election_results_by_state#section_1
[3] https://www.mediawiki.org/wiki/Requests_for_comment/Allow_styling_in_templates


Version: unspecified
Severity: normal

Details

Reference
bz64577

Related Objects

StatusSubtypeAssignedTask
Openovasileva
InvalidNone
ResolvedTgr
ResolvedAnomie
Resolved tstarling
Resolvedcoren
ResolvedAnomie
DeclinedBUG REPORTNone
ResolvedAnomie
ResolvedEsanders
ResolvedEsanders
Resolvedssastry
ResolvedAnomie
ResolvedCKoerner_WMF
Resolvedjhsoby
ResolvedTgr
DeclinedTgr
Resolvedcoren
ResolvedAnomie
ResolvedTgr
DeclinedNone
Resolvedssastry
ResolvedTgr
ResolvedTgr
ResolvedTgr
Resolved Deskana
ResolvedCKoerner_WMF
Resolved Whatamidoing-WMF
ResolvedTgr
ResolvedTgr
ResolvedTgr
ResolvedUrbanecm
ResolvedTgr
ResolvedTacsipacsi
ResolvedTgr
ResolvedCKoerner_WMF
ResolvedJdlrobson
Openovasileva

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
Jhernandez added a project: Design.

@Nirzar any thoughts? Is there any design input on this?

I've been playing with a little idea for a while now.. and I now have some small JS to play this idea.

The problem with the current overflow, is that it is very hard for users to figure out that this is something that they can scroll, especially on iOS where you don't get to see scrollbars by default. Normally i'd say add inset borders/shadows, but due to the nature of display:table, this is actually quite hard to achieve.

So my idea was.. What if use a bit of JS, to show a <-> arrow on top, for a little while, when elements come into view that are scrollable. The following JS fragment allows you to experiment with this idea. It's not perfect, i just tossed the first image i could find in there. Ideally it would use a bit of a horizontal wobble to indicate the interactivity better.
Unfortunately, there are no user styles on mobile, so you will have to use your browsers capabilities to add this on the fly (using console, or browser scripts).

1$.getScript( 'https://cdnjs.cloudflare.com/ajax/libs/jquery.appear/0.3.3/jquery.appear.js' ).done( function() {
2 function isElementOverflowing( el ) {
3 var isOverflowing = el.clientWidth < el.scrollWidth - 2;
4 return isOverflowing;
5 }
6 $( function() {
7 $('table').appear()
8 .on( 'appear', function( e, $affected ) {
9 $affected.not('.overflow-indicator').each( function( index, element ) {
10 if ( isElementOverflowing( element ) ) {
11 $(element).addClass( 'overflow-indicator' );
12 }
13 } );
14 } ).on ('disappear', function( e, $affected ) {
15 $affected.removeClass( 'overflow-indicator' );
16 } );
17 } );
18} );
19mw.util.addCSS( '@keyframes fadeOut {from {opacity: 1;} to { opacity: 0; } } .overflow-indicator:before { content: ""; position:absolute; margin: 10px; width: 36px;height:36px; animation: fadeOut 3s ease-in forwards; background-size: cover; background-image:url("data:image/png;base64,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") } ' );

Volker_E renamed this task from Tables do not render well under 320px to Tables do not render well at 320px viewport.Mar 18 2020, 4:59 PM

To summarize my positions on this, with the years of trying to find proper solutions for this issue.

  1. We should have an indicator that something is overflowing and is swipeable, because mobile devices don't have always on scrollbars
  2. Finding a generic solution to make arbitrary data sized spreadsheets (which is basically what we are talking about here) working on a mobile device has been tried. They simply don't exist. Responsive tables are a known problem area and all solutions are custom solutions, either requiring significant editor input, or only suited to certain types of tables. (and forget about row/colspans).
  3. We have so many tables that custom solutions (based on editor input) might as well not be implemented. The gains will be too small to make a significant impact on the general problem.
  4. Personally I do think that having some sort of 'make this table fullscreen' option is required. Last time I tried that though, I ran into the problem of the viewport of the original document limiting the zoom and size of the render surface. I think you would need to have a dialog open and then insert an iframe into that dialog with a different viewport and then clone the table into that temporary document. But with CSS and JS to be taken into account, that too quickly becomes complex.

I'm suggesting another long-term solution to this problem (T258382):

  • When the reader taps on a table rotate the screen and show the table in fullscreen. Don't show any other content of the table except eventually preceding or succeeding text that is directly referring to the table / descriptive of the table. The tap could be anywhere on the table but there should be a small image that indicates that the table has to be taped to be viewed better / that a tap makes it go fullscreen.

This is implemented in apps like the YouTube app where you can click a button to make a video go fullscreen and rotate the screen.

This is solution different from enabling/requiring editors to use media queries for tables and would not have its problems. Tables don't look well and are hard to navigate on smartphones if they aren't displayed in landscape mode in almost all cases. There could be a css class for tables to prevent such default behavior of tables if e.g. the table width is very small and/or whether or not the width is too small for the display could be detected automatically.

I agree with @TheDJ when he wrote "Personally I do think that having some sort of 'make this table fullscreen' option is required."


Furthermore, I would suggest (also at T258382):

  • When the table is displayed in rotated-screen-fullscreen show a large horizontal scrollbar at the bottom if some columns are still cut off. Maybe the scrollbar could be hidden until the user taps the screen. Maybe it would be best to allow scrolling horizontally by swiping left and right - if no scrollbar is displayed within the field of view to indicate that columns are cut off and that scrolling is possible there should be some other small icon/image, like a small arrow, to indicate this.

I agree with @TheDJ when he wrote: "We should have an indicator that something is overflowing and is swipeable".


While the fullscreen feature for tables may be relatively easily implementable in the Wikipedia mobile apps, it may be a bit harder for mobile browsers. Currently, I only know of two ways it could possibly be solved: CSS/JS tricks and a version of the "Screen Orientation API" - roughly outlined here.

Jdlrobson renamed this task from Tables do not render well at 320px viewport to Tables are not responsive.Aug 4 2022, 10:32 PM
Jdlrobson added a subscriber: AlexisJazz.

Now also becoming a problem in Vector as we make the skin more responsive.

Jdlrobson renamed this task from Tables are not responsive to Large tables created by editors are not responsive.Aug 4 2022, 10:33 PM

Now also becoming a problem in Vector as we make the skin more responsive.

And because you're capping the content width at some 1100px. (NB I have no personal issue with the max width, but let's be clear that this is also an issue on desktop now.)

As for the problem, it needs to have a skin-level solution. TemplateStyles, though apparently linked to this task, will not fix the vast majority of tables.

Probably need to do a state of the art review, but just from a look around Minerva is basically already there.

The only generic skin-level solution that can be applied here is to wrap a large table in a div container with horizontal overflow as suggested on the recommendations page.

It's not a perfect solution, but given the discussions we've had over the last 10 years around this, it's likely our only solution given wholescale template updates are hard. This would however require a change in how the parser outputs tables.

The only generic skin-level solution that can be applied here is to wrap a large table in a div container with horizontal overflow as suggested on the recommendations page.

Both Minerva and Timeless have solutions for this problem. That is what I mean by generic skin-level. Adding a div with overflow auto to every wide table, and even the the not-wide tables (to support mobile) is not a feasible solution given the quantity of tables.

@Xaosflux Minerva does not have a solution for this problem. If you view Minerva > 720px you'll see the content breaks out of the UI [1]. Those skins only have solutions for mobile resolutions (which only apply up to 720px)

Screen Shot 2023-01-29 at 7.54.23 AM.png (1×2 px, 286 KB)

Timeless wraps table in a div.content-table using JavaScript [2] to get around this issue, which is what we've been advocated on the editor size (try disabling JS to see the issue). We could do this in the server-side in the parser in T66577#8133045 but that is a disruptive change as it would break the ability for those tables to be sticky as well as floated so allowing editors to do that side steps this problem.

In short we definitely do not have solutions to this problem on the skin level.

Screen Shot 2023-01-29 at 7.57.47 AM.png (690×2 px, 202 KB)

[1] https://en.wikipedia.org/w/index.php?title=Brahmic_scripts&oldid=1136168431&useskin=minerva
[2]https://en.wikipedia.org/w/index.php?title=Brahmic_scripts&oldid=1136168431&useskin=timeless

Here's the Timeless JS solution: https://gerrit.wikimedia.org/g/mediawiki/skins/Timeless/+/f2c42dc84bde1c8d51c86d77358c24100be571a4/resources/main.js#47

This issue is causing the table of contents to be forced to appear above the article on certain tablets (pictured here: Samsung tablet)

image.png (1×800 px, 369 KB)

Adding a wrapper would be potentially disruptive in a number of ways:

  • Parsoid inherits some tricky "element fostering" behavior around tables from the HTML spec; we'd have to carefully work through how those fostered elements should interact with the added wrapper, both in the wt2html direction and the reverse.
  • VE would have to handle the wrapper. It could elect to strip the wrapper, like it currently does with the <section> tags emitted by Parsoid, but then the new table formatting wouldn't apply when using VE. If that's undesirable, the wrappers would have to be re-added in the widget VE uses for tables.
  • Potentially breaks client-side gadgets (sticky table headers, sortable tables, collapsable tables, etc) which will have to be updated to accomodate the new wrapper.

There are also implementation issues if this is expected to apply to both the legacy parser output and parsoid; the content transform team would obviously prefer to do this work only in a single code base.

That said, it's not too dissimilar to how we're handling the migration to new-style <media> output, and to how VE handles <section> tags. So adding a wrapper here is not unthinkable. If we go down this route I would like to try to add some more rigorous semantics/expectations around wrapper classes (there are a number of other wrappers proposed in https://www.mediawiki.org/wiki/Heading_HTML_changes ) by adding a consistent marker of some kind, perhaps rel="mw:Wrapper", to indicate that the wrapper has no semantic meaning and can be stripped by an editor without harming the html-to-wikitext round trip.

Not really sure why you pinged Xaosflux, but he's as good as any to have subscribed. :)

Minerva does not have a solution for this problem. If you view Minerva > 720px you'll see the content breaks out of the UI [1]. Those skins only have solutions for mobile resolutions (which only apply up to 720px)

Screen Shot 2023-01-29 at 7.54.23 AM.png (1×2 px, 286 KB)

That seems more like an artifact of Minerva having been moved to a proper skin somewhere a couple years ago and should have been assessed then, not because Minerva doesn't have a solution.... I am aware of an issue with Minerva's solution in that display: block for table was not accessibly-kosher at some point (https://www.accessibility-developer-guide.com/examples/tables/layout-changes/ last updated in 2018 as an example; https://adrianroselli.com/2018/02/tables-css-display-properties-and-aria.html updated 2022).

Timeless wraps table in a div.content-table using JavaScript [2] to get around this issue, which is what we've been advocated on the editor size (try disabling JS to see the issue).

Yes, I am aware of the Timeless solution, having filed the task that made it as reasonably pretty as it is today (T269912). I hadn't considered what a no-JS environment would be seeing though, but this would still be an improvement for Most People. (NB there are some things that script does that cause bad display of massive whitespace and I don't know why.)

We could at least start with supporting .wikitable rather than all tables.

We could do this in the server-side in the parser

Doing some part of it in core would be good if possible (yes, I see cscott's comment).

it would break the ability for those tables to be sticky

I saw stickiness the other day as having issues, at least for overflow-y. I'm not certain that's an issue for overflow-x, which is the problem child here, but I haven't looked? And anyway, Timeless's solution does work even with the stickiness supported by the gadget of interest. (You might be referring to some other sticky thing.)

as well as floated so allowing editors to do that side steps this problem.

I have no idea what you're referencing here regarding floating being disabled by this kind of solution. Timeless's solution does seem to make it work, but it's calculating whether the overflow solution is even needed (which might be viable in some world with pure CSS with container queries and some calc() in the near future, likely after some potential point at which core changes).

Of course, for the most part floating tables aren't the issue at hand in this task; they're categorically smaller than their container. When they aren't smaller, they don't need to float anyway.

Jdlrobson added a subscriber: ovasileva.

@ovasileva given page tools makes this worse should this be high and planned for this quarter/fiscal year?

ovasileva raised the priority of this task from Medium to High.Mar 10 2023, 7:01 PM
ovasileva moved this task from Not ready to estimate to Current Quarter on the Web-Team-Backlog board.

We need to talk to CT team about this one.

Jdlrobson moved this task from Incoming to Current Fiscal Year on the Web-Team-Backlog board.

Next step: T334528
This will allow us to understand the issue better and how to fix it.