Page MenuHomePhabricator
Create Task
Maniphest T162360

Differences in Parsoid HTML compared to PHP parser output breaks javascript that is tailored ot the PHP parser output
Closed, ResolvedPublic
Actions

Description

If I compare the html from
https://fr.wikipedia.org/wiki/Lyon
and
https://fr.wikipedia.org/w/api.php?action=visualeditor&format=json&paction=parse&page=Lyon&oldid=136092841
There are differences.
For example, look for the file Metropole_of_Lyon_map-locator-blank-2015.svg and it's surrounding HTML.

The difference in my example make the GeoBox_Init() from common.js to fail in the version from the api.

Details

SubjectRepoBranchLines +/-
Bump parsoid to 0.16.0-a14mediawiki/vendormaster+851 -828
Use caption as alt on imgs when not present and caption isn't visiblemediawiki/services/parsoidmaster+185 -177
Bump parsoid to 0.16.0-a12mediawiki/vendormaster+304 -358
Add forward compatibility to avoid serializing alt from captionmediawiki/services/parsoidmaster+62 -8
Set alt in galleries, despite caption being visiblemediawiki/coremaster+39 -35
Customize query in gerrit

Related Objects
Search...

Event Timeline

Skylsmoi created this task.Apr 6 2017, 1:48 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptApr 6 2017, 1:48 PM
Skylsmoi updated the task description. (Show Details)Apr 6 2017, 1:49 PM
Kelson subscribed.Apr 6 2017, 1:50 PM

To add a bit of context information: We need that information to get an offline version of the page in which the javascript works too.

Wilfredor subscribed.Apr 6 2017, 1:55 PM
• ssastry renamed this task from differences in html served by wikipedia API to Parsoid doesn't add JS modules to <head> in its output.Apr 6 2017, 2:11 PM
• ssastry triaged this task as Medium priority.
• ssastry subscribed.
This comment was removed by • ssastry.
• ssastry mentioned this in T139852: Expose `modules` and `jsconfigvars` from Parsoid's parse API when converting wikitext.Apr 6 2017, 2:15 PM
Skylsmoi added a comment.Apr 6 2017, 3:44 PM

About the new title, I would like to point that my issue is that this span (for example) :

<span typeof="mw:Image" data-mw='{"caption":"Voir sur la carte administrative de la&lt;span typeof=\"mw:Entity\" data-parsoid=&#39;{\"src\":\"&amp;amp;nbsp;\",\"srcContent\":\" \",\"dsr\":[5765,5771,null,null]}&#39;> &lt;/span>Métropole de Lyon"}'>

is returned by the api but is not in the source of https://fr.wikipedia.org/wiki/Lyon

• ssastry renamed this task from Parsoid doesn't add JS modules to <head> in its output to Differences in Parsoid HTML compared to PHP parser output breaks javascript that is tailored ot the PHP parser output.Apr 6 2017, 7:26 PM

Oops .. sorry, I was hasty there and moving too fast. I renamed the title to reflect what I understand now.

But, this is a known difference in Parsoid and PHP parser output. We do plan to adapt PHP parser image output to be similar to Parsoid output. For now, I don't have an immediate solution for you besides making changes to the JS code to handle Parsoid image markup properly. So, this would require a change to the JS code.

• ssastry merged a task: T161350: Incorrect image sizes in Parsoid's gallery output (compared to the php native extension's output).Apr 9 2017, 10:06 PM
• ssastry added a subscriber: Arlolra.
Kelson added a comment.Apr 13 2017, 5:56 AM

@Skylsmoi May you please tell what exactly breaks (or making in not working well) the Javascript running on the French article about "Lyon"? I heard from you that the problem was a missing "alt" attribute but here it seems you talk about a surnumerous "spam" node? Could you confirm this here and maybe share the problematic DOM node (both API and Parsoid)?

Kelson added a parent task: T162855: Offline Parsoid based offline layout.Apr 13 2017, 6:13 AM
Skylsmoi added a comment.Apr 13 2017, 8:34 AM

Here are the 2 html versions for the maps of the "location" part of the top right .infobox_v2

