Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Support for right-to-left languages #20

Open
ashraffayad opened this issue Jan 7, 2016 · 5 comments
Open

Support for right-to-left languages #20

ashraffayad opened this issue Jan 7, 2016 · 5 comments
Labels
feature-request

Comments

@ashraffayad
Copy link

Nice work.
For the horizontal scrollbar, would be great to have support for right-to-left languages. Like 'Arabic','Hebrew','Farsi','Urdu'... etc.
@noeldelgado
Copy link
Owner

Hi Ashraf, absolutely, that’s important.

I just made a quick test by setting the direction: rtl; css-declaration on my scrollable element and the scroll event works as expected. However if I click the scrollbar-track or if I try to drag the scroll-thumb then the behavior is broken.

Is that what you are referring to? or better, can you list the problems you are facing right now by using this lib? also, a small jsbin, codepen, etc would be useful too. I just want to have a better understanding about the problem/s that needs to be solve.

:) thank you

@ashraffayad
Copy link
Author

Hi noeldelgado,

Thanks for responding. I really like the scrollbar you created. Specially the elegant, simple css.
I created a "gist". with 2 horizontal scrollers. The second one has 'direction:rtl' in the style of the parent div.

http://requirebin.com/?gist=0847f1bb9ef757414516

  • On the latest Chrome, the scroll-thumb doesn't display at all.
  • On the latest Firefox, the scroll-thumb displays and is correctly aligned to the right side as it should, however, it scrolls only after dragging far to the left side.

I hope this helps.

Thank you.

@noeldelgado
Copy link
Owner

Thank you @ashraffayad!, that helps. ;)

For now, about the implementation, I am thinking about adding a new option e.i. rtl: {Boolean} [false], which in case to be true it will add the direction: rtl; css-declaration to the element and handle the drag|click accordingly. Just need to find some time to work on it.

@ashraffayad
Copy link
Author

Usually the direction:rtl is set on the <html> element and it propagates down the dom tree.
for example <html lang="ar" class="rtl">

Would it be nicer to make the scrollbar "direction-sensitive" by default?
If the direction:rtl already exists somewhere up the dom tree, then there's no need to add it again in the plugin css-declaration.

You could easily detect that and invert the calculations accordingly.

var isRtl = getComputedStyle(scrollElementl).direction === 'rtl';
if(isRtl){
    // go ahead and invert the calculations
}

@noeldelgado
Copy link
Owner

@ashraffayad that's even better, like it 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
feature-request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@noeldelgado @ashraffayad