Confirmed users
38
edits
Gaia/CSS Guidelines: Difference between revisions
→Use direction-sensitive rules: text-align: {start,end}
(→Direction (RTL/LTR and Bidi): additional guidelines: direction-sensitive rules) |
(→Use direction-sensitive rules: text-align: {start,end}) |
||
| (4 intermediate revisions by 2 users not shown) | |||
| Line 123: | Line 123: | ||
==Direction (RTL/LTR and BiDi)== | ==Direction (RTL/LTR and BiDi)== | ||
Many UI elements are have to be mirrored for languages written Right-To-Left. | Many UI elements are have to be mirrored for languages written Right-To-Left. This comes for free with flex-box and other inline element layouts. However, if you need to use positioning or other explicit styling and layout, here’s how you can make it easier. | ||
===Use the same specificity for LTR and RTL=== | ===Use the same specificity for LTR and RTL=== | ||
| Line 145: | Line 145: | ||
|style="text-align: center" colspan="3"| text alignment | |style="text-align: center" colspan="3"| text alignment | ||
|- | |- | ||
| text-align: left<br>text-align: right || text-align: start<br>text-align: end || | | <code>text-align: left<br>text-align: right</code> || <code>[https://developer.mozilla.org/en-US/docs/Web/CSS/text-align text-align: start]<br>[https://developer.mozilla.org/en-US/docs/Web/CSS/text-align text-align: end]</code> || Chrome 1.0+, Safari 3.1+, Firefox 3.6+, Android, iOS <br> Not supported by Internet Explorer | ||
|- | |- | ||
|style="text-align: center" colspan="3"| padding, margin, border | |style="text-align: center" colspan="3"| padding, margin, border | ||
|- | |- | ||
| padding-left<br>padding-right || padding-inline-start<br>padding-inline-end || | | <code>padding-left<br>padding-right</code> || <code>[https://developer.mozilla.org/docs/Web/CSS/padding-inline-start padding-inline-start]<br>[https://developer.mozilla.org/docs/Web/CSS/padding-inline-end padding-inline-end]</code> || Firefox 41+ | ||
|- | |- | ||
| border-left<br>border-right || border-inline-start<br>border-inline-end || | | <code>border-left<br>border-right</code> || <code>[https://developer.mozilla.org/docs/Web/CSS/border-inline-start border-inline-start]<br>[https://developer.mozilla.org/docs/Web/CSS/border-inline-end border-inline-end]</code> || Firefox 41+ | ||
|- | |- | ||
| margin-left<br>margin-right || margin-inline-start<br>margin-inline-end || | | <code>margin-left<br>margin-right</code> || <code>[https://developer.mozilla.org/docs/Web/CSS/margin-inline-start margin-inline-start]<br>[https://developer.mozilla.org/docs/Web/CSS/margin-inline-end margin-inline-end]</code> || Firefox 41+ | ||
|- | |- | ||
|style="text-align: center" colspan="3"| absolute positioning | |style="text-align: center" colspan="3"| absolute positioning | ||
|- | |- | ||
| left<br>right || offset-inline-start<br>offset-inline-end || | | <code>left<br>right</code> || <code>[https://developer.mozilla.org/docs/Web/CSS/offset-inline-start offset-inline-start]<br>[https://developer.mozilla.org/docs/Web/CSS/offset-inline-end offset-inline-end]</code> || Firefox 41+ | ||
|- | |- | ||
|style="text-align: center" colspan="3"| float positioning | |style="text-align: center" colspan="3"| float positioning | ||
|- | |- | ||
| float: left<br>float: right || float: inline-start<br>float: inline-end || | | <code>float: left<br>float: right</code> || <code>[https://developer.mozilla.org/en-US/docs/Web/CSS/float float: inline-start]<br>[https://developer.mozilla.org/en-US/docs/Web/CSS/float float: inline-end]</code> || Firefox 45+ | ||
|} | |} | ||