Re: RTL Guidelines
Jared Wein <[email protected]> Fri, 7 Feb 2020 11:36:23 -0500
| Newsgroups | gmane.comp.mozilla.firefox.devel,gmane.comp.mozilla.localization |
|---|---|
| Message-ID | <CAMq7brETtFjaFyPcwP5H1eH_74LGjboMBgQDy03+=r1P46=jcA@mail.gmail.com> |
--===============1792655526716640961== Content-Type: multipart/alternative; boundary="000000000000c3ca36059dfeffb9" --000000000000c3ca36059dfeffb9 Content-Type: text/plain; charset="UTF-8" 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 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 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 > [email protected] > https://mail.mozilla.org/listinfo/firefox-dev > --000000000000c3ca36059dfeffb9 Content-Type: text/html; charset="UTF-8" Content-Transfer-Encoding: quoted-printable <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 class=3D"gmail_quote">= <div dir=3D"ltr" class=3D"gmail_attr">On Thu, Feb 6, 2020 at 7:04 PM Tim Ng= uyen <<a href=3D"mailto:[email protected]">[email protected]</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 dir= =3D"ltr"><div>Hello folks,</div><div><br></div><div>There has been a signif= icant number of RTL bugs found in the last few months in the Firefox UI. Fr= om what I can gather, they were mostly due lack of awareness on specific si= tuations 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 ma= de 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 inclu= des things I personally didn't know about before, so I do encourage giv= ing it a read:</div><div><br></div><div><a href=3D"https://developer.mozill= a.org/docs/Mozilla/Developer_guide/RTL_guidelines" target=3D"_blank">https:= //developer.mozilla.org/docs/Mozilla/Developer_guide/RTL_guidelines</a></di= v><div><br></div><div>When developing a new part of the UI or making signif= icant UI changes, please do make sure you manually 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,sa= ns-serif">) to make Firefox accessible for all languages :)<br></span></spa= n></code></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 d= ir=3D"auto"><code><span></span></code></span></div><div><div><div><br></div= ><div>Cheers,<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> --000000000000c3ca36059dfeffb9-- --===============1792655526716640961== 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 --===============1792655526716640961==--