Page MenuHomePhabricator

Right-to-left issues in CX3 / Section translation
Open, MediumPublic

Description

I've tested Section Translation on sx.wmflabs.org on January 13, 2021, and found several RTL issues.

To test, I set the wiki UI language to Hebrew, and translated the section "Use" from the English Wikipedia article [[ASCII]] to Hebrew.

Most of the issues happen because content in the source language (English) is not explicitly marked as English and LTR with lang and dir HTML attributes. The lang and dir attributes for elements in both the source and the target language must always be set explicitly to ensure correct text direction (dir) and font selection (lang).

The text direction for every language code is available using ULS JavaScript API functions. I'm a bit less sure about CX3, which uses JavaScript somewhat differently from most other things on the MediaWiki platform, but on usual MediaWiki pages, a language's direction can be obtained by running something like $.uls.data.getDir( 'he' ).

In all the cases that I list below, adding lang="en" dir="rtl" to relevant elements using the browser's DOM inspector made the display correct and no further HTML or CSS was needed. This is different from many other MediaWiki components, where developers sometimes need to also add class="mw-content-ltr" or make some CSSJanus adjustments.

Here are the cases:

Section selector:

  • Foreign section title (<h5> elements under <ul class="sx-section-selector__sections-list">)

Section comparator:

  • Article title (<h4 class="sx-content-comparator-header__article-title">)
  • Section title (<h2 class="sx-content-comparator-header__section-title">)
  • Section title (<div "class="sx-content-comparator__content-header-title">)
  • Section content (<section class="sx-content-comparator__source-content">)

Translation view:

  • Article and section title: <div class="sx-sentence-selector__section-header"> (and <a> and <h2> under it; the direction can probably be applied to the top <div>)
  • Source content at the top on the gray background: <div class="sx-sentence-selector__section-contents">
  • Target editing area (VisualEditor component; see details below)

The target editing area is perhaps the most complicated thing to explain and to get right (I did a little video meeting with @ngkountas to discuss it). In CX1 and CX2, the logic is as follows:

  • The lang and dir attributes of the target language are applied to all the paragraphs in the target column.
  • If the source and the target language have the same direction (e.g. English and Spanish), the defaults are:
    • To fill the target paragraph with machine translation if it's available.
    • To fill the target paragraph with the source text if it's not available. (The user can change this default.)
  • If the source and the target language have different direction (e.g. English and Arabic), the defaults are:
    • If machine translation is available for this language pair, fill the paragraph with machine translation.
    • If machine translation is NOT available for this language pair, start with an empty paragraph.

The user can change all the above defaults. It means that when translating to a language without MT and choosing to pre-fill the paragraph with the source text, the source text will appear with the direction of the target language. It's not great, but I cannot think of any better solution than starting with an empty paragraph by default. Unless someone comes with something smarter, I recommend choosing the same logic for CX3.

Other issues:

  • Very minor: The blue checkmark button at the top before publishing doesn't need flipping for RTL. The same icon can be used for LTR and RTL.
  • In Firefox on Android, the web app is completely broken in RTL, although it works well if my UI language is English. The first step of choosing the section shows a mostly blank screen. In Chrome on Android it works as well as on the desktop, and in Firefox on desktop it's mostly good, too. Screenshot:

Screenshot_20210113-160207_Firefox.jpg (1×1 px, 104 KB)

  • The guidance wizard that appears after reviewing the sections and before starting the actual translation has some significant display issues. I experienced them on the desktop (Firefox and Chrome on macOS), in both desktop mode and mobile responsive mode, and also on Chrome on Android. The gray background is in the wrong location on the first screen, and in an even more wrong location in the second screen. Here's a screenshot:

Screenshot_2021-01-12 תרגום דף – SectionTranslation.png (1×1 px, 47 KB)

Thanks :)

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Pginer-WMF triaged this task as Medium priority.Feb 8 2021, 12:51 PM
Pginer-WMF edited projects, added SectionTranslation; removed ContentTranslation.
Pginer-WMF moved this task from Backlog to General infrastructure on the SectionTranslation board.

