Embla-carousel: Add RTL Support

Created on 6 Jan 2020 · 21Comments · Source: davidcetinkaya/embla-carousel

Hi @davidcetinkaya - May I know if there's a future plan for RTL support or if there is a workaround for now, please let me know. Thank you!

feature request resolved

Source

ppromerojr

Most helpful comment

Hi David (@davidcetinkaya),

for sure, just give me info when it's finished

Please open this ticket again or just tag me in the pull request so we can follow.

omarkhatibco on 6 Nov 2020

🎉2 👍2

All 21 comments

Hi Pabs (@ppromerojr),

Thank you for your question.

To be honest I don't have much experience working with webpages and RTL support. I might be missing some important details but I've made an effort to setup an example for you so please take a look at this 👉 CodeSandbox.

I'm making use of flexbox to reverse the slides:

.embla__container {
  display: flex;

  /* Reverse slides */
  flex-direction: row-reverse;
  justify-content: flex-end;
}

I'm also starting at the last slide when Embla is initialised like so:

embla.on('init', () => {
  const startIndex = embla.scrollSnapList().length - 1;
  embla.changeOptions({ startIndex });
});

Let me know if this helps!

Best,
David

davidcetinkaya on 7 Jan 2020

❤1

Hi @davidcetinkaya - This helps me a lot. Thank you!

ppromerojr on 8 Jan 2020

🎉1

Hello again Pabs (@ppromerojr), I’m glad it helped 🙂.

Cheers!
David

davidcetinkaya on 8 Jan 2020

@davidcetinkaya will you accept a PR regarding RTL Support ?

omarkhatibco on 3 Feb 2020

Hi Omar (@omarkhatibco),
Thank you for your question 👍.

Before we dive into code changes, would you mind explaining why the solution provided in this conversation isn't sufficient? This would make me understand this feature request better and I'd appreciate that. I understand that the provided solution still means that developers implementing RTL have to work with a LTR biased library. Are there any additional concerns to this?

Thank you in advance,
David

davidcetinkaya on 4 Feb 2020

Hi David (@davidcetinkaya),

The solution you provided works great! but it needs some work when I need to support both (RTL,LTR) layout.
The second problem is with startIndex is now not 0 with the first slide, now going to some slides(eg: 5) will need some coding to get the opposite index.

In browser when I changed the layout from LTR to RTL I did not change anything inside flexbox, it has flipped automatically, and that is my imagination about the solution in Embla, zero code changing just flip direction in css.

I did not check the code yet, but I think we need just to refactor the function that generate transform.

It's about making Embla more native as Flexbox or CSS Grid.

omarkhatibco on 4 Feb 2020

👍1

Thank you for the clarification Omar (@omarkhatibco).

I'd like to try changing to RTL in the browser in order to try what you mentioned. Would you mind helping me with how I do that in Chrome?

The startIndex part is quite easy to change to RTL but in order to understand this better I'd like to try it and get first hand experience of how a browser handles RTL. This would be great in order to discuss possible implementations and agree upon a preferable approach together.

Best,
David

davidcetinkaya on 6 Feb 2020

Hi David (@davidcetinkaya),

Browser flip everything except margin and padding
this is a project in RTL I'm working on
https://faris-groupcom-git-next.omarkhatibco.now.sh/properties/makyol-yasam

with developer tools try to edit the css for html, body there is a direction property with RTL value, try to change it to LTR and see the effects.

Also another problem I had with your solution that flex: 0 0 auto on slide is not working as in LTR Mode so I hat to calculate the flex-basis for each image to get the slider work.

Thank you
Omar

omarkhatibco on 6 Feb 2020

👍1

Thank you Omar (@omarkhatibco). So before I start testing, which one is preferred for RTL?

Is this correct:

<html dir="rtl">
  ...content
</html>

Or this?

html, body {
  direction: rtl;
}

Or are they equivalent?

Kindly,
David

davidcetinkaya on 6 Feb 2020

Hi David (@davidcetinkaya )
They do the same thing but I would choose the first one because it's easier to check in Javascript

document.documentElement.dir

after a bit search on google the first one is recommended by W3C
https://stackoverflow.com/questions/5375799/direction-ltr-rtl-whats-the-difference-between-the-css-direction-and-html-di

Thanks
Omar

omarkhatibco on 6 Feb 2020

👍1

Hello again Omar (@omarkhatibco),

Nice digging, thank you for the information ⭐️. I'll have a look at this and let you know when I've done so. In the meantime, feel free to share any information that could be of use.

Kindly,
David

davidcetinkaya on 7 Feb 2020

Hello Omar (@omarkhatibco) and Pabs (@ppromerojr),

I guess better late than never, but I've think I've got a working draft of a real RTL implementation 😅. Would you mind testing this feature so we can correct any bugs before a release, if I were to setup a CodeSandbox example for you?

Thank you in advance!
David

davidcetinkaya on 6 Nov 2020

Hi David (@davidcetinkaya),

for sure, just give me info when it's finished

Please open this ticket again or just tag me in the pull request so we can follow.

omarkhatibco on 6 Nov 2020

🎉2 👍2

Thank you the very quick response Omar (@omarkhatibco)! I will let you know as soon as I have the CodeSandbox ready.

davidcetinkaya on 6 Nov 2020

Hi @davidcetinkaya - Thank you so much for considering this feature. I'm more than excited to check it out. Salamat!

ppromerojr on 6 Nov 2020

👍1

Hi Pabs (@ppromerojr),

Thank you for your response. I'm glad to hear that, the more the merrier when it comes to testers 🙂.

davidcetinkaya on 6 Nov 2020

Hi again Omar (@omarkhatibco) and Pabs (@ppromerojr),

Here comes the CodeSandbox with RTL support. The CodeSandbox includes the code changes in this PR #115. Once you've tested it and it's working as expected, the PR will be merged and released for public use.

You can check out the Embla API Reference for options and methods to test. Any option or method that works with a LTR setup should also work with a RTL setup. Please note that it's worth taking some time to test the LTR setup too, so we can make sure that nothing broke when I added the support for RTL.

Thank you in advance!

Best,
David

davidcetinkaya on 9 Nov 2020

Hi David (@davidcetinkaya),

I did test both RTL & LTR, seems good for me.

Thank you !

omarkhatibco on 10 Nov 2020

❤1 🎉1

Hello Pabs (@ppromerojr),

Let me know if you’re planning to test the CodeSandbox mentioned here.

Cheers,
David

davidcetinkaya on 10 Nov 2020

Hello Pabs (@ppromerojr),

Let me know if you’re planning to test the CodeSandbox mentioned here.

Cheers,
David

Hi @davidcetinkaya - I have tested the RTL including the important features like progress, selectedSnaps - all is working as expected. Thank you for making this feature possible. 🥳

ppromerojr on 11 Nov 2020

❤1 🎉1

Thanks for all the help Omar (@omarkhatibco) and Pabs (@ppromerojr)!

I've released this feature with v4.1.0. Read more about the release here. And good news! This feature doesn't add any weight to the Embla library. It actually comes with a slightly reduced bundle size.

Welcome to the contributors club guys. Don't forget to spread the word on Reddit or similar. Enjoy :tada:!