shadcn-ui / ui

Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
https://ui.shadcn.com
MIT License
62.84k stars 3.53k forks source link

Using `-start` and `-end` properties for better RTL support #1919

Closed yahia-berashish closed 6 months ago

yahia-berashish commented 7 months ago

I noticed that border, margin, padding, etc classes use -left and -right properties, which doesn't work well for RTL pages, I suppose using -start and -end properties like ms- instead of me- would be better for accessibility and would remove a lot of work for everyone wanting to use RTL languages with shadcnUI (like Arabic for example). The changes aren't hard to implement using text search, and I can open a PR if the idea is valid.

TA9IO commented 7 months ago

i'm doing it manualy every time i install a component i change the following classNames mr-=> ms- ml- => me- pl- => pe- pr- => ps- also some stuff like flexbox and position ( like a closing button of modal )needs to fixed manualy for example: flex-start => rtl:flex-end left-4 => ltr:left-4 rtl:right-4

I mean, the thought of adding RTL support came to my mind, but I don't have time to update the entire library. If you guys are interested, count me in. image

yahia-berashish commented 7 months ago

Thanks for your interest @TA9IO Fixing the issue shouldn't be too hard with advanced text search and some testing, I think it is important that such a large component library be more accessible for RTL languages-speaking users and developers.

I will probably open a PR soon to work on the issue.

primemb commented 7 months ago

there is pull request for RTL already but it is pending for a while i don't know what the plan is for that #1638

nahasco commented 6 months ago

Did that in a pull request for all components and all styles. It is still pending but you can check it out here #1638

shadcn commented 6 months ago

@yahia-berashish Yep like @nahasco we'll add this to the cli. Thanks for the ping @nahasco I'll add this to the queue.