kit-docs
kit-docs copied to clipboard
Published
20 hours ago •
svelteness
svelteness
Add rtl support to components
replace right with end and left with start to support rtl languages. To have this ability in tailwind I use tailwindcss-rtl package.
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!
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.