Re: Re: RTL Guidelines
Jared Wein <[email protected]> Sat, 8 Feb 2020 15:35:18 -0500
| Newsgroups | gmane.comp.mozilla.firefox.devel,gmane.comp.mozilla.localization |
|---|---|
| Message-ID | <CAMq7brGAsnCeDn3Y5OgxzWvEU+uh1xEPGiESCR+d3aTq7g-V7w@mail.gmail.com> |
--===============2877992057575035977== Content-Type: multipart/alternative; boundary="000000000000f1e576059e16734a" --000000000000f1e576059e16734a Content-Type: text/plain; charset="UTF-8" Content-Transfer-Encoding: quoted-printable 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 <itiel_yn8-MwYPzc5+820+JF/[email protected]> 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=3D1529091>. 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 mos= t > 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=3D1539633>. > 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=3D1279230> and bug 1594833 > <https://bugzilla.mozilla.org/show_bug.cgi?id=3D1594833>. > 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 positiv= e > 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 > > > =D7=91 =D7=A4=D7=91=D7=A8=D7=B3 7, 2020 18:36, Jared Wein =D7=9B=D7=AA=D7= =91: > > I have taken a quick look through the Firefox UI and believe the followin= g > issues are present with RTL support (tested with intl.l10n.pseudo=3Dbidi = in > about:config, then restarting): > > 1. The "Show Sidebars" icon in the navigation toolbar should be flipped i= n > 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 lef= t > side. Should this be flipped for RTL? > > Many of these would make good-first-bugs for people to mentor. Can someon= e > look through this list and let me know if I got any of them wrong? > > Thanks, > Jared > > > On Thu, Feb 6, 2020 at 7:04 PM Tim Nguyen <[email protected]> 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 la= ck > 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 guid= e > based on his experience. This guide describes in detail what things shoul= d > 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 kno= w > if you've got any feedback on it. > > Cheers, > Tim, > Firefox Desktop Theme peer > > _______________________________________________ > firefox-dev mailing list > [email protected] > https://mail.mozilla.org/listinfo/firefox-dev > > > > --000000000000f1e576059e16734a Content-Type: text/html; charset="UTF-8" Content-Transfer-Encoding: quoted-printable <div dir=3D"ltr"><div>Thanks Itiel,</div><div><br></div><div>9. Yes, you= 9;re right. I looked at it wrong when writing this up.</div><div>10. Well, = if we think about moving something "forward", then I would assume= that it should follow the direction of locale text.</div><div>14. Yes you&= #39;re right, the axis are showing the data in the correct quadrant.</div><= div><br></div><div>Cheers,</div><div>Jared<br></div><br><div class=3D"gmail= _quote"><div dir=3D"ltr" class=3D"gmail_attr">On Sat, Feb 8, 2020 at 1:19 P= M Itiel Yossefian <<a href=3D"mailto:itiel_yn8-MwYPzc5+820+JF/[email protected]">itiel_yn8@wa= lla.co.il</a>> wrote:<br></div><blockquote class=3D"gmail_quote" style= =3D"margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding= -left:1ex"><div><div dir=3D"rtl"><div dir=3D"ltr"> <div dir=3D"ltr">Jared, thanks for testing!</div> <div dir=3D"ltr">=C2=A0</div> <div dir=3D"ltr">It seems that `intl.l10n.pseudo` is a bit buggy atm (at le= ast, for the sake of testing RTL), and most of your mentions are a non-issu= e on a real RTL build or when testing with `intl.uidirection`, so I'll = address your valid mentions only.</div> <div dir=3D"ltr">I'll file bugs for fixing intl.l10n.pseudo.</div> <div dir=3D"ltr">=C2=A0</div> <div dir=3D"ltr">5. The icon does face the "right way" when testi= ng with `intl.uidirection`, but either way I don't think this matters f= or RTL. I mean, the direction in which data comes wirelessly into a device = can be from either direction...</div> <div dir=3D"ltr">6. That's <a href=3D"https://bugzilla.mozilla.org/show= _bug.cgi?id=3D1529091" target=3D"_blank">bug 1529091</a>. The MDN page mean= t to mirror the magnifying glass icon only when it is <b>originally</b> ren= dered 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 re= nder it as left handed and others as right handed. I'm not sure how mos= t of world actually hold a magnifying glass, but I think this should be uni= fied across the UI.</div> <div dir=3D"ltr">But that's a topic for different discussion, I guess := )</div> <div dir=3D"ltr">7. I think you're looking for <a href=3D"https://bugzi= lla.mozilla.org/show_bug.cgi?id=3D1539633" target=3D"_blank">bug 1539633</a= >.</div> <div dir=3D"ltr">8. Huh, never thought of that, thanks. Will file a bug abo= ut that. Now that you mention it, the same can be said about the Reader Vie= w icon...</div> <div dir=3D"ltr">9. Can you elaborate? Tested also with `intl.l10n.pseudo` = and it seems to look fine. Was fixed in <a href=3D"https://bugzilla.mozilla= .org/show_bug.cgi?id=3D1279230" target=3D"_blank">bug 1279230</a> and <a hr= ef=3D"https://bugzilla.mozilla.org/show_bug.cgi?id=3D1594833" target=3D"_bl= ank">bug 1594833</a>.</div> <div dir=3D"ltr">10. See #5 for the "Send tab to device"; "P= in" looks fine when testing with `intl.uidirection`. I'm not sure = about the "Share" icon... It's not like you're sharing th= e tab to the left or to the right :)</div> <div dir=3D"ltr">14. Good question about the protections report icon. I thi= nk 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 negativ= e numbers of trackers :)</div> <div dir=3D"ltr">=C2=A0</div> <div dir=3D"ltr">Thanks again!</div> <div dir=3D"ltr">Itiel</div> </div></div><blockquote style=3D"margin:0px 0px 20px;border-top:1px solid r= gb(224,224,224)"><br>=D7=91 =D7=A4=D7=91=D7=A8=D7=B3 7, 2020 18:36, Jared W= ein =D7=9B=D7=AA=D7=91:<blockquote style=3D"margin:0px 0px 20px;border-top:= 1px solid rgb(224,224,224)"> <div dir=3D"ltr"><div>I have taken a quick look through the Firefox UI and = believe the following issues are present with RTL support (tested with=20 intl.l10n.pseudo=3Dbidi in about:config, then restarting):</div><div><br></= div><div>1. The "Show Sidebars" icon in the navigation toolbar sh= ould be flipped in RTL.</div><div>2. The arrows for submenus in the menupop= up for the Library button in the navigation toolbar are facing the wrong wa= y.</div><div>3. The arrows for submenus in the Firefox menu are facing the = wrong way.</div><div>4. The "external link" icon for Firefox Moni= tor and Firefox Send, found within the Account submenu of the Firefox menu = are facing the wrong way.</div><div>5. The "send tab to device" i= con in the Account submenu of the Firefox menu is facing the wrong way.</di= v><div>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 t= he sub-referenced "material design" page mentions this as somethi= ng to "not to mirror".<br></div><div>7. The background for the tr= acker doorhanger's expanded info section in the location bar should hav= e the shield on the left side in RTL.</div><div>8. The "Print" ic= on should be flipped since the paper coming out of the printer shows direct= ional text.</div><div>9. The Pocket menu does not appear to have any RTL su= pport.</div><div>10. The "Pin tab", "Send tab to device"= ;, and "share" icons in the "..." menu of the location = bar are facing the wrong way.</div><div>11. The "Go" arrow in the= search box that appears after the user starts typing is facing the wrong w= ay in RTL.</div><div></div><div>12. The "Last Page", "Next P= age", "Previous Page", "First Page" icons in Print= Preview are facing the wrong way in RTL.</div><div>13. The submenu arrows = in the Site Information popup are facing the wrong way.<br></div><div><br><= /div><div>Icons I'm not sure about:</div><div>1. The "protections = report" icon shows a graph with the Y axis on the left side. Should th= is be flipped for RTL?</div><div><br></div><div>Many of these would make go= od-first-bugs for people to mentor. Can someone look through this list and = let me know if I got any of them wrong?</div><div><br></div><div>Thanks,</d= iv><div>Jared<br></div><div><br></div></div><br><div><div dir=3D"ltr">On Th= u, Feb 6, 2020 at 7:04 PM Tim Nguyen <<a href=3D"mailto:ntim.bugs@gmail.= com" target=3D"_blank">[email protected]</a>> wrote:<br></div><blockqu= ote style=3D"margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204= );padding-left:1ex"><div dir=3D"ltr"><div>Hello folks,</div><div><br></div>= <div>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.<br></div><div= ><br></div><div>Itiel has made a great job at filing+fixing many bugs and w= rote up a guide based on his experience. This guide describes in detail wha= t things should be mirrored, text handling in RTL and tips on how to spot/f= ix/test RTL issues. It includes things I personally didn't know about b= efore, so I do encourage giving it a read:</div><div><br></div><div><a href= =3D"https://developer.mozilla.org/docs/Mozilla/Developer_guide/RTL_guidelin= es" target=3D"_blank">https://developer.mozilla.org/docs/Mozilla/Developer_= guide/RTL_guidelines</a></div><div><br></div><div>When developing a new par= t of the UI or making significant UI changes, please do make sure you manua= lly test RTL for issues (by setting <span dir=3D"auto"><code><span>intl.l10n.pseudo<span style=3D"font-family:= arial,sans-serif"> to </span>bidi<span style=3D"font-family:arial,sans-seri= f">) to make Firefox accessible for all languages :)<br></span></span></cod= e></span></div><div><br><span dir=3D"auto"><code><span><span style=3D"font-= family:arial,sans-serif"></span></span></code></span></div><div>I hope that= this guide will be helpful, and please do let me or Itiel know if you'= ve got any feedback on it.<br><span dir=3D"auto"><code><span><span style=3D= "font-family:arial,sans-serif"></span></span></code></span><span dir=3D"aut= o"><code><span></span></code></span></div><div><div><div><br></div><div>Che= ers,<br></div><div>Tim,</div><div>Firefox Desktop Theme peer<br></div><div>= <br></div></div></div></div> _______________________________________________<br> firefox-dev mailing list<br> <a href=3D"mailto:[email protected]" target=3D"_blank">firefox-dev@mo= zilla.org</a><br> <a href=3D"https://mail.mozilla.org/listinfo/firefox-dev" rel=3D"noreferrer= " target=3D"_blank">https://mail.mozilla.org/listinfo/firefox-dev</a><br> </blockquote></div> <br></blockquote></blockquote><br></div> </blockquote></div></div> --000000000000f1e576059e16734a-- --===============2877992057575035977== Content-Type: text/plain; charset="us-ascii" MIME-Version: 1.0 Content-Transfer-Encoding: 7bit Content-Disposition: inline _______________________________________________ firefox-dev mailing list [email protected] https://mail.mozilla.org/listinfo/firefox-dev --===============2877992057575035977==--