Page MenuHomePhabricator

Support templates in Section Translation
Open, MediumPublic

Description

Currently translating a section with templates is problematic in Section Translation. For example, translating the "reception" section for "Battleheart (video game)" from English to Spanish the mobile editor lets you translate the different cells of the review tables (note below that "score" is selected below with a suggested translation you can apply for it). However, after publishing a template is added instead (it is shown in red because the template definition is missing in the test server where it was published):

TranslatingPublished
sx.wmflabs.org_index.php_Special_ContentTranslation_page=Battleheart+%28video+game%29&from=en&to=es&sx=true(iPhone 6_7_8).png (1×750 px, 139 KB)
sx.wmflabs.org_index.php_title=Battleheart_(videojuego)&sx-published-section=Recepci%C3%B3n&sx-source-page-title=Battleheart%20(video%20game)&sx-source-language=en&sx-target-language=es(iPhone 6_7_8).png (1×750 px, 147 KB)

Looking at the source wikitext of the translated contents, the template was copied over form the source article, whithout any adaptation to create the corresponding template in the target language.
This shows the following problems:

  • Templates should be represented in the editor as a single unit. Users should be able to edit them with Visual Editor as a template. However, editing individual rendered contents should not be allowed since these may be generated from the template automatically and translating them has no effect (i.e., the "Score" header is not part of the parameters/information of the template).
  • The template added to the translation should be the equivalent one from the target wiki not copying the source one. In this case the Video game reviews template in English should be converted to the Crítica de videojuego template in Spanish.

Both aspects are supported by Content Translation (with their limitations and complexities: T102964), so we want to reuse the approaches.

Types of templates

  • For in-line templates (those inside the content) we can proceed by selecting the sentence in the usual way and the templates inside would be converted automatically. In case the conversion is not possible, they can be added as "plain text". That is, removing any html styling elements and preserving the contents (it may contain bold, links and other styling elements that can be edited in VE).
  • For block templates (presented as an independent paragraph, such as an infobox), we need to define how the suggested translation card looks like.

Related Objects

Event Timeline

Pginer-WMF moved this task from Backlog to Mobile editor on the SectionTranslation board.

This is not a hard problem to solve. The section to sentence splitting logic in SectionTranslation need some improvement.

  1. the convertNodeToSentences method in segmentedContentConverter currently checks for node.getElementsByClassName("cx-segment") to find sentences. Here the selector need more specific p > span.cx-segment will pick the sentences. And it will avoid picking segments that are nested deep inside a template content.
  2. If no sentences are found, check if the section is a block level template. This can be done as follows:
const isTransclusion = node =>
  node.attributes.about &&
  node.attributes.typeof &&
  node.getAttribute("typeof").match(/(^|\s)(mw:Transclusion|mw:Placeholder)\b/);

const isTransclusionFragment = node =>
  node.getAttribute("about") && node.dataset.mw;

//in convertNodeToSentences
const isBlockTemplate = Array.from(node.children).every(
    node => isTransclusion(node) || isTransclusionFragment(node)
  );
  1. If the section is a block level template, there is no need to look for segments inside it. The whole section is a single unit. Examples: Infobox, the movie review template as this ticket refers to. Just like how sentences are handled these blocks need to be handled. Perhaps we need to rename the class SectionSentence to more abstract one like TranslationUnit or TranslatableNode etc.
  2. A similar fix is need at SubSection.vue where we do cloneNode.getElementsByClassName("cx-segment")

For reference here is section with block level template looks like

<section data-mw-section-number="1" id="cxSourceSection4" rel="cx:Section">
<span typeof="mw:Transclusion" data-mw="{&quot;parts&quot;:[{&quot;template&quot;:{&quot;target&quot;:{&quot;wt&quot;:&quot;Video game reviews\n&quot;,&quot;href&quot;:&quot;./Template:Video_game_reviews&quot;},&quot;params&quot;:{&quot;MC&quot;:{&quot;wt&quot;:&quot;81/100<ref name=\&quot;Metacritic\&quot;>{{cite web |url=https://www.metacritic.com/game/ios/battleheart |title=Battleheart for iPhone/iPad Reviews |website=[[Metacritic]] |publisher=[[CBS Interactive]] |accessdate=27 June 2018}}</ref>&quot;},&quot;TA&quot;:{&quot;wt&quot;:&quot;{{rating|5|5}}<ref name=\&quot;TouchArcade\&quot;>{{cite web |url=https://toucharcade.com/2011/02/07/battleheart-review/ |title='Battleheart' Review – A Fabulous Real-Time RPG-Style Battle Game From the Creators of 'Zombieville USA' |last=Hodapp |first=Eli |date=7 February 2011 |website=[[TouchArcade]] |accessdate=27 June 2018}}</ref>&quot;}},&quot;i&quot;:0}}]}" data-ve-no-generated-contents="true" id="mwEA">&nbsp;</span>

