We have decided that RTL setup should be:
- Use a
DirectionProvider to configure RTL component behavior for an app (or part of an app), and
- Set
dir="rtl" accordingly in the html to affect styling, ideally in the <html> tag for a whole app
<html dir="rtl">
<body>
<DirectionProvider direction="rtl">
<Slider /> {/* automatically applies RTL keyboard behavior */}
<DirectionProvider>
</body>
</html>We do not set the dir attribute on components by default, but users are free to do so if they wish.
For styling, the CSS :dir() pseudo-class could be used:
.MySlider:dir(rtl) {
/* RTL styles */
}Looking at our .browserslistrc, only Chrome 109 and 119 don't support :dir() and would need an attribute selector instead:
[dir='rtl'] .MySlider {
/* RTL styles */
}While auto-detecting the inherited dir worked for determining keyboard behavior, some components have lot of positioning styles involving CSS transforms, which do not have logical property counterparts yet (w3c/csswg-drafts#7646) and require knowing the dir at render time
Relevant components:
- Accordion
- Menu
- Progress
- RadioGroup
- Tabs
- Slider
We have decided that RTL setup should be:
DirectionProviderto configure RTL component behavior for an app (or part of an app), anddir="rtl"accordingly in the html to affect styling, ideally in the<html>tag for a whole appWe do not set the
dirattribute on components by default, but users are free to do so if they wish.For styling, the CSS
:dir()pseudo-class could be used:Looking at our
.browserslistrc, only Chrome 109 and 119 don't support:dir()and would need an attribute selector instead:While auto-detecting the inherited
dirworked for determining keyboard behavior, some components have lot of positioning styles involving CSS transforms, which do not have logical property counterparts yet (w3c/csswg-drafts#7646) and require knowing thedirat render timeRelevant components: