Is RTL Supported? #121
-
|
I apologize if this is obvious but I'm new to astro. I want to use ScrewFast for a project but need it to support Arabic, are there any plans to support Right to Left text in the future? If it is indeed supported, then I'm struggling with making it work. I would appreciate it if you point me in the right direction. Thank you |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 2 replies
-
|
Hello @omarhamid89! Tailwind does provide RTL support. If your site has a single direction, you just need to add This will enable RTL support across your site. However, you might want to make some adjustments too, like swapping the border radius from the left to the right for certain sections, such as the pricing section, etc.
|
Beta Was this translation helpful? Give feedback.
-
|
Thank you, this is what I've been looking for! |
Beta Was this translation helpful? Give feedback.
-
|
Yes, so for the English version you will have // src/components/ui/LanguagePicker.astro
const languageDirection: { [key in TLanguage]: "ltr" | "rtl" } = {
en: "ltr",
fr: "ltr",
ar: "rtl",
};
// existing code
document.documentElement.setAttribute("dir", languageDirection[lang]); |
Beta Was this translation helpful? Give feedback.
Hello @omarhamid89! Tailwind does provide RTL support. If your site has a single direction, you just need to add
dir="rtl"to the<html>tag in theMainLayout.astrocomponent:<html dir="rtl" lang={lang} class="scrollbar-hide lenis lenis-smooth scroll-pt-16">.This will enable RTL support across your site. However, you might want to make some adjustments too, like swapping the border radius from the left to the right for certain sections, such as the pricing section, etc.