Shoelace: RTL Support

Created on 29 Aug 2020 · 10Comments · Source: shoelace-style/shoelace

Is your feature request related to a problem? Please describe.
Internationalization and the adaptation of UTF-8 became a necessity for Multilanguage apps.
a support for RTL in shoelace in its early stage in development will be great added advantage for developers.

Describe the solution you'd like
is it possible to put it under consideration while the project still in its alpha. As RTL support is lacked from many frameworks including Bootstrap.

Describe alternatives you've considered
using custom css on top of shoelace.
please consider this site https://rtlcss.com/playground/

feature help wanted

Source

MisterAnmar

Most helpful comment

In modern css you could use margin-inline-start which supports rtl natively

https://css-tricks.com/building-multi-directional-layouts/
https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-start

staabm on 30 Aug 2020

👍2

All 10 comments

This is something I'd love to get right, but I have zero experience with RTL languages. If someone wants to provide guidance, I'd love to make a reasonable effort to accommodate.

claviska on 30 Aug 2020

I'm not that good with shoelace yet. I have not dived into its core yet. But I'm really hoping for this project to grow. Its neet.
I can assist in RTL SUPPORT.

MisterAnmar on 30 Aug 2020

I managed to analyse the code your code is so elegant. It should not be difficult to have an RTL version. However. I never programed with ts.
I think a simple ts function is required to switch between the code RTL scss. Maybe a similar to the theme switcher style,
I will start working on it and show not take long and hopefully you will have the time to code the function for it.
I'm willing to be part of this project if its alright. And I will be the contributer for the RTL support if it alright.

Please let me know what's the procedure...

MisterAnmar on 30 Aug 2020

It might be good to start off explaining what needs to be done, before jumping into any code.

For example, how is RTL configured? There’s a dir attribute in HTML — do we use that?

Looks like there’s also a :dir selector in CSS. Where would this come into play?

I’d prefer to keep it simple and ensure we’re using native APIs as much as possible rather than introduce our own.

claviska on 30 Aug 2020

Well, simply there are few steps involved

html doc


<html lang="en">

Will change to

  <html lang="xx" dir="rtl">

This part will change the whole doc onto rtl including flex, grid, text direction,

In the css its not necessary but good practice


html{ 
direction: rtl;
}

Parts of the css files need to change
Example.
Margin-left: need to change to margin-right
You have it in the code in approximately 9 places
And few other minor things

Generally the issue with rtl is when the coder code specific alignments such as text align left and right
Or over using padding left or right
When I analyzed the code. Most of the code is symmetrical
You hardly used margin left or right. Or padding left or right which makes it pretty easy to achieve the RTL support with few lines of code.

I'm not sure yet. But I think a simple css file to overwrite some of the original css. Again I have not coded in ts before so I'm not sure...

MisterAnmar on 30 Aug 2020

I will show you a sample from your code.

Alert


     .alert__icon {
     ::slotted(*) {
    /*     margin-left: var(--sl-spacing-large); */
     margin-right: var(--sl-spacing-large);
    }
   }

as above this is the only line needs to be modified from the whole component.

so again im not familiar with TS but my humble suggestion would be it could a simple switcher
if(ltr){
'margin-left: var(--sl-spacing-large); '
}else{
'margin-right: var(--sl-spacing-large); '
}

and i could provide you with the list of things that need to be modified for you to analyze, hopefully will benefits you to come up with modular solution. I think its easy for you. God Bless.

the html opening html lang="xx" dir="rtl" handles the conversion of almost all the html and css except the rules that are set explicitly by the developer like the example above.

however, keep in mind this is not necessary everywhere like in tooltip component does not need to be modified.

MisterAnmar on 30 Aug 2020

In modern css you could use margin-inline-start which supports rtl natively

https://css-tricks.com/building-multi-directional-layouts/
https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-start

staabm on 30 Aug 2020

👍2

In modern css you could use margin-inline-start which supports rtl natively

https://css-tricks.com/building-multi-directional-layouts/
https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline-start

Edited: Added screen shots

interesting point @staabm . thanks.
inline style is not a good practice from my experience for who use a lot of dynamic generated data (serverside DB), added inline properties will not change the flex box layout, basically the whole layout design will maintain its direction it will work if you are designing a symmetrical interface and even then you will still have issues with aligning navigation ..etc, also its bit tricky with browsers due to support draft , Also RTL support is not just about content its about design as well, the design will flip to the RTL. see RTL see LTR

but based on the same article logical properties we could use the supported way till the logical properties are fully supported for example

to change the alert component to RTL i added this code


    html[dir="rtl"] sl-alert::part(icon) {
        margin-left: 0;
        margin-right: var(--sl-spacing-large);
    }

sample-screen

so when the user change his language from the doc type the browser will automatically use this properties.
With the above simple code the whole ALERT COMPONENT is fully supported for RTL

so there could be one of these as a solution

Adding a small css file to be included with the framework for RTL support (until Logical Properties fully supported)
can be build with the TS code as a function or something

for option 1 it can be maintained by external developers and point users to it and maintained separately and till the new CSS features are implemented logical properties . However, there will be times where the extension RTL is always late, that's the case with Bootstrap RTL. and the core developers need to keep in mind when designing new components try not to over use margin-left and right, padding-left and right, and text-align:left and right (the current use of right and left is minimum in the current code which makes it so easy to implement RTL support). the rest will be pretty easy to implement.

for option 2 the developers who are helping with the Shoelace core development have to work extra to make sure it works for both directions which presents a possibility of higher chances of bugs (many of the developers never had long experience with RTL).

My humble suggestion would be
lets try and build option 1 and tested for a while as the framework grow then the framework developers would see if it is possible of integrating it into the core or just keep it as simple external css file also see the outcome of the new css drafted feature logical-properties. Please comment on this?

MisterAnmar on 31 Aug 2020

inline style is not a good practice from my experience for who use a lot of dynamic generated data (serverside DB), added inline properties will not change the flex box layout, basically the whole layout design will maintain its direction it will work if you are designing a symmetrical interface and even then you will still have issues with aligning navigation ..etc, also its bit tricky with browsers due to support draft

I never said someone should use inline styles. the property mentioned can be defined like any other css property.
browser support ist pretty good so far: https://caniuse.com/#search=css-logical-props

I don't have opinions on this one - just wanted to share the modern way to solve this problem - which I learned about a few weeks ago.

feel free to solve it in the way you like most

staabm on 31 Aug 2020

inline style is not a good practice from my experience for who use a lot of dynamic generated data (serverside DB), added inline properties will not change the flex box layout, basically the whole layout design will maintain its direction it will work if you are designing a symmetrical interface and even then you will still have issues with aligning navigation ..etc, also its bit tricky with browsers due to support draft

I never said someone should use inline styles. the property mentioned can be defined like any other css property.
browser support ist pretty good so far: https://caniuse.com/#search=css-logical-props

My apologies i miss understood you.