Re: RTL Guidelines
Robert B <[email protected]> Fri, 7 Feb 2020 08:01:38 -0600
| Newsgroups | gmane.comp.mozilla.firefox.devel,gmane.comp.mozilla.localization |
|---|---|
| Message-ID | <CABr3MGKeeRcOHZxg6DMOB-x=hnqJitmFmMEEVweSYXB0msrtwA@mail.gmail.com> |
--===============3562676409761466523== Content-Type: multipart/alternative; boundary="000000000000b9b4d0059dfcd484" --000000000000b9b4d0059dfcd484 Content-Type: text/plain; charset="UTF-8" Content-Transfer-Encoding: quoted-printable Tim, thank you for the clarification. I somehow overlooked that. Cheers, Robi On Fri, Feb 7, 2020 at 07:17 Tim Nguyen <[email protected]> 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 > > On Fri, Feb 7, 2020 at 11:41 AM Robert B <[email protected]> wrote: > >> I=E2=80=99m not sure if this is deliberate or was an oversight... >> In >> https://developer.mozilla.org/docs/Mozilla/Developer_guide/RTL_guideline= s >> At the beginning, there is a list of =E2=80=9Ddo and don=E2=80=99t do=E2= =80=9Ds 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 >> >> On Thu, Feb 6, 2020 at 18:04 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 usi= ng >>> 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 thin= gs >>> should be mirrored, text handling in RTL and tips on how to spot/fix/te= st >>> RTL issues. It includes things I personally didn't know about before, s= o I >>> do encourage giving it a read: >>> >>> https://developer.mozilla.org/docs/Mozilla/Developer_guide/RTL_guidelin= es >>> >>> 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 >>> >> --000000000000b9b4d0059dfcd484 Content-Type: text/html; charset="UTF-8" Content-Transfer-Encoding: quoted-printable <div><div dir=3D"auto">Tim, thank you for the clarification. I somehow over= looked that.</div></div><div dir=3D"auto"><br></div><div dir=3D"auto">Cheer= s,</div><div dir=3D"auto">Robi</div><div dir=3D"auto"><br></div><div><br><d= iv class=3D"gmail_quote"><div dir=3D"ltr" class=3D"gmail_attr">On Fri, Feb = 7, 2020 at 07:17 Tim Nguyen <<a href=3D"mailto:[email protected]">ntim= [email protected]</a>> wrote:<br></div><blockquote class=3D"gmail_quote" s= tyle=3D"margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div= dir=3D"ltr"><div>Hi Robert,</div><div><br></div><div>I've explained th= is in the paragraph before the code example:</div><div><br></div><div>"= ;However, since the direction in LTR, this also means that the=20 start/end properties will correspond to left/right respectively, which=20 is probably not what you expect. This means you have to use extra rules=20 instead of using logical properties."</div><div><br></div><div>This is= an exception when you have an LTR element inside a RTL context. I'll c= larify this in the doc.</div><div><br></div><div>Cheers,</div><div>Tim<br><= /div></div><br><div class=3D"gmail_quote"><div dir=3D"ltr" class=3D"gmail_a= ttr">On Fri, Feb 7, 2020 at 11:41 AM Robert B <<a href=3D"mailto:rf.buec= [email protected]" target=3D"_blank">[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><div dir=3D"a= uto">I=E2=80=99m not sure if this is deliberate or was an oversight...</div= ></div><div dir=3D"auto">In=C2=A0<div><a href=3D"https://developer.mozilla.= org/docs/Mozilla/Developer_guide/RTL_guidelines" target=3D"_blank">https://= developer.mozilla.org/docs/Mozilla/Developer_guide/RTL_guidelines</a></div>= <div dir=3D"auto">At the beginning, there is a list of =E2=80=9Ddo and don= =E2=80=99t do=E2=80=9Ds of which the first two are</div><div dir=3D"auto"><= table style=3D"font-size:16px;margin:0px 0px 24px;padding:0px;border:2px so= lid rgb(255,255,255);box-sizing:border-box;width:988px;max-width:100%;borde= r-collapse:collapse;color:rgb(51,51,51);font-family:Arial,x-locale-body,san= s-serif;letter-spacing:-0.04448px"><thead style=3D"margin:0px;padding:0px;b= order:0px none"><tr style=3D"margin:0px;padding:0px;border:0px none"><th sc= ope=3D"col" style=3D"margin:0px;padding:2px 8px 4px;border-width:2px;border= -style:solid;border-color:rgb(255,255,255) rgb(255,255,255) rgb(212,221,228= );font-style:inherit;background-color:rgba(212,221,228,0.498);font-family:x= -locale-heading-primary,zillaslab,Palatino,"Palatino Linotype",x-= locale-heading-secondary,serif">Do</th><th scope=3D"col" style=3D"margin:0p= x;padding:2px 8px 4px;border-width:2px;border-style:solid;border-color:rgb(= 255,255,255) rgb(255,255,255) rgb(212,221,228);font-style:inherit;backgroun= d-color:rgba(212,221,228,0.498);font-family:x-locale-heading-primary,zillas= lab,Palatino,"Palatino Linotype",x-locale-heading-secondary,serif= ">Don't do</th></tr></thead><tbody style=3D"margin:0px;padding:0px;bord= er:0px none"><tr style=3D"margin:0px;padding:0px;border:0px none"><td dir= =3D"ltr" style=3D"margin:0px;padding:6px 8px;border:2px solid rgb(255,255,2= 55);background-color:rgba(212,221,228,0.247)"><code style=3D"margin:0px;pad= ding:0px 2px;border:0px none;font-style:inherit;background-color:rgba(220,2= 20,220,0.498);border-radius:2px;font-family:consolas,"Liberation Mono&= quot;,courier,monospace"><a href=3D"https://developer.mozilla.org/en-US/doc= s/Web/CSS/margin-inline-start" title=3D"The margin-inline-start CSS propert= y defines the logical inline start margin of an element, which maps to a ph= ysical margin depending on the element's writing mode, directionality, = and text orientation. It corresponds to the margin-top, margin-right, margi= n-bottom, or margin-left property depending on the values defined for writi= ng-mode, direction, and text-orientation." style=3D"margin:0px;padding:0px;= border:0px none;color:rgb(40,92,118);text-decoration:none" target=3D"_blank= "><code style=3D"margin:0px;padding:0px 2px;border:0px none;font-style:inhe= rit;border-radius:2px;font-family:consolas,"Liberation Mono",cour= ier,monospace">margin-inline-start</code></a>: 5px;</code></td><td dir=3D"l= tr" style=3D"margin:0px;padding:6px 8px;border:2px solid rgb(255,255,255);b= ackground-color:rgba(212,221,228,0.247)"><code style=3D"margin:0px;padding:= 0px 2px;border:0px none;font-style:inherit;background-color:rgba(220,220,22= 0,0.498);border-radius:2px;font-family:consolas,"Liberation Mono"= ,courier,monospace">margin-left: 5px;</code></td></tr><tr style=3D"margin:0= px;padding:0px;border:0px none"><td dir=3D"ltr" style=3D"margin:0px;padding= :6px 8px;border:2px solid rgb(255,255,255);background-color:rgba(212,221,22= 8,0.15)"><code style=3D"margin:0px;padding:0px 2px;border:0px none;font-sty= le:inherit;background-color:rgba(220,220,220,0.498);border-radius:2px;font-= family:consolas,"Liberation Mono",courier,monospace"><a href=3D"h= ttps://developer.mozilla.org/en-US/docs/Web/CSS/padding-inline-end" title= =3D"The padding-inline-end CSS property defines the logical inline end padd= ing of an element, which maps to a physical padding depending on the elemen= t's writing mode, directionality, and text orientation. It corresponds = to the padding-top, padding-right, padding-bottom, or padding-left property= depending on the values defined for writing-mode, direction, and text-orie= ntation." style=3D"margin:0px;padding:0px;border:0px none;color:rgb(40,92,1= 18);text-decoration:none" target=3D"_blank"><code style=3D"margin:0px;paddi= ng:0px 2px;border:0px none;font-style:inherit;border-radius:2px;font-family= :consolas,"Liberation Mono",courier,monospace">padding-inline-end= </code></a>: 5px;</code></td><td dir=3D"ltr" style=3D"margin:0px;padding:6p= x 8px;border:2px solid rgb(255,255,255);background-color:rgba(212,221,228,0= .15)"><code style=3D"margin:0px;padding:0px 2px;border:0px none;font-style:= inherit;background-color:rgba(220,220,220,0.498);border-radius:2px;font-fam= ily:consolas,"Liberation Mono",courier,monospace">padding-right: = 5px;</code></td></tr></tbody></table></div></div><div dir=3D"auto">Then, ab= out 2/3 down the page there is a code example using padding-left: and paddi= ng-right: instead of padding-inline-start: and padding-in-line-end:</div><d= iv dir=3D"auto"><br></div><div dir=3D"auto">Are these exceptions to the RTL= rules or was it a typo?</div><div dir=3D"auto"><br></div><div dir=3D"auto"= >Cheers,</div><div dir=3D"auto">Robi</div><div><br><div class=3D"gmail_quot= e"><div dir=3D"ltr" class=3D"gmail_attr">On Thu, Feb 6, 2020 at 18:04 Tim N= guyen <<a href=3D"mailto:[email protected]" target=3D"_blank">ntim.bug= [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>Ther= e 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 aware= ness on specific situations that are more complex than just using CSS logic= al properties, but sometimes due to lack of testing.<br></div><div><br></di= v><div>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 R= TL issues. It includes things I personally didn't know about before, 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_guidelines" targe= t=3D"_blank">https://developer.mozilla.org/docs/Mozilla/Developer_guide/RTL= _guidelines</a></div><div><br></div><div>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 <span dir=3D"auto"><code><span>intl.l10n.pseudo<= span style=3D"font-family:arial,sans-serif"> to </span>bidi<span style=3D"f= ont-family:arial,sans-serif">) to make Firefox accessible for all languages= :)<br></span></span></code></span></div><div><br><span dir=3D"auto"><code>= <span><span style=3D"font-family:arial,sans-serif"></span></span></code></s= pan></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></co= de></span><span dir=3D"auto"><code><span></span></code></span></div><div><d= iv><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></div> </blockquote></div> </blockquote></div></div> --000000000000b9b4d0059dfcd484-- --===============3562676409761466523== 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 --===============3562676409761466523==--