Add RTL Support about embla-carousel HOT 21 CLOSED

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.

from embla-carousel.

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

from embla-carousel.

Hi David (@davidcetinkaya),

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

Thank you !

from embla-carousel.

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. 🥳

from embla-carousel.

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

from embla-carousel.

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.

from embla-carousel.

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

from embla-carousel.

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

from embla-carousel.

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

from embla-carousel.

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 🎉!

Bundle size before release

Bundle size after release

Best,
David

from embla-carousel.

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

Cheers!
David

from embla-carousel.

@davidcetinkaya will you accept a PR regarding RTL Support ?

from embla-carousel.

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

from embla-carousel.

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

from embla-carousel.

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

from embla-carousel.

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

from embla-carousel.

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

from embla-carousel.

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

from embla-carousel.

Hi Pabs (@ppromerojr),

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

from embla-carousel.

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

from embla-carousel.

Hello Pabs (@ppromerojr),

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

Cheers,
David

from embla-carousel.