Re: RTL Guidelines

--===============5090104228682749078==
Content-Type: multipart/alternative; boundary="00000000000068c0f5059dfadeec"

--00000000000068c0f5059dfadeec
Content-Type: text/plain; charset="UTF-8"
Content-Transfer-Encoding: quoted-printable

I=E2=80=99m 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 =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 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
>

--00000000000068c0f5059dfadeec
Content-Type: text/html; charset="UTF-8"
Content-Transfer-Encoding: quoted-printable

<div><div dir=3D"auto">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">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 class=3D"standard-table" style=3D"font-size:16px;margin:0px 0px 24px;=
padding:0px;border:2px solid rgb(255,255,255);box-sizing:border-box;width:9=
88px;max-width:100%;border-collapse:collapse;color:rgb(51,51,51);font-famil=
y:Arial,x-locale-body,sans-serif;letter-spacing:-0.04447999969124794px"><th=
ead style=3D"margin:0px;padding:0px;border:0px"><tr style=3D"margin:0px;pad=
ding:0px;border:0px"><th scope=3D"col" style=3D"margin:0px;padding:2px 8px =
4px;border-width:2px;border-style:solid;border-color:rgb(255,255,255) rgb(2=
55,255,255) rgb(212,221,228);font-style:inherit;background-color:rgba(212,2=
21,228,0.498039);font-family:x-locale-heading-primary,zillaslab,Palatino,&q=
uot;Palatino Linotype&quot;,x-locale-heading-secondary,serif">Do</th><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.498039);font-famil=
y:x-locale-heading-primary,zillaslab,Palatino,&quot;Palatino Linotype&quot;=
,x-locale-heading-secondary,serif">Don&#39;t do</th></tr></thead><tbody sty=
le=3D"margin:0px;padding:0px;border:0px"><tr style=3D"margin:0px;padding:0p=
x;border:0px"><td dir=3D"ltr" style=3D"margin:0px;padding:6px 8px;border:2p=
x solid rgb(255,255,255);background-color:rgba(212,221,228,0.247059)"><code=
 style=3D"margin:0px;padding:0px 2px;border:0px;font-style:inherit;backgrou=
nd-color:rgba(220,220,220,0.498039);border-top-left-radius:2px;border-top-r=
ight-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:2p=
x;font-family:consolas,&quot;Liberation Mono&quot;,courier,monospace;word-w=
rap:break-word"><a href=3D"https://developer.mozilla.org/en-US/docs/Web/CSS=
/margin-inline-start" title=3D"The margin-inline-start CSS property defines=
 the logical inline start margin of an element, which maps to a physical ma=
rgin depending on the element&#39;s writing mode, directionality, and text =
orientation. It corresponds to the margin-top, margin-right, margin-bottom,=
 or margin-left property depending on the values defined for writing-mode, =
