7
edits
DevTools/CSSTips: Difference between revisions
→RTL support for html modules
(Make document more up-to-date) |
Jdescottes (talk | contribs) |
||
| (2 intermediate revisions by the same user not shown) | |||
| Line 75: | Line 75: | ||
== Localization == | == Localization == | ||
Text Direction | === Text Direction === | ||
* For margins, padding and borders, use inline-start/inline-end rather than left/right | * For margins, padding and borders, use inline-start/inline-end rather than left/right | ||
** Example: Use <tt>margin-inline-start: 3px;</tt> not <tt>margin-left: 3px</tt> | ** Example: Use <tt>margin-inline-start: 3px;</tt> not <tt>margin-left: 3px</tt> | ||
| Line 83: | Line 83: | ||
* Write "padding: 0 3px 4px;" instead of "padding: 0 3px 4px 3px;". This makes it more obvious that the padding is symmetrical (so RTL won't be an issue) | * Write "padding: 0 3px 4px;" instead of "padding: 0 3px 4px 3px;". This makes it more obvious that the padding is symmetrical (so RTL won't be an issue) | ||
Testing | === RTL support for html modules === | ||
* | |||
* | By default, new HTML modules support only left-to-right (LTR) and do not reuse the current direction of the browser. | ||
To enable right-to-left (RTL) support in a module, set the [dir] attribute on the document element of the module: | |||
* Example: <code><html xmlns="http://www.w3.org/1999/xhtml" dir=""></code> | |||
The appropriate value for the dir attribute will then be set when the toolbox will load this module. | |||
=== Testing === | |||
* The recommended workflow to test RTL on DevTools is to use the [https://addons.mozilla.org/en-US/firefox/addon/force-rtl/ Force RTL extension]. After changing the direction using Force RTL, you should restart the devtools to make sure all modules apply the new direction. A future version of Force RTL will be able to update dynamically all DevTools documents. | |||
* Going to about:config and setting <tt>intl.uidirection.en</tt> to rtl is not recommended, and will always require to re-open devtools to have any impact. | |||
== Toggles == | == Toggles == | ||