Skip to content

Commit cf0da70

Browse files
authored
Merge pull request #13999 from nextcloud/docs/dev/rtl
docs(dev-manual): css RTL/LTR guidelines
2 parents 40c4817 + f92b42c commit cf0da70

1 file changed

Lines changed: 43 additions & 0 deletions

File tree

  • developer_manual/html_css_design

developer_manual/html_css_design/css.rst

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -263,3 +263,46 @@ There are some predefined classes for public use to ease developing an applicati
263263
+----------------------------------------------+------------------------------------------------------------------------------------------------------------------------------------------------+
264264
| ``.inlineblock`` | Make an element an inline block |
265265
+----------------------------------------------+------------------------------------------------------------------------------------------------------------------------------------------------+
266+
267+
RTL guidelines
268+
==============
269+
270+
Dos and Don'ts
271+
--------------
272+
273+
.. list-table::
274+
:header-rows: 1
275+
276+
* - Bad
277+
- Good
278+
- Description
279+
* - Use physical properties ``margin-left``
280+
- Use logical properties ``margin-inline-start``
281+
- Using logical properties automatically adapts to LTR/RTL
282+
* - Use ``left`` or ``right``
283+
- Use inset-inline-start/end
284+
- Keep positioning direction-aware
285+
* - Use text-align: left/right
286+
- Use text-align: start/end
287+
- Text aligns correctly in both modes
288+
* - Use border-left/right
289+
- Use border-inline-start/end
290+
- Borders flip correctly
291+
* - Use float: left/right
292+
- Use float: inline-start/end
293+
- Float respects direction
294+
* - Assume RTL “just works”
295+
- Test your app with RTL languages
296+
- Using the correct css value is not always enough to avoid bugs
297+
298+
299+
300+
301+
302+
303+
304+
305+
306+
307+
308+

0 commit comments

Comments
 (0)