<div style="position:relative;;">
    <a href="/wiki/Fichier:Metropole_of_Lyon_map-locator-blank-2015.svg" class="image" title="Voir sur la carte administrative de la&#160;Métropole de Lyon">
        <img alt="Voir sur la carte administrative de la&#160;Métropole de Lyon" src="//upload.wikimedia.org/wikipedia/commons/thumb/6/68/Metropole_of_Lyon_map-locator-blank-2015.svg/280px-Metropole_of_Lyon_map-locator-blank-2015.svg.png" width="280" height="371" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/6/68/Metropole_of_Lyon_map-locator-blank-2015.svg/420px-Metropole_of_Lyon_map-locator-blank-2015.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/6/68/Metropole_of_Lyon_map-locator-blank-2015.svg/560px-Metropole_of_Lyon_map-locator-blank-2015.svg.png 2x" data-file-width="966" data-file-height="1280" />
    </a>
    <div style="position:absolute;top:47.437844611528%;left:41.486805555555%;width:0px;height:0px;margin:0;padding:0;line-height:0px;background-color:transparent;">
        <div style="position:relative;top:-8px;left:-8px;width:16px;height:16px;background-color:transparent;">
            <a href="/wiki/Fichier:City_locator_14.svg" class="image">
                <img alt="City locator 14.svg" src="//upload.wikimedia.org/wikipedia/commons/thumb/5/5d/City_locator_14.svg/16px-City_locator_14.svg.png" width="16" height="16" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/5/5d/City_locator_14.svg/24px-City_locator_14.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/5/5d/City_locator_14.svg/32px-City_locator_14.svg.png 2x" data-file-width="16" data-file-height="16" />
            </a>
        </div>
        <div style="position:relative;top:-16px;">
            <div style="font-size:90%;position:relative;top:-0.65em;left:-12.6em;text-align:right;width:12em;line-height:1.2em;">
                <span class="toponyme">Lyon</span>
            </div>
        </div>
    </div>
</div>

Here, the <img> tag contains a 'alt' attribute which is used by the js to generate the links to switch maps

<div style=\"position:relative;;\">
    <span typeof=\"mw:Image\" data-mw='{\"caption\":\"Voir sur la carte administrative de la&lt;span typeof=\\\"mw:Entity\\\" data-parsoid=&#39;{\\\"src\\\":\\\"&amp;amp;nbsp;\\\",\\\"srcContent\\\":\\\"\u00a0\\\",\\\"dsr\\\":[5765,5771,null,null]}&#39;>\u00a0&lt;/span>M\u00e9tropole de Lyon\"}'>
        <a href=\"./Fichier:Metropole_of_Lyon_map-locator-blank-2015.svg\">
            <img resource=\"./Fichier:Metropole_of_Lyon_map-locator-blank-2015.svg\" src=\"//upload.wikimedia.org/wikipedia/commons/thumb/6/68/Metropole_of_Lyon_map-locator-blank-2015.svg/280px-Metropole_of_Lyon_map-locator-blank-2015.svg.png\" data-file-width=\"966\" data-file-height=\"1280\" data-file-type=\"drawing\" srcset=\"//upload.wikimedia.org/wikipedia/commons/thumb/6/68/Metropole_of_Lyon_map-locator-blank-2015.svg/560px-Metropole_of_Lyon_map-locator-blank-2015.svg.png 2x, //upload.wikimedia.org/wikipedia/commons/thumb/6/68/Metropole_of_Lyon_map-locator-blank-2015.svg/420px-Metropole_of_Lyon_map-locator-blank-2015.svg.png 1.5x\" height=\"371\" width=\"280\"/>
        </a>
    </span>
    <div style=\"position:absolute;top:47.437844611528%;left:41.486805555555%;width:0px;height:0px;margin:0;padding:0;line-height:0px;background-color:transparent;\">
        <div style=\"position:relative;top:-8px;left:-8px;width:16px;height:16px;background-color:transparent;\">
            <span class=\"mw-default-size\" typeof=\"mw:Image\">
                <a href=\"./Fichier:City_locator_14.svg\">
                    <img resource=\"./Fichier:City_locator_14.svg\" src=\"//upload.wikimedia.org/wikipedia/commons/thumb/5/5d/City_locator_14.svg/16px-City_locator_14.svg.png\" data-file-width=\"16\" data-file-height=\"16\" data-file-type=\"drawing\" srcset=\"//upload.wikimedia.org/wikipedia/commons/thumb/5/5d/City_locator_14.svg/32px-City_locator_14.svg.png 2x, //upload.wikimedia.org/wikipedia/commons/thumb/5/5d/City_locator_14.svg/24px-City_locator_14.svg.png 1.5x\" height=\"16\" width=\"16\"/>
                </a>
            </span>
        </div>
        <div style=\"position:relative;top:-16px;\">
            <div style=\"font-size:90%;position:relative;top:-0.65em;left:-12.6em;text-align:right;width:12em;line-height:1.2em;\">
                <span class=\"toponyme\">Lyon</span>
            </div>
        </div>
    </div>
</div>

As you can see, the <a> tags are wrapped in <span> tag containing data but the <img> tag does not contains the 'alt' attribute

Arlolra added a comment.Apr 13 2017, 12:40 PM

The reasoning for that is in T50958

