NEXT: Internationalization (i18n)

[endigo9740]

[!WARNING] This issue is a work in progress.

This will act as a hub to centralize this information.

Maintainer Requests

The following requests are coming straight from the Skeleton team. These are highly likely be implemented:

• Tailwind blog announcement
• LTR/RTL support
• MDN Logical Properties docs

Community Requests

The following requests have come from the community and are under consideration:

• n/a

Bugs and Issues

• n/a

Feedback

If you have additional updates or requests for this feature, please do so in the comments section below.

[clibequilibrium]

@endigo9740 does it mean that Skeleton V3 will have built in support for localization ? or is it still preferred for the user to use https://github.com/sveltekit-i18n

[endigo9740]

Skeleton does technically have some i18n support - such as no hardcoded english text or phrases. They can all be replaced via props. The Stepper component stepTerm prop comes to mind here.

Skeleton cannot support SvelteKit-only feature. This would break support for using Svelte in a basic Vite project, Astro project, etc. It never has and never will. So any change we implement will need to be "universal".

i18n (and localization) are not a singular homogenous "thing". The links I provided above are all specifically Tailwind/CSS specific properties we can use, which would fall into the category of being universal though. This can help with features like "left to right" and "right to left" alignment, which are a part of a bigger concept.

So the short answer here is, your local i18n solution is up to you. But for Skeleton we're limited on capability. However in most cases you may can pair your tool with our exposed props, etc.

[clibequilibrium]

Skeleton does technically have some i18n support - such as no hardcoded english text or phrases. They can all be replaced via props. The Stepper component stepTerm prop comes to mind here.

Skeleton cannot support SvelteKit-only feature. This would break support for using Svelte in a basic Vite project, Astro project, etc. It never has and never will. So any change we implement will need to be "universal".

i18n (and localization) are not a singular homogenous "thing". The links I provided above are all specifically Tailwind/CSS specific properties we can use, which would fall into the category of being universal though. This can help with features like "left to right" and "right to left" alignment, which are a part of a bigger concept.

So the short answer here is, your local i18n solution is up to you. But for Skeleton we're limited on capability. However in most cases you may can pair your tool with our exposed props, etc.

Thank you for the explanation

[khalidfsh]

I'd like to share some insights regarding the usage of Skeleton in the context of internationalization (i18n), specifically focusing on LTR/RTL support:

1. Naturally Supported:

   • It's great to see that most components are naturally supported when used with caution alongside Tailwind.

2. Custom Classes for Clarity:

   • In some cases, adding custom classes helps me in achieving better clarity. For instance:

   [dir='rtl'] .rounded-ts-token {
       @apply rounded-tr-token;
   }
   [dir='ltr'] .rounded-ts-token {
       @apply rounded-tl-token;
   }
   

3. Handling Margins in RTL:

   • For components like buttons or navigation links with SVG and text, reversing the x direction for margins proves helpful:

   [dir='rtl'] .btn,
   [dir='rtl'] .list-nav a,
   [dir='rtl'] .chip {
       @apply space-x-reverse;
   }
   

4. Drawer Component Adjustment:

   • The Drawer component has a slight issue with the position param when using RTL, for instance if I choose left position when in RTL direction; it will be in the right! but the transition will set from right to left unlike if it is set as right the transition will be from left to right. To address this, I found it helpful to dynamically set the position while the Drawer is in ltr direction in all cases, so the transition animation would be in the rightful position too:

   <script lang="ts">
       // ... imports
   
       $: drawerPosition =
           (isRTL($locale) ? 'right' : 'left');
   
       // Drawer Handler
       function drawerOpen(): void {
           const settings: DrawerSettings = 
               { id: 'drawer-id', position: drawerPosition };
           drawerStore.open(settings);
       }
   </script>
   
   <span dir="ltr">
       <Drawer }>
           <span dir={isRTL($locale) ? "rtl" : "ltr">
   
   

5. SlideToggle and LightSwitch components:

   • Simple solution but not efficient is to use dir="ltr" in all cases :

   <div dir="ltr">
       <LightSwitch />
       <SlideToggle />
   </div>
   

6. Consideration for start and end:

   • I believe incorporating the start and end keywords is crucial for robust LTR/RTL support. These should remain unaffected by the direction of the HTML when using left and right.

Thank you all for your time and dedication to making Skeleton even better! Your efforts are truly appreciated. Also, I would like to contribute if something is open about i18n.

[endigo9740]

Thank you for the kind words and thoughtful response @khalidfsh. We're still working through some of the foundational items, like the plugin and theme at the moment, but i18n will definitely be on our radar as we transition forward and move into components. I'll definitely reach out if there's something we could use specific help with. Otherwise I don't mind having someone watching over our shoulder as we put out previews in the future. Let us know what's working and what's not. Where there's room for improvement, etc.