gemini-scrollbar icon indicating copy to clipboard operation
gemini-scrollbar copied to clipboard

Support for right-to-left languages

Open ashraffayad opened this issue 8 years ago • 5 comments

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

ashraffayad avatar Jan 07 '16 19:01 ashraffayad

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

noeldelgado avatar Jan 08 '16 01:01 noeldelgado

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.

ashraffayad avatar Jan 08 '16 09:01 ashraffayad

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.

noeldelgado avatar Jan 10 '16 02:01 noeldelgado

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
}

ashraffayad avatar Jan 10 '16 10:01 ashraffayad

@ashraffayad that's even better, like it :+1:

noeldelgado avatar Jan 10 '16 11:01 noeldelgado