• Fjalapeno subscribed.Apr 21 2017, 7:42 PM

Mentioned this in the other ticket, but check out the android app for JS that works with Parsoid

• ssastry edited projects, added Parsoid-Read-Views-Deprecated-Project; removed Parsoid.Jun 10 2019, 8:09 PM
Aklapper edited projects, added Parsoid; removed Parsoid-Read-Views-Deprecated-Project.Feb 29 2020, 5:14 PM
Arlolra moved this task from Needs Triage to Backlog on the Parsoid board.Mar 2 2020, 4:27 PM
LGoto moved this task from Backlog to Needs Investigation on the Parsoid board.May 8 2020, 4:21 PM
• ssastry claimed this task.Jun 15 2020, 5:01 PM
Arlolra removed • ssastry as the assignee of this task.Mar 24 2021, 10:49 PM
Arlolra moved this task from Needs Investigation to Needs Triage on the Parsoid board.Mar 24 2021, 10:54 PM
Kelson added a project: affects-Kiwix-and-openZIM.Mar 25 2021, 7:55 AM
Arlolra moved this task from Needs Triage to Media Structure on the Parsoid board.Mar 25 2021, 4:59 PM
Kelson moved this task from TRIAGE to NICE TO HAVE on the affects-Kiwix-and-openZIM board.May 3 2021, 7:34 AM
Arlolra edited projects, added Parsoid-Media-Structure; removed Parsoid.Jul 13 2021, 5:14 PM
MBinder_WMF added a project: Parsoid-Read-Views-Deprecated-Project (Phase 0 - Parsoid-Media-Structure).Sep 3 2021, 9:30 PM
MBinder_WMF edited projects, added Parsoid; removed Parsoid-Read-Views-Deprecated-Project (Phase 0 - Parsoid-Media-Structure).Sep 3 2021, 9:37 PM
MBinder_WMF added a project: Parsoid-Read-Views (Phase 0 - Parsoid-Media-Structure).Sep 3 2021, 9:58 PM
Arlolra merged a task: T271157: https://fr.wikipedia.org/wiki/MediaWiki:Common.js makes use of image alt text, which Parsoid doesn't output.Sep 9 2021, 10:15 PM
Arlolra mentioned this in T297443: Add title/alt attributes from caption to media where caption isn't visible.Dec 9 2021, 10:49 PM
Arlolra moved this task from Backlog to Todo on the Parsoid-Read-Views (Phase 0 - Parsoid-Media-Structure) board.Dec 9 2021, 10:53 PM
Arlolra moved this task from Todo to In Progress on the Parsoid-Read-Views (Phase 0 - Parsoid-Media-Structure) board.Apr 14 2022, 11:33 PM
gerritbot added a comment.Jun 2 2022, 9:21 PM

Change 802643 had a related patch set uploaded (by Arlolra; author: Arlolra):

[mediawiki/services/parsoid@master] [WIP] Use caption as alt on imgs when not present and caption isn't visible

https://gerrit.wikimedia.org/r/802643

gerritbot added a project: Patch-For-Review.Jun 2 2022, 9:21 PM
Arlolra moved this task from In Progress to Code Review on the Parsoid-Read-Views (Phase 0 - Parsoid-Media-Structure) board.Jun 2 2022, 9:21 PM
gerritbot added a comment.Jun 7 2022, 10:20 PM

Change 803606 had a related patch set uploaded (by Arlolra; author: Arlolra):

[mediawiki/core@master] Set alt in galleries, despite caption being visible

https://gerrit.wikimedia.org/r/803606

gerritbot added a comment.Jun 8 2022, 4:06 PM

Change 803606 merged by jenkins-bot:

[mediawiki/core@master] Set alt in galleries, despite caption being visible

https://gerrit.wikimedia.org/r/803606

gerritbot added a comment.Jun 9 2022, 5:49 PM

Change 804404 had a related patch set uploaded (by Arlolra; author: Arlolra):

[mediawiki/services/parsoid@master] Add forward compatibility to avoid serializing alt from caption

https://gerrit.wikimedia.org/r/804404

gerritbot added a comment.Jun 10 2022, 4:44 PM

Change 804404 merged by jenkins-bot:

[mediawiki/services/parsoid@master] Add forward compatibility to avoid serializing alt from caption

https://gerrit.wikimedia.org/r/804404

gerritbot added a comment.Jun 13 2022, 7:37 PM

Change 805225 had a related patch set uploaded (by Arlolra; author: Arlolra):

[mediawiki/vendor@master] Bump parsoid to 0.16.0-a12

https://gerrit.wikimedia.org/r/805225

gerritbot added a comment.Jun 13 2022, 8:07 PM

Change 805225 merged by jenkins-bot:

