Page MenuHomePhabricator

Section headings within tables break in Wikipedia iOS app
Closed, ResolvedPublic

Assigned To
Authored By
CKoerner_WMF
Sep 7 2018, 6:42 PM
Referenced Files
F27245713: Screen Shot 2018-11-16 at 4.37.42 PM.png
Nov 17 2018, 12:39 AM
F27245710: Screen Shot 2018-11-16 at 4.37.38 PM.png
Nov 17 2018, 12:39 AM
F27245652: Screen Shot 2018-11-16 at 4.15.55 PM.png
Nov 17 2018, 12:25 AM
F27245650: Screen Shot 2018-11-16 at 4.15.51 PM.png
Nov 17 2018, 12:25 AM
F25695093: IMG_1512.PNG
Sep 7 2018, 6:42 PM
F25695092: Screen Shot 2018-09-07 at 1.34.27 PM.png
Sep 7 2018, 6:42 PM

Description

Summary
When section headings (== Foo == or <h2>Bar</h2>) are wrapped inside of a table they break

Description

Tables lose their formatting in the iOS app when there is a section heading wrapped inside of table markup. The results is an errant table structure with no content, followed by unformatted comment beneath.

iOS app:

IMG_1512.PNG (1×750 px, 135 KB)

Able to reproduce here with either wikitext markup or HTML:

https://en.wikipedia.org/w/index.php?title=User:CKoerner_(WMF)/sandbox&oldid=858514082

Original report: https://en.wikipedia.org/wiki/Wikipedia:Village_pump_%28technical%29#Headers_within_tables_fail_on_mobile

The table appears fine on the mobile web:

Screen Shot 2018-09-07 at 1.34.27 PM.png (725×409 px, 89 KB)

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

One potetnial stop gap would be to just strip this styling.

Spike results:

I copied the example page wiki text into a new page testwiki > Bird5

Upon viewing the resulting html I suspected nesting headings *inside* content (the table) like this would be impossible for article section data endpoints (mobileview, mcs) to parse and deliver. Imagine more than one section heading is nested inside a table - how would the endpoint deliver render-able html for each section since the html for each section is nested inside a single table?


To see if my suspicions were true I hit each endpoint for the sample page:

MOBILEVIEW
https://test.wikipedia.org/w/api.php?action=mobileview&page=Bird5&format=json&noheadings=true&prop=sections%7Ctext%7Clastmodified%7Clastmodifiedby%7Clanguagecount%7Cid%7Cprotection%7Ceditable%7Cdisplaytitle%7Cthumb%7Cdescription%7Cimage%7Crevision%7Cnamespace&sectionprop=toclevel%7Cline%7Canchor%7Clevel%7Cnumber%7Cfromtitle%7Cindex&sections=all&thumbwidth=640

Screen Shot 2018-11-16 at 4.15.51 PM.png (1×914 px, 305 KB)

^ you can see mobileview confirms my suspicion - instead of delivering data for the 2 sections, it has incorrectly delivered data for 3 sections:

  • the first of which contains the opening table, tbody, tr and td tags, but no actual section content
  • the second of which contains some html from the middle of the table
  • the third contains bits from the end of the table

MCS
https://test.m.wikipedia.org/api/rest_v1/page/mobile-sections/Bird5

Screen Shot 2018-11-16 at 4.15.55 PM.png (1×914 px, 279 KB)

^ you can see mcs has failed in a completely different way. instead of delivering data for the 2 sections of the article it has returned:

  • a single section of data, with both sections crammed inside it

Conclusions:

  • I'd argue section headings should never be nested inside tables or article section data endpoints will struggle to cleanly deliver atomic (and structurally complete) section data.
  • Additionally, there's not really a way for apps to fix this - by the time the article section data is received by apps it's already mangled.
  • Article section data API's also won't be able to easily fix this - they can't deliver atomic sections if headings (the section separators) are allowed inside structural elements (like tables) required for proper layout (gets even more crazy if more than one section heading appeared inside a single table).

For reference, here's a page where the headings are NOT nested in tables, which lays out fine (I just pulled the headings out of the tables):
https://test.wikipedia.org/wiki/Bird6

MOBILEVIEW

Screen Shot 2018-11-16 at 4.37.38 PM.png (1×921 px, 305 KB)

  • correctly delivers each of the 2 sections

MCS

Screen Shot 2018-11-16 at 4.37.42 PM.png (1×921 px, 291 KB)

  • correctly delivers each of the 2 sections