direction, and text-orientation." style=3D"margin:0px;padding:0px;border:0p=
x;color:rgb(40,92,118);text-decoration:none"><code style=3D"margin:0px;padd=
ing:0px 2px;border:0px;font-style:inherit;border-top-left-radius:2px;border=
-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-rad=
ius:2px;font-family:consolas,&quot;Liberation Mono&quot;,courier,monospace;=
word-wrap:break-word">margin-inline-start</code></a>: 5px;</code></td><td d=
ir=3D"ltr" style=3D"margin:0px;padding:6px 8px;border:2px solid rgb(255,255=
,255);background-color:rgba(212,221,228,0.247059)"><code style=3D"margin:0p=
x;padding:0px 2px;border:0px;font-style:inherit;background-color:rgba(220,2=
20,220,0.498039);border-top-left-radius:2px;border-top-right-radius:2px;bor=
der-bottom-right-radius:2px;border-bottom-left-radius:2px;font-family:conso=
las,&quot;Liberation Mono&quot;,courier,monospace;word-wrap:break-word">mar=
gin-left: 5px;</code></td></tr><tr style=3D"margin:0px;padding:0px;border:0=
px"><td dir=3D"ltr" style=3D"margin:0px;padding:6px 8px;border:2px solid rg=
b(255,255,255);background-color:rgba(212,221,228,0.14902)"><code style=3D"m=
argin:0px;padding:0px 2px;border:0px;font-style:inherit;background-color:rg=
ba(220,220,220,0.498039);border-top-left-radius:2px;border-top-right-radius=
:2px;border-bottom-right-radius:2px;border-bottom-left-radius:2px;font-fami=
ly:consolas,&quot;Liberation Mono&quot;,courier,monospace;word-wrap:break-w=
ord"><a href=3D"https://developer.mozilla.org/en-US/docs/Web/CSS/padding-in=
line-end" title=3D"The padding-inline-end CSS property defines the logical =
inline end padding of an element, which maps to a physical padding dependin=
g on the element&#39;s writing mode, directionality, and text orientation. =
It corresponds to the padding-top, padding-right, padding-bottom, or paddin=
g-left property depending on the values defined for writing-mode, direction=
, and text-orientation." style=3D"margin:0px;padding:0px;border:0px;color:r=
gb(40,92,118);text-decoration:none"><code style=3D"margin:0px;padding:0px 2=
px;border:0px;font-style:inherit;border-top-left-radius:2px;border-top-righ=
t-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:2px;f=
ont-family:consolas,&quot;Liberation Mono&quot;,courier,monospace;word-wrap=
:break-word">padding-inline-end</code></a>: 5px;</code></td><td dir=3D"ltr"=
 style=3D"margin:0px;padding:6px 8px;border:2px solid rgb(255,255,255);back=
ground-color:rgba(212,221,228,0.14902)"><code style=3D"margin:0px;padding:0=
px 2px;border:0px;font-style:inherit;background-color:rgba(220,220,220,0.49=
8039);border-top-left-radius:2px;border-top-right-radius:2px;border-bottom-=
right-radius:2px;border-bottom-left-radius:2px;font-family:consolas,&quot;L=
iberation Mono&quot;,courier,monospace;word-wrap:break-word">padding-right:=
 5px;</code></td></tr></tbody></table></div></div><div dir=3D"auto">Then, a=
bout 2/3 down the page there is a code example using padding-left: and padd=
ing-right: instead of padding-inline-start: and padding-in-line-end:</div><=
div dir=3D"auto"><br></div><div dir=3D"auto">Are these exceptions to the RT=
L 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_quo=
te"><div dir=3D"ltr" class=3D"gmail_attr">On Thu, Feb 6, 2020 at 18:04 Tim =
Nguyen &lt;<a href=3D"mailto:[email protected]">[email protected]</a>&g=
t; wrote:<br></div><blockquote class=3D"gmail_quote" style=3D"margin:0 0 0 =
.8ex;border-left:1px #ccc solid;padding-left:1ex"><div dir=3D"ltr"><div>Hel=
lo folks,</div><div><br></div><div>There has been a significant number of R=
TL bugs found in the last few months in the Firefox UI. From what I can gat=
her, 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 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 pers=
onally didn&#39;t know about before, so I do encourage giving it a read:</d=
iv><div><br></div><div><a href=3D"https://developer.mozilla.org/docs/Mozill=
a/Developer_guide/RTL_guidelines" target=3D"_blank">https://developer.mozil=
la.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"font-family:arial,sans-serif">) to ma=
ke Firefox accessible for all languages :)<br></span></span></code></span><=
/div><div><br><span dir=3D"auto"><code><span><span style=3D"font-family:ari=
al,sans-serif"></span></span></code></span></div><div>I hope that this guid=
e will be helpful, and please do let me or Itiel know if you&#39;ve got any=
 feedback on it.<br><span dir=3D"auto"><code><span><span style=3D"font-fami=
ly:arial,sans-serif"></span></span></code></span><span dir=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></div>

--00000000000068c0f5059dfadeec--

--===============5090104228682749078==
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

--===============5090104228682749078==--