Re: RTL Guidelines

[Jared Wein]

Thank you Tim and Itiel. This is very helpful to have documented.

I have always wondered why video controls are not mirrored but I believe it
comes down to the prevalence of LTR video controls and RTL users just
accepting this "incorrect" view.

In other cases we would normally flip a progress bar so this case stands
out.

Cheers,
Jared



On Thu, Feb 6, 2020, 7:04 PM Tim Nguyen <ntim...@gmail.com> wrote:

> Hello folks,
>
> There has been a significant number of RTL bugs found in the last few
> months in the Firefox UI. From what I can gather, they were mostly due lack
> of awareness on specific situations that are more complex than just using
> CSS logical properties, but sometimes due to lack of testing.
>
> Itiel has made a great job at filing+fixing many bugs and wrote up a guide
> based on his experience. This guide describes in detail what things should
> be mirrored, text handling in RTL and tips on how to spot/fix/test RTL
> issues. It includes things I personally didn't know about before, so I do
> encourage giving it a read:
>
> https://developer.mozilla.org/docs/Mozilla/Developer_guide/RTL_guidelines
>
> When developing a new part of the UI or making significant UI changes,
> please do make sure you manually test RTL for issues (by setting
> intl.l10n.pseudo to bidi) to make Firefox accessible for all languages :)
>
> I hope that this guide will be helpful, and please do let me or Itiel know
> if you've got any feedback on it.
>
> Cheers,
> Tim,
> Firefox Desktop Theme peer
>
> _______________________________________________
> firefox-dev mailing list
> firef...@mozilla.org
> https://mail.mozilla.org/listinfo/firefox-dev
>

[Robert B]

I’m not sure if this is deliberate or was an oversight...
In
https://developer.mozilla.org/docs/Mozilla/Developer_guide/RTL_guidelines
At the beginning, there is a list of ”do and don’t do”s of which the first
two are
DoDon't do
margin-inline-start
<https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-start>:
5px; margin-left:
5px;
padding-inline-end
<https://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-end>:
5px; padding-right:
5px;
Then, about 2/3 down the page there is a code example using padding-left:
and padding-right: instead of padding-inline-start: and padding-in-line-end:

Are these exceptions to the RTL rules or was it a typo?

Cheers,
Robi

[Robert B]

Tim, thank you for the clarification. I somehow overlooked that.

Cheers,
Robi


On Fri, Feb 7, 2020 at 07:17 Tim Nguyen <ntim...@gmail.com> wrote:

> Hi Robert,
>
> I've explained this in the paragraph before the code example:
>
> "However, since the direction in LTR, this also means that the start/end
> properties will correspond to left/right respectively, which is probably
> not what you expect. This means you have to use extra rules instead of
> using logical properties."
>
> This is an exception when you have an LTR element inside a RTL context.
> I'll clarify this in the doc.
>
> Cheers,
> Tim

[Tim Nguyen]

[Tim Nguyen]

[Jared Wein]

I have taken a quick look through the Firefox UI and believe the following
issues are present with RTL support (tested with intl.l10n.pseudo=bidi in
about:config, then restarting):

1. The "Show Sidebars" icon in the navigation toolbar should be flipped in
RTL.
2. The arrows for submenus in the menupopup for the Library button in the
navigation toolbar are facing the wrong way.
3. The arrows for submenus in the Firefox menu are facing the wrong way.
4. The "external link" icon for Firefox Monitor and Firefox Send, found
within the Account submenu of the Firefox menu are facing the wrong way.
5. The "send tab to device" icon in the Account submenu of the Firefox menu
is facing the wrong way.
6. The magnifying glass in about:config is flipped when we normally
wouldn't flip an icon that represents something from the physical world
that is held by the majority of people in their right hand. In the linked
MDN page has this topic in the "what to mirror" section, though the
sub-referenced "material design" page mentions this as something to "not to
mirror".
7. The background for the tracker doorhanger's expanded info section in the
location bar should have the shield on the left side in RTL.
8. The "Print" icon should be flipped since the paper coming out of the
printer shows directional text.
9. The Pocket menu does not appear to have any RTL support.
10. The "Pin tab", "Send tab to device", and "share" icons in the "..."
menu of the location bar are facing the wrong way.
11. The "Go" arrow in the search box that appears after the user starts
typing is facing the wrong way in RTL.
12. The "Last Page", "Next Page", "Previous Page", "First Page" icons in
Print Preview are facing the wrong way in RTL.
13. The submenu arrows in the Site Information popup are facing the wrong
way.

Icons I'm not sure about:
1. The "protections report" icon shows a graph with the Y axis on the left
side. Should this be flipped for RTL?

Many of these would make good-first-bugs for people to mentor. Can someone
look through this list and let me know if I got any of them wrong?

Thanks,
Jared

[Reza Habibi]

Hello Jared,

I’ll review them. We solved some of them before. As I can remember I
prepared some RTL guidelines for Firefox focus and Firefox for android
before. I think we have to prepare a new one for this case.

Bests,
Reza

> _______________________________________________
> dev-l10n mailing list
> dev-...@lists.mozilla.org
> https://lists.mozilla.org/listinfo/dev-l10n
>

[Jared Wein]

Thanks Itiel,

9. Yes, you're right. I looked at it wrong when writing this up.
10. Well, if we think about moving something "forward", then I would assume
that it should follow the direction of locale text.
14. Yes you're right, the axis are showing the data in the correct quadrant.

Cheers,
Jared

On Sat, Feb 8, 2020 at 1:19 PM Itiel Yossefian <itie...@walla.co.il>
wrote:

> Jared, thanks for testing!
>
> It seems that `intl.l10n.pseudo` is a bit buggy atm (at least, for the
> sake of testing RTL), and most of your mentions are a non-issue on a real
> RTL build or when testing with `intl.uidirection`, so I'll address your
> valid mentions only.
> I'll file bugs for fixing intl.l10n.pseudo.
>
> 5. The icon does face the "right way" when testing with
> `intl.uidirection`, but either way I don't think this matters for RTL. I
> mean, the direction in which data comes wirelessly into a device can be
> from either direction...
> 6. That's bug 1529091
> <https://bugzilla.mozilla.org/show_bug.cgi?id=1529091>. The MDN page
> meant to mirror the magnifying glass icon only when it is *originally*
> rendered as if it being held by someone left-handed (see it's linked icon).
> Across the Firefox LTR UI, there is inconsistency with this icon. Some
> render it as left handed and others as right handed. I'm not sure how most
> of world actually hold a magnifying glass, but I think this should be
> unified across the UI.
> But that's a topic for different discussion, I guess :)
> 7. I think you're looking for bug 1539633
> <https://bugzilla.mozilla.org/show_bug.cgi?id=1539633>.
> 8. Huh, never thought of that, thanks. Will file a bug about that. Now
> that you mention it, the same can be said about the Reader View icon...
> 9. Can you elaborate? Tested also with `intl.l10n.pseudo` and it seems to
> look fine. Was fixed in bug 1279230
> <https://bugzilla.mozilla.org/show_bug.cgi?id=1279230> and bug 1594833
> <https://bugzilla.mozilla.org/show_bug.cgi?id=1594833>.
> 10. See #5 for the "Send tab to device"; "Pin" looks fine when testing
> with `intl.uidirection`. I'm not sure about the "Share" icon... It's not
> like you're sharing the tab to the left or to the right :)
> 14. Good question about the protections report icon. I think it's fine
> as-is because the way it looks now, all the numbers can be in the positive
> section, while if you'll mirror the icon, they'll be in the
> negative-positive section. I don't think you can have negative numbers of
> trackers :)
>
> Thanks again!
> Itiel
>
>
> ב פבר׳ 7, 2020 18:36, Jared Wein כתב: