Confirmed users
38
edits
Gaia/CSS Guidelines: Difference between revisions
→Direction (RTL/LTR and Bidi): additional guidelines: direction-sensitive rules
(Adding guidelines for RTL/LTR/bidi) |
(→Direction (RTL/LTR and Bidi): additional guidelines: direction-sensitive rules) |
||
| Line 121: | Line 121: | ||
==Direction (RTL/LTR and | ==Direction (RTL/LTR and BiDi)== | ||
Many UI elements are have to be mirrored for languages written Right-To-Left. Here’s how you can make it easier. | |||
===Use the same specificity for LTR and RTL=== | |||
Rules that are direction-specific (e.g LTR) should have the same specificity as their RTL counterparts. Rules with an implicit direction should be made explicit using either the dir attribute selector (html[dir="ltr|rtl"]), or the :-moz-dir(rtl) pseudo-class. RTL and LTR -specific rules should always be grouped together in the same stylesheet to simplify maintenance. | Rules that are direction-specific (e.g LTR) should have the same specificity as their RTL counterparts. Rules with an implicit direction should be made explicit using either the dir attribute selector (html[dir="ltr|rtl"]), or the :-moz-dir(rtl) pseudo-class. RTL and LTR -specific rules should always be grouped together in the same stylesheet to simplify maintenance. | ||
<pre> | <pre> | ||
| Line 129: | Line 133: | ||
html[dir="rtl"] .foo { | html[dir="rtl"] .foo { | ||
right: 0; | right: 0; | ||
} | |||
</pre> | |||
===Use direction-sensitive rules=== | |||
Many CSS rules that include a `left` or `right` keyword can be written with `start` or `end` instead: | |||
{| class="wikitable" style="width: 100%" | |||
|- | |||
! left/right !! begin/end !! browser compatibility | |||
|- | |||
|style="text-align: center" colspan="3"| text alignment | |||
|- | |||
| text-align: left<br>text-align: right || text-align: start<br>text-align: end || | |||
|- | |||
|style="text-align: center" colspan="3"| padding, margin, border | |||
|- | |||
| padding-left<br>padding-right || padding-inline-start<br>padding-inline-end || Gecko 41+ | |||
|- | |||
| border-left<br>border-right || border-inline-start<br>border-inline-end || Gecko 41+ | |||
|- | |||
| margin-left<br>margin-right || margin-inline-start<br>margin-inline-end || Gecko 41+ | |||
|- | |||
|style="text-align: center" colspan="3"| absolute positioning | |||
|- | |||
| left<br>right || offset-inline-start<br>offset-inline-end || Gecko 41+ | |||
|- | |||
|style="text-align: center" colspan="3"| float positioning | |||
|- | |||
| float: left<br>float: right || float: inline-start<br>float: inline-end || (not yet supported) | |||
|} | |||
'''Warning:''' in most cases, you don’t want to apply these direction-sensitive rules to HTML elements carrying a <code>dir="auto"</code> attribute because the layout would be modified by the content direction. | |||
===margin, padding, border: do not use 4-value shorthands=== | |||
Beware of the shorthands on margin/padding/border rules: | |||
<pre> | |||
margin: 1rem; /* OK: start and end margins are set to 1rem */ | |||
margin: 1rem 2rem; /* OK: start and end margins are set to 2rem */ | |||
margin: 1rem 2rem 3rem; /* OK: start and end margins are set to 2rem */ | |||
margin: 1rem 2rem 3rem 4rem; /* direction-specific! */ | |||
</pre> | |||
Shorthands with 1, 2 or 3 values are BiDi-proof; shorthands with 4 values are not. | |||
As an example, rather than using: | |||
<pre> | |||
.myClass { | |||
padding: 1rem 2rem 3rem 4rem; | |||
} | |||
</pre> | |||
you should use: | |||
<pre> | |||
.myClass { | |||
padding: 1rem 2rem 3rem; | |||
padding-inline-start: 4rem; | |||
} | |||
</pre> | |||
or, if the target element has a <code>dir="auto"</code> attribute (or if your browser doesn’t support -inline-start): | |||
<pre> | |||
.myClass { | |||
padding: 1rem 2rem 3rem; | |||
} | |||
html[dir="ltr"] .myClass { | |||
padding-left: 4rem; | |||
} | |||
html[dir="rtl"] .myClass { | |||
padding-right: 4rem; | |||
} | } | ||
</pre> | </pre> | ||