[mediawiki/vendor@master] Bump parsoid to 0.16.0-a12

https://gerrit.wikimedia.org/r/805225

gerritbot added a comment.Jun 22 2022, 10:41 PM

Change 802643 merged by jenkins-bot:

[mediawiki/services/parsoid@master] Use caption as alt on imgs when not present and caption isn't visible

https://gerrit.wikimedia.org/r/802643

Arlolra moved this task from Code Review to To Deploy on the Parsoid-Read-Views (Phase 0 - Parsoid-Media-Structure) board.Jun 22 2022, 11:20 PM
Maintenance_bot removed a project: Patch-For-Review.Jun 22 2022, 11:30 PM
gerritbot added a comment.Jun 23 2022, 6:53 PM

Change 808051 had a related patch set uploaded (by Arlolra; author: Arlolra):

[mediawiki/vendor@master] Bump parsoid to 0.16.0-a14

https://gerrit.wikimedia.org/r/808051

gerritbot added a project: Patch-For-Review.Jun 23 2022, 6:53 PM
gerritbot added a comment.Jun 23 2022, 9:09 PM

Change 808051 merged by jenkins-bot:

[mediawiki/vendor@master] Bump parsoid to 0.16.0-a14

https://gerrit.wikimedia.org/r/808051

Maintenance_bot removed a project: Patch-For-Review.Jun 23 2022, 9:31 PM
Arlolra moved this task from To Deploy to To Verify on the Parsoid-Read-Views (Phase 0 - Parsoid-Media-Structure) board.Jun 28 2022, 5:33 PM
Arlolra closed this task as Resolved.Jul 6 2022, 10:37 PM
Arlolra claimed this task.

In version 2.5.0 of Parsoid's output, the alt attribute is now on the img, <img alt="Voir sur la carte administrative de la métropole de Lyon" ...

From https://fr.wikipedia.org/api/rest_v1/page/html/Lyon/136092841

<div class="geobox">
<div><small>Géolocalisation sur la carte<span typeof="mw:DisplaySpace"> </span>: <a rel="mw:WikiLink" href="./Métropole_de_Lyon" title="Métropole de Lyon">métropole de Lyon</a></small></div>
<table class="DebutCarte" style="width:auto; margin:0; border:none; border-spacing:0; padding:0; text-align:center; ">
<tbody><tr><td style="border:none; padding:0"><div style="position:relative;;"><span class="noviewer" typeof="mw:File" data-mw='{"caption":"Voir sur la carte administrative de la&lt;span typeof=\"mw:Entity\" data-parsoid=&apos;{\"src\":\"&amp;amp;#32;\",\"srcContent\":\" \"}&apos;> &lt;/span>métropole de Lyon"}'><a href="./Fichier:Metropole_of_Lyon_map-locator-blank-2015.svg" class="mw-file-description" title="Voir sur la carte administrative de la métropole de Lyon"><img alt="Voir sur la carte administrative de la métropole de Lyon" resource="./Fichier:Metropole_of_Lyon_map-locator-blank-2015.svg" src="//upload.wikimedia.org/wikipedia/commons/thumb/6/68/Metropole_of_Lyon_map-locator-blank-2015.svg/280px-Metropole_of_Lyon_map-locator-blank-2015.svg.png" decoding="async" data-file-width="966" data-file-height="1280" data-file-type="drawing" height="371" width="280" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/6/68/Metropole_of_Lyon_map-locator-blank-2015.svg/420px-Metropole_of_Lyon_map-locator-blank-2015.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/6/68/Metropole_of_Lyon_map-locator-blank-2015.svg/560px-Metropole_of_Lyon_map-locator-blank-2015.svg.png 2x"/></a></span>
<div style="position:absolute;top:calc(47.437844611528% - 8px);left:calc(41.486805555555% - 8px);line-height:0;background-color:transparent;"><span class="noviewer" typeof="mw:File"><a href="./Fichier:City_locator_14.svg" class="mw-file-description"><img resource="./Fichier:City_locator_14.svg" src="//upload.wikimedia.org/wikipedia/commons/thumb/5/5d/City_locator_14.svg/16px-City_locator_14.svg.png" decoding="async" data-file-width="16" data-file-height="16" data-file-type="drawing" height="16" width="16" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/5/5d/City_locator_14.svg/24px-City_locator_14.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/5/5d/City_locator_14.svg/32px-City_locator_14.svg.png 2x"/></a></span></div><div style="position:absolute;font-size:90%;top:47.437844611528%;transform:translateY(-50%);right:calc(100% - 41.486805555555% + 0.6em);text-align:right; "><span class="toponyme">Lyon</span></div>
</div></td></tr></tbody></table>
</div>
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits