Comments (5)
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.
from skeleton.
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
from skeleton.
I'd like to share some insights regarding the usage of Skeleton in the context of internationalization (i18n), specifically focusing on LTR/RTL support:
-
Naturally Supported:
- It's great to see that most components are naturally supported when used with caution alongside Tailwind.
-
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; }
-
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; }
- For components like buttons or navigation links with SVG and text, reversing the
-
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 inRTL
direction; it will be in the right! but the transition will set from right to left unlike if it is set asright
the transition will be from left to right. To address this, I found it helpful to dynamically set the position while theDrawer
is inltr
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">
- The Drawer component has a slight issue with the position param when using RTL, for instance if I choose
-
SlideToggle and LightSwitch components:
- Simple solution but not efficient is to use
dir="ltr"
in all cases :
<div dir="ltr"> <LightSwitch /> <SlideToggle /> </div>
- Simple solution but not efficient is to use
-
Consideration for
start
andend
:- I believe incorporating the
start
andend
keywords is crucial for robust LTR/RTL support. These should remain unaffected by the direction of the HTML when usingleft
andright
.
- I believe incorporating the
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.
from skeleton.
@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
from skeleton.
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.
from skeleton.
Related Issues (20)
- TreeViewItem does not work with Svelte 5 HOT 2
- Prune v2 changesets from the v3/next branch
- Add special comment to Tailwind config to enable HRM reloading on plugin changes
- Improve intermediate page navigation UI
- favicon.png HOT 2
- Modals prerequisites should also import Modal HOT 3
- error in docs
- Progress Bars: discrepancy in usage code HOT 1
- Codeblocks with shiki highlighter HOT 3
- Modal rendering inconsistent. Disappearing Modals. HOT 1
- NEXT Iconography Docs
- Feature request: Support popular routers like svelte-spa-router and routify HOT 6
- Integration: React Form Handling HOT 1
- NEXT Date Picker and Date Handling HOT 1
- Installing with bun hits exception HOT 2
- Add accessibility attributes to Autocomplete HOT 2
- [Skeleton v2] - Light scrollbar is displayed instead of dark one on Opera browser HOT 7
- Autocomplete page: Add blurb about importing popup in popup section
- AppRailTile and AppRailAnchor default styling
- progressbar.css in build HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from skeleton.