Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Page MenuHomePhabricator

Infobox title with apostrophe has erroneous line break.
Open, Needs TriagePublicBUG REPORT

Description

Steps to replicate the issue (include links if applicable):

What happens?:
The infobox title "I'm Glad My Mom Died" renders as "I\n'\nm Glad My Mom Died" (line breaks before and after the apostrophe). See https://imgur.com/a/YxGoiP1 for a screen shot.

What should have happened instead?:
There should not be line breaks before and after the apostrophe in the title in the infobox.

Software version (on Special:Version page; skip for WMF-hosted wikis like Wikipedia):

Other information (browser name/version, screenshots, etc.):
Reported at https://en.wikipedia.org/w/index.php?title=Template_talk:Infobox_book&oldid=1239302209#Mobile_app_bug

Event Timeline

Dbrant renamed this task from Infobox title with apostrophe has erroneous line break in Android app to Infobox title with apostrophe has erroneous line break..Aug 19 2024, 2:12 PM
Dbrant added a project: Content-Transform-Team.
Dbrant subscribed.

The problem doesn't exist on https://en.wikipedia.org/api/rest_v1/page/html/I'm_Glad_My_Mom_Died and the underlying HTML from Parsoid is:

I<span typeof="mw:Entity">'</span>m Glad My Mom Died <span class="Z3988" title="ctx_ver=Z39.88-2004&amp;rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&amp;rft.genre=book&amp;rft.btitle=&amp;rft.author=%5B%5BJennette+McCurdy%5D%5D&amp;rft.date=August+9%2C+2022&amp;rft.pub=%5B%5BSimon+%26+Schuster%5D%5D&amp;rft.pages=320"></span>

The PCS output is:

<caption class="infobox-title" style="font-size:125%; font-style:italic; padding-bottom:0.2em;">I<span>'</span>m Glad My Mom Died </caption>

There are no additional newlines in the PCS output.

This seems to be a CSS styling issue, and not a Parsoid/PCS bug. The root cause is this CSS rule:

.content .infobox > caption, .content .infobox > tbody {
  display: flex;
  flex-flow: column nowrap;
}

The flex layout has special handling for the children of the parent container (in this case the <caption>) but there are no children of the caption. Instead, any <span> or other tags, like <b> or <i>, are treated as the children and given a flex box layout inside of the caption.

The solution is either (1) fix the broken CSS rule, or (2) add a wrapper <span> inside the caption and including the entire title, so that portions of the title aren't broken up into separate flex box items.