Add rtl support to components

svelteness / kit-docs

Documentation integration for SvelteKit.

https://kitdocs.vercel.app

MIT License

457 stars 32 forks source link

Add rtl support to components #79

Open LowLevelLover opened 1 year ago

LowLevelLover commented 1 year ago

replace right with end and left with start to support rtl languages. To have this ability in tailwind I use tailwindcss-rtl package.

mihar-22 commented 1 year ago

Hey @FarzinVatani!

There's a minor issue in that [dir="ltr"] is not applied to the <html> tag so the CSS selectors that rely on that being present don't work. I think we can safely remove it from selectors as [dir="rtl"] will overwrite.
I haven't investigated but popovers have stopped working correctly. It might have to do with margin/padding property changes. You can test this by shrinking the page and clicking the hamburger in the top right.

If you can resolve those then we can get this merged. Thanks!

LowLevelLover commented 1 year ago

Ok I will remove all ltr prefixes as rtl overwrite them.

LowLevelLover commented 1 year ago

Hey @mihar-22

I have been trying to handle margins, paddings, etc. but it could add some complexity.

For example:

<div class="mr-4 rtl:mr-0 rtl:ml-4" /> I should reset mr
<div class="mr-2 ml-4 rtl:mr-4 rtl:ml-2 1280:mr-3 1280:rtl:mr-2 1280:rtl:ml-3 1440:mr-4 1440:rtl:mr-2 1440:rtl:ml-4" /> I sould reset all right-left values in breakpoints to previous one.

UPDATE: I think we could warn users to use dir="ltr" in html tag in changelog info.