Jump to content
Search Community

SplitText hyphenated words break revert functionality

AvatarLabs test
Moderator Tag

Go to solution Solved by AvatarLabs,

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

I've run across an issue where I am pulling a chunk of text from a database and some of the words are hyphenated. When I try to use SplitText to animate the text block and then revert it once it's complete ( so the paragraph flows properly on resize ) there is a jump between the split text render of the text and the reverted state. The jumps occur when hyphenated words are close to the end of a line causing a line-break mid-hyphen. ( See Pen )

 

Is there a good way around this without having to adjust the text coming in?

 

Thanks.

See the Pen yJJBNZ by jfledd (@jfledd) on CodePen

Link to comment
Share on other sites

There are actually a bunch of issues to cover here (none of which are your fault), and I think I've got a solution...

 

First, the browser sees a regular dash character as a legitimate place to break a word onto another line but SplitText offers the ability to wrap each word in a <div> (and a "word" would include that dash), and a <div> cannot be split onto multiple lines thus it's fundamentally impossible to accommodate both behaviors. So part of the solution involves swapping in a non-breaking dash character in for the regular ones. 

 

Another problem is that most browsers these days have started doing some kerning by default which messes things up. For example, if you have the characters "Va" next to each other, the browser will render them closer together than if you wrap each in a <span> or <div>, like "<span>V</span><span>a</span>". A solution for that is to inject a zero-width non-joiner character ("‌") into those spots to prevent the kerning like "V‌a". 

 

Lastly, ligatures can really mess up the spacing as well. If you have an "f" and an "i" right next to each other, many browsers will nudge them together and make them into a special ligature. In theory you're supposed to be able to set a CSS property to prevent that, but in my experiments Firefox completely ignored all properties that are supposed to prevent ligatures. So again, the zero-width non-joiner character comes to the rescue. Injecting one between any occurences of "fi" will solve that. 

 

I whipped together a function that'll "clean" the text for you - all you've gotta do is pass in selector text OR an element OR a jQuery object: 

function cleanText(e) {
    if (typeof(e) === "string") {
        return cleanText(document.querySelectorAll(e));
    } else if (e[0] && e[0].innerHTML) {
        for (var i = 0; i < e.length; i++) {
            cleanText(e[i]);
        }
        return;
    }
    e.innerHTML = e.innerHTML.replace(/\-/g, "‑").replace(/V/g, "‌V‌").replace(/\./g, "‌.‌").replace(/,/g, "‌,‌").replace(/A/g, "‌A‌").replace(/fi/g, "f‌i");
}

Usage: cleanText("#text");

 
To help prevent ligatures from kicking in, it helped to put a tiny bit of letter-spacing, like -0.0005em. 
 
Firefox had some odd ways of antialiasing lines of text that didn't land on whole pixels, thus it's important to define a px-based line-height. 
 
Lastly, I noticed a bug in some browsers that caused them to report the offsetTop of the non-breaking dash incorrectly (like a few pixels off), so I had to make an adjustment in SplitText to work around that. I put an updated version of the codepen-specific SplitText here: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/SplitText.min.js
 
Phew!
 
Here's a fork of your codepen that seems to be working pretty well for me: 
 
Does that solve things for you? 
  • Like 5
Link to comment
Share on other sites

Wow! Now that's a solution.

 

And that fellow forum members is one of the big reasons why GreenSock is such a special company and GSAP is an amazing platform.

 

I cannot imagine that kind of service and attention anywhere but here. Not that you have to be a Club member to get answers here in the forum, but it's not a mystery why so many people choose to join Club GreenSock and get access to the incredible bonus plugins.

 

Well done Jack.

:)

  • Like 4
Link to comment
Share on other sites

Thanks for the kind words, @PointC. Yeah, this one took quite a few hours to figure out and solve but hey, I love a challenge :) We sure appreciate all the contributors here in the forums like yourself. You guys are very much a part of what the GreenSock brand stands for. Cheers!

 

@jfledd, please let us know if this resolves things for you and I can drop that revised SplitText into the official downloads for members. 

  • Like 1
Link to comment
Share on other sites

  • Solution

Wow, what an amazing response! Thank you very much @Carl and @GreenSock. This does indeed appear to fix the issue. Really appreciate the quick, very detailed and helpful response. You are absolutely correct @PointC, GSAP is an amazing platform and GreenSock, an outstanding company.

  • Like 1
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...