<div about="#mwt10" class="video-game-reviews vgr-single" id="mwEQ" role="complementary" data-ve-ignore="true">
   <div class="vgr-title" id="45"><span class="cx-segment" data-segmentid="46">Reception</span></div>
   <table class="vgr-aggregators wikitable" id="47">
     <caption id="48"><span class="cx-segment" data-segmentid="49">Aggregate score</span></caption>
     <tbody id="50"><tr class="vgr-hrow" id="51"><th id="52" scope="col"><span class="cx-segment" data-segmentid="53">Aggregator</span></th><th id="54" scope="col"><span class="cx-segment" data-segmentid="55">Score</span></th></tr><tr id="56"><td class="vgr-center" id="57"><a class="cx-link" data-linkid="59" href="./Metacritic" rel="mw:WikiLink" title="Metacritic"><span class="cx-segment" data-segmentid="58">Metacritic</span></a></td><td id="60"><span class="cx-segment" data-segmentid="61">81/100<sup about="#mwt18" class="mw-ref reference" data-mw="{&quot;name&quot;:&quot;ref&quot;,&quot;attrs&quot;:{&quot;name&quot;:&quot;Metacritic&quot;},&quot;body&quot;:{&quot;id&quot;:&quot;mw-reference-text-cite_note-Metacritic-2&quot;}}" id="cite_ref-Metacritic_2-0" rel="dc:references" typeof="mw:Extension/ref"><a href="./Battleheart_(video_game)#cite_note-Metacritic-2" id="mwEg" style="counter-reset: mw-Ref 2;"><span class="mw-reflink-text" id="mwEw">[2]</span></a></sup></span></td></tr></tbody>
  </table>

  <table class="vgr-reviews wikitable" id="62">
    <caption class="vgr-stacked" id="63"><span class="cx-segment" data-segmentid="64">Review score</span></caption>
    <tbody id="65"><tr class="vgr-hrow" id="66"><th id="67" scope="col"><span class="cx-segment" data-segmentid="68">Publication</span></th><th id="69" scope="col"><span class="cx-segment" data-segmentid="70">Score</span></th></tr><tr id="71"><td class="vgr-center" id="72"><a class="mw-redirect cx-link" data-linkid="74" href="./TouchArcade" rel="mw:WikiLink" title="TouchArcade"><i><span class="cx-segment" data-segmentid="73">TouchArcade</span></i></a></td><td id="75"><span class="cx-segment" data-segmentid="76"><span role="img" style="white-space:nowrap" title="5/5 stars"><span data-mw="{&quot;caption&quot;:&quot;5/5<span typeof=\&quot;mw:Entity\&quot; data-parsoid='{\&quot;src\&quot;:\&quot;&amp;amp;#32;\&quot;,\&quot;srcContent\&quot;:\&quot; \&quot;}'> </span>stars&quot;}" typeof="mw:Image"><span><img data-file-height="110" data-file-type="drawing" data-file-width="108" height="11" resource="./File:Star_full.svg" src="//upload.wikimedia.org/wikipedia/commons/thumb/5/51/Star_full.svg/11px-Star_full.svg.png" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/5/51/Star_full.svg/17px-Star_full.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/5/51/Star_full.svg/22px-Star_full.svg.png 2x" width="11"></span></span><span typeof="mw:Image"><span><img alt="" data-file-height="110" data-file-type="drawing" data-file-width="108" height="11" resource="./File:Star_full.svg" src="//upload.wikimedia.org/wikipedia/commons/thumb/5/51/Star_full.svg/11px-Star_full.svg.png" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/5/51/Star_full.svg/17px-Star_full.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/5/51/Star_full.svg/22px-Star_full.svg.png 2x" width="11"></span></span><span typeof="mw:Image"><span><img alt="" data-file-height="110" data-file-type="drawing" data-file-width="108" height="11" resource="./File:Star_full.svg" src="//upload.wikimedia.org/wikipedia/commons/thumb/5/51/Star_full.svg/11px-Star_full.svg.png" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/5/51/Star_full.svg/17px-Star_full.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/5/51/Star_full.svg/22px-Star_full.svg.png 2x" width="11"></span></span><span typeof="mw:Image"><span><img alt="" data-file-height="110" data-file-type="drawing" data-file-width="108" height="11" resource="./File:Star_full.svg" src="//upload.wikimedia.org/wikipedia/commons/thumb/5/51/Star_full.svg/11px-Star_full.svg.png" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/5/51/Star_full.svg/17px-Star_full.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/5/51/Star_full.svg/22px-Star_full.svg.png 2x" width="11"></span></span><span typeof="mw:Image"><span><img alt="" data-file-height="110" data-file-type="drawing" data-file-width="108" height="11" resource="./File:Star_full.svg" src="//upload.wikimedia.org/wikipedia/commons/thumb/5/51/Star_full.svg/11px-Star_full.svg.png" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/5/51/Star_full.svg/17px-Star_full.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/5/51/Star_full.svg/22px-Star_full.svg.png 2x" width="11"></span></span></span><sup about="#mwt22" class="mw-ref reference" data-mw="{&quot;name&quot;:&quot;ref&quot;,&quot;attrs&quot;:{&quot;name&quot;:&quot;TouchArcade&quot;},&quot;body&quot;:{&quot;id&quot;:&quot;mw-reference-text-cite_note-TouchArcade-3&quot;}}" id="cite_ref-TouchArcade_3-0" rel="dc:references" typeof="mw:Extension/ref"><a href="./Battleheart_(video_game)#cite_note-TouchArcade-3" id="mwFA" style="counter-reset: mw-Ref 3;"><span class="mw-reflink-text" id="mwFQ">[3]</span></a></sup></span></td></tr></tbody>
  </table>
  </div>

</section>

There are still some details missing to complete the spec, but after initial discussions, the mockups below capture the general idea for supporting templates in Section Translation:

Template-support-overview.png (768×1 px, 202 KB)

Template-support-levels.png (768×1 px, 153 KB)