Section headings within tables break in Wikipedia iOS app
Open, NormalPublic

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:

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:

Restricted Application added a project: Wikipedia-iOS-App-Backlog. · View Herald TranscriptSep 7 2018, 6:42 PM
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
JMinor triaged this task as Normal priority.Oct 29 2018, 6:57 PM
JMinor added a subscriber: JMinor.Nov 15 2018, 8:19 PM

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

Mhurd added a comment.EditedNov 17 2018, 12:25 AM

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

^ 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

^ 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).
Mhurd added a comment.EditedNov 17 2018, 12:39 AM

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

  • correctly delivers each of the 2 sections

MCS

  • correctly delivers each of the 2 sections