Re: RTL Guidelines

--===============0359334770891852930==
Content-Type: multipart/alternative; boundary="000000000000ce07fb059dfc3786"

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

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_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-e=
nd:
>
> 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 l=
ack
>> of awareness on specific situations that are more complex than just usin=
g
>> 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 thing=
s
>> should be mirrored, text handling in RTL and tips on how to spot/fix/tes=
t
>> 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_guideline=
s
>>
>> 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
>>
>

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

<div dir=3D"ltr"><div>Hi Robert,</div><div><br></div><div>I&#39;ve explaine=
d this in the paragraph before the code example:</div><div><br></div><div>&=
quot;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.&quot;</div><div><br></div><div>This is=
 an exception when you have an LTR element inside a RTL context. I&#39;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 &lt;<a href=3D"mailto:rf.buec=
[email protected]" target=3D"_blank">[email protected]</a>&gt; 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,&quot;Palatino Linotype&quot;,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,&quot;Palatino Linotype&quot;,x-locale-heading-secondary,serif=
">Don&#39;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,&quot;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&#39;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,&quot;Liberation Mono&quot;,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,&quot;Liberation Mono&quot;=
,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,&quot;Liberation Mono&quot;,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&#39;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,&quot;Liberation Mono&quot;,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,&quot;Liberation Mono&quot;,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 &lt;<a href=3D"mailto:[email protected]" target=3D"_blank">ntim.bug=
[email protected]</a>&gt; 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&#39;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&#39;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>

--000000000000ce07fb059dfc3786--

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

--===============0359334770891852930==--