Confirmed users
38
edits
Gaia/CSS Guidelines: Difference between revisions
→Use direction-sensitive rules: text-align: {start,end}
(→Use direction-sensitive rules: browser support) |
(→Use direction-sensitive rules: text-align: {start,end}) |
||
| (2 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 | ||
|- | |- | ||
| <code>text-align: left<br>text-align: right</code> || <code>text-align: start<br>text-align: end</code> || Chrome 1.0+, Safari 3.1+, Firefox 3.6+, Android, iOS <br> Not supported by Internet Explorer | | <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 | ||
| Line 161: | Line 161: | ||
|style="text-align: center" colspan="3"| float positioning | |style="text-align: center" colspan="3"| float positioning | ||
|- | |- | ||
| <code>float: left<br>float: right</code> || <code>float: inline-start<br>float: inline-end</code> || | | <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+ | ||
|} | |} | ||