1539793 - The place of icons and picture is invalid on RTL languages

Status: RESOLVED WONTFIX

(developer.mozilla.org Graveyard :: Design, enhancement, P1)

Description

[Amir Farsi]

What did you do?

1.Goto a RTL version of MDN ste. eg: https://developer.mozilla.org/fa/  

2.Look at small arrows on side of  Web Technologies; Learn web development; Developer Tools

3.Look at cat that shows "Help us build better CSS debugging tools!
Which CSS bugs are the worst?
Take the Survey"

4-Look at location of Arrow of "Sign Up now" button

5-From Refrences and Guides menu, look at more docs

What happened?

2-Small arrows are on their related texts.
3-Cat is located on it's related text.
4-Arrow of sign up now button is located on left side of button like LTR texts.
5-Three dots are beforer More docs menu in English text! Like:
...More docs
As result: localizers repeteated using ... before text on ntranslation of More docs as well as english

What should have happened?

2-Arrows should be mirrored and located on left side of their related texts on RTL languages. Look at samples:
LTR: Text --->
Correct RTL: <--- متن
Invalid RTL(Current status): م--تن->

3-Cat should be located on left side of it's related rectangle.

4-Small arrow on sign up now button should go to left side of button and txt should goto right side of button and arrow should be like <--- not --->

5-...More docs in English shold be More docs... and Localizers should move three dots aftre more docs like fixed english phrase.

Is there anything else we should know?

Currently, MDN main page is RTL but it's details like buttons, content of DIV tags are not RTL.

Comment 1

[Amir Farsi]

Attachment: Location of invalid and true RTL layout of MDN main page

Comment 2

[Amir Farsi]

Attachment: Location of invalid and true RTL layout of Support MDN banner on main page

In addition:
1-Please make Support MDN banner compatible with RTL too like attached image.
2-Please make it localizable:
"Help us build better CSS debugging tools!
Which CSS bugs are the worst?
Take the Survey"

Comment 3

[Janet Swisher]

This has improved, but still is lacking in a few points.

2. Arrows are on the correct side of the text they go with, but still point to the right; should be pointing to the left.
3. The CSS debugging survey panel is gone now, so hard to judge that one; now we have a "Build in the browser" which is untranslated but right-aligned (and left-punctuated, as ".Build in the browser").
4. Arrow of the sign-up box is on the left side of the box, but still points to the right; should point to the left.
5. "...more docs" is incorrect in English both typographically and semantically. Typographically, it should be "More docs ...". The convention in English for UI menus is that "Menuitem ..." opens a dialog rather than directly doing the "Menuitem" operation. In this case, "More docs" opens a web page, just like the other items in the menu, so it doesn't really make sense to have the "..." at all. Removing the three dots from the English version would be more correct as well as simplifying translation.

Regarding the additional points:

1. "Support MDN" banner is gone, and current "MDN Survey" banner does not appear in /fa. Supporting localization of banners is probably a separate issue.
2. These strings are localizable via https://pontoon.mozilla.org/fa/mdn/ For example, "Build in the Browser." is in Pontoon, but is not translated into Persian (https://pontoon.mozilla.org/fa/mdn/all-resources/?status=missing&string=193489).

Comment 4

[BMO Automation]

MDN Web Docs' bug reporting has now moved to GitHub. From now on, please file content bugs at https://github.com/mdn/sprints/issues/ and platform bugs at https://github.com/mdn/kuma/issues/.