I created a separte ticket about the alignment issue of quick tutorial at T287853: Section translation: Alignment issue in quick tutorial view for desktop since it is not related to script directionality support.

Change 709413 had a related patch set uploaded (by Santhosh; author: Santhosh):

[mediawiki/extensions/ContentTranslation@master] SX: Do not flip the check mark icon

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

Change 709413 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@master] SX: Do not flip the check mark icon

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

Change 722542 had a related patch set uploaded (by Santhosh; author: Santhosh):

[mediawiki/extensions/ContentTranslation@master] SX: Provide lang and dir attributes for content compare screen elements

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

Change 722563 had a related patch set uploaded (by Santhosh; author: Santhosh):

[mediawiki/extensions/ContentTranslation@master] SX: Add lang and dir to proposed translation content container

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

Change 722587 had a related patch set uploaded (by Santhosh; author: Santhosh):

[mediawiki/extensions/ContentTranslation@master] SX: Add lang and dir attributes to Editor view

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

Change 722542 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@master] SX: Provide lang and dir attributes for content compare screen elements

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

Change 722563 merged by Nik Gkountas:

[mediawiki/extensions/ContentTranslation@master] SX: Add lang and dir to proposed translation content container

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

Change 722587 merged by Santhosh:

[mediawiki/extensions/ContentTranslation@master] SX: Add lang and dir attributes to Editor view

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

Change 723344 had a related patch set uploaded (by Santhosh; author: Santhosh):

[mediawiki/extensions/ContentTranslation@master] SX: Update dependencies

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

Change 723344 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@master] SX: Update dependencies

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

Change 738832 had a related patch set uploaded (by Santhosh; author: Santhosh):

[mediawiki/extensions/ContentTranslation@master] SX: Use CSS Logical properties for script directionality

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

Change 738832 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@master] SX: Use CSS Logical properties for script directionality

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

We have done several improvements in RTL support. I am sharing screenshots of all workflow steps in a hebrew wikipedia setup.

@Amire80 Can you please go through these screenshots and if there are issues, please mention along with the step name? Thanks!

Step numberStep descriptionScreenshot AScreenshot B
1Section translation dashboard
image.png (958×758 px, 78 KB)
2Article and language confirmation screen
image.png (938×758 px, 276 KB)
3Target and Source language selector
image.png (938×758 px, 13 KB)
image.png (938×758 px, 58 KB)
4Search for articles
image.png (958×758 px, 18 KB)
image.png (958×758 px, 74 KB)
5Section selector
image.png (938×758 px, 40 KB)
image.png (938×758 px, 43 KB)
6Preview existing source article
image.png (938×758 px, 149 KB)
7Preview existing target article
image.png (938×758 px, 258 KB)
image.png (938×758 px, 203 KB)
8Guidance
image.png (938×758 px, 23 KB)
image.png (938×758 px, 24 KB)
9Section selector
image.png (938×758 px, 163 KB)
10MT selector
image.png (938×758 px, 39 KB)
11Translation editor - VE
image.png (958×758 px, 53 KB)
12Target namespace selector for publishing
image.png (958×758 px, 44 KB)
13MT edit measurement after edit
image.png (958×758 px, 20 KB)
14Final translation editor and preview
image.png (958×758 px, 41 KB)
image.png (938×758 px, 50 KB)
15Publishing
image.png (958×758 px, 62 KB)

TL;DR: Severe problems in rows 9 and 14. Everything else falls into three buckets:

  • Totally fine.
  • Look OK in the screenshot, but need verification that RTL or LTR are set correctly.
  • OK in terms of RTL, but have some other issues, mostly minor (except row 7, which is a bit more serious).

More details in the table:

Step numberStep descriptionScreenshot AScreenshot BComments
1Section translation dashboard
image.png (958×758 px, 78 KB)
Looks good, but please verify that articles titles and descriptions have lang="en" dir="ltr"
2Article and language confirmation screen
image.png (938×758 px, 276 KB)
Looks good, but please verify that the language name "English" and the title of the section have lang="en" dir="ltr" (the title should be in an embedded <span>).
3Target and Source language selector
image.png (938×758 px, 13 KB)
image.png (938×758 px, 58 KB)
It looks usable, but the alignment of Arabic and Hebrew looks broken. In desktop ULS all language names are aligned to the same side.
4Search for articles
image.png (958×758 px, 18 KB)
image.png (958×758 px, 74 KB)
Looks good, but please verify that articles titles and descriptions have lang="en" dir="ltr". Also, it may be better to align them to the left, but it's really not a big deal.
5Section selector
image.png (938×758 px, 40 KB)
image.png (938×758 px, 43 KB)
Looks good, but please verify that English titles have lang="en" dir="ltr" and Hebrew titles have lang="he" dir="rtl" (explicit or inherited).
6Preview existing source article
image.png (938×758 px, 149 KB)
Looks good, but please verify that English title has lang="en" dir="ltr".
7Preview existing target article
image.png (938×758 px, 258 KB)
image.png (938×758 px, 203 KB)
It's kind of OK, but because of the wide infobox, just the first word of the first paragraph is seen. It would be better to show the infobox and not bother with trying to flow the text around it. It is probably a VE issue and not something unique to SX, but perhaps we can consider removing the infobox even in this preview. Since this happens in a lot of articles perhaps we could go the extra mile to make the user experience smoother.
8Guidance
image.png (938×758 px, 23 KB)
image.png (938×758 px, 24 KB)
Looks good.
9Section selector
image.png (938×758 px, 163 KB)
Very broken. Note that the English paragraphs are aligned to the right, and what's worse, the punctuation marks are on the wrong side of the paragraph. This needs at least lang="en" dir="ltr" on the whole English content, and perhaps some more adjustments.
10MT selector
image.png (938×758 px, 39 KB)
Incorrect: The original is shown as if it's Hebrew. It must be shown with lang="en" dir="ltr". Correct: The suggested machine translations are set to lang="he" dir="rtl", and it must remain like that.
11Translation editor - VE
image.png (958×758 px, 53 KB)
The content of the reference at the bottom is shown with Hebrew direction. The top English content looks OK, but please verify that it has lang="en" dir="ltr".
12Target namespace selector for publishing
image.png (958×758 px, 44 KB)
RTL looks OK, but I have a trivial comment about the strings: the first explanation text doesn't have a full stop in the end, and the other one does. It should be consistent.
13MT edit measurement after edit
image.png (958×758 px, 20 KB)
RTL is OK, but there's a weird unnecessary comma after the zero. I saw it in other languages, too, and I'm certain I already reported it, but I can't find it now...
14Final translation editor and preview
image.png (958×758 px, 41 KB)
image.png (938×758 px, 50 KB)
Screenshot A is very broken. Hebrew content is shown with LTR direction. It must be RTL.
15Publishing
image.png (958×758 px, 62 KB)
Looks good.

Change 741751 had a related patch set uploaded (by Santhosh; author: Santhosh):

[mediawiki/extensions/ContentTranslation@master] SX RTL support: Add correct lang and dir attributes

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

Change 741751 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@master] SX RTL support: Add correct lang and dir attributes

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

Change 742284 had a related patch set uploaded (by Santhosh; author: Santhosh):

[mediawiki/extensions/ContentTranslation@master] CX3 Build 0.1.0+20211129

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

Change 742284 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@master] CX3 Build 0.1.0+20211129

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

Change 742849 had a related patch set uploaded (by KartikMistry; author: Santhosh):

[mediawiki/extensions/ContentTranslation@wmf/1.38.0-wmf.9] CX3 Build 0.1.0+20211129

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

Change 742849 abandoned by KartikMistry:

[mediawiki/extensions/ContentTranslation@wmf/1.38.0-wmf.9] CX3 Build 0.1.0+20211129

Reason:

Need to fix Merge Conflict first.

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

Change 742849 restored by KartikMistry:

[mediawiki/extensions/ContentTranslation@wmf/1.38.0-wmf.9] CX3 Build 0.1.0+20211129

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

Change 742849 abandoned by KartikMistry:

[mediawiki/extensions/ContentTranslation@wmf/1.38.0-wmf.9] CX3 Build 0.1.0+20211129

Reason:

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