Better support for RTL languages

[cmintey]

Describe the feature in detail (code, mocks, or screenshots encouraged)

As I've been migration from v2, I've noticed just a couple things regarding RTL support.

1. Some components appear to always set dir="ltr" rather than inheriting the dir from the HTML doc. Ones that I've observed: Tabs and Toast
2. The table styles set text-align: left for headers. This should use text-align: start in order to support dir out of the box

There may be others and it's probably worth doing a more comprehensive audit of the components and styles. I think in general, the components should not have a default dir and rather inherit the property from an outer element (in my case, the root element), though allowing it to be overridden is great.

Provide relevant links, wireframes, prototypes, or additional information.

No response

[endigo9740]

Hey @cmintey per the items raised above.

Some components appear to always set dir="ltr" rather than inheriting the dir from the HTML doc. Ones that I've observed: Tabs and Toast

If you find any components harcoding dir like this, you should aim to report this upstream to Zag.js. As Skeleton doesn't change the defaults for any of these components - which is an intentional choice for situations like this. See the Toast source to see what I mean - no mention of dir or ltr.

You can report issues to Zag here:

• https://github.com/chakra-ui/zag/issues

The table styles set text-align: left for headers. This should use text-align: start in order to support dir out of the box

I agree, any instance like this should be documented and updated. We'll allow this ticket to be the hub for this purpose. Note that the planned Skeleton v5 update is primed to focus on themes and Tailwind features (like tables, buttons, etc). The later would cover this, so I'll tag this issue according to that milestone.

Unfortunately myself and other members of the team are currently impeded by some personal life events (outside of Skeleton). This means there's no current ETA for this update, just to set realistic expectations.

In the meantime, I'd welcome a PR that addresses any of these issues. As long as the changes are non-breaking. Any breaking changes should be recorded here to be included in the more sweeping v5 update of course.

[cmintey]

If you find any components harcoding dir like this, you should aim to report this upstream to Zag.js. As Skeleton doesn't change the defaults for any of these components - which is an intentional choice for situations like this. See the Toast source to see what I mean - no mention of dir or ltr.

Makes sense. I did look through skeleton code and didn't see it being set explicitly, so makes sense that it's an upstream issue. I will open a ticket with them.

Unfortunately myself and other members of the team are currently impeded by some personal life events (outside of Skeleton). This means there's no current ETA for this update, just to set realistic expectations.

Totally understand and I appreciate the transparency.

[cmintey]

Issue opened: chakra-ui/zag#2960

[anubra266]

Hi @endigo9740 @cmintey
The best solution for this is for Skeleton to have a LocaleProvider that components can read from.
Some logic needs explicitly set dir to work, e.g. keyboard navigation and scrolling.
we could try to find inherited dir with getComputedStyle but that would cause SSR mismatches so it's a no go.
The only way is to allow setting desired dir once in context, then all components can pick up that dir value

#2960

[endigo9740]

I understand @anubra266 - thanks for the suggestion. Let me talk it over with the team and we'll figure out something for this.