Jump to content
Search Community

SplitText: right-to-left languages (direction: rtl) not rendered correctly

plindelauf test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

"Text-align: right" does not cover it, unfortunately, since the punctuation is different.

 

I understand that you didn't have this use case in mind when designing SplitText (I didn't either), but it turns out that there are quite a few cultures that have RTL languages. From that perspective: is there any chance that you can look into this and hopefully come up with a solution?

 

Thanks,

 

Pascal.

  • Like 1
Link to comment
Share on other sites

I can definitely add this to the list of potential future enhancements. The challenge for us is that when we sort that list according to priority (because there's only so much time in each day), we have to evaluate which enhancements make the biggest difference for the largest number of users and unfortunately you're the only person who has ever requested this feature (to my recollection at least), so it's tough to have it trump some of the other things we're working on that'll make a bigger difference to the wider audience. In other words, it's not terribly likely that this will bubble to the top of the list and get delivered soon. 

 

That being said, if this is a big deal for a paying project of yours and you want to hire us to explore finding a solution for your scenario, we can talk about that. Also, if you signed up for your Club GreenSock membership to get SplitText and it didn't work the way you wanted, we can certainly issue a full refund and cancel the membership. Again, I really wish I had a better answer for you.

Link to comment
Share on other sites

I understand. I still enjoy SplitText a lot for non-RTL use so a refund won't be necessary. Thanks for the offer. 

 

Please do put it on your to-do list. Who knows others might ask for RTL-language support over time as well and then the votes might add up. 

 

Thanks, 

 

Pascal.

  • Like 1
Link to comment
Share on other sites

  • 1 year later...

Casting my vote for RTL support for this. Using it for a typewriter effect and it's typing words backwards since SplitText has to be taken down to the letter. One thought though, would be to reverse the order of each word's letters since that shouldn't mess up the GSAP animation. All GSAP cares about is the selector. 

 

So, since the html ends up looking something like this for, say, the word "watched"...

<div id="word">
    <div class="letter">d</div>
    <div class="letter">e</div>
    <div class="letter">h</div>
    <div class="letter">c</div>
    <div class="letter">t</div>
    <div class="letter">a</div>
    <div class="letter">w</div>
</div>

 

You could do something like this for each word...

See the Pen rzqKro?editors=1010 by swampthang (@swampthang) on CodePen

 

  • Like 1
Link to comment
Share on other sites

After creating the SplitText object, you could loop through each word and run the function like this...

 

var rtl = true; // assuming a checkbox for right-to-left, a listener set up to listen for checked and it gets checked.
var st = new SplitText(sect, {type: "chars, words, lines"}),

// check for rtl and reverse the letter content for each word
if( st.words.length > 0 && rtl ) {
  st.words.forEach(function(word,index){ // passing index if you need it for something
    var kids = Array.from(word.children); // have to convert the children from object to array
    reverseContents(word,kids);
  });
}

function reverseContents(word,kids){ // kids should be an array of letter container elements inside a word element
  var letterArr = kids.map(function(el){return el.innerHTML}); // get an array of the letters
  var reversed = letterArr.reverse(); // reverse the array
  for( let i = 0; i < reversed.length; i++ ) { // loop through the word's children and reset the order to the reversed array values
    word.children[i].innerHTML = reversed[i];
  }
}

 

Working fine for me. Doesn't really touch the animation because it's gonna go from right to left anyway if you've added style...

.container {
  direction: rtl;
}

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...