Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Monops

SplitText and fonts

Go to solution Solved by Monops,

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

Hello!

 

I noticed that if I use SplitText on a div containing text, and that div has a class defining a font, than Splittext will fail in creating the lines array, making an array of lines that is pretty much wrong: the lines are always too long or too short, never correct.

 

I've made a small example in codepen up there: can you tell me if I'm doing something wrong?

 

Cheers!

Alex

See the Pen QwyYNL by anon (@anon) on CodePen

Link to comment
Share on other sites

Actually, I think I just need to wait for the document to be loaded before the split. I update the code: can you check if that was the reason?

Link to comment
Share on other sites

Hi Alex,

 

I forked your pen and I see nothing wrong with it.

 

Now that I look at your post I did included the splitText() call in an event handler, therefore the page was correctly rendered before creating the split array. You can check it here:

 

See the Pen pvgGRj by rhernando (@rhernando) on CodePen

 

Rodrigo.

  • Like 3
Link to comment
Share on other sites

Nope, just change the font-size and see that the lines gets all wrong.

Link to comment
Share on other sites

I just reproduced the use case I have in my code, where the div is filled in JQuery: try changing the font-size and you'll notice it will not fit :(

Link to comment
Share on other sites

Hi Monops,

 

Sorry for the trouble and thanks for demo.

I tested Rodrigo's demo in 3 browsers and could not see anything wrong.

Here is what happens in Chrome, FireFox and Safari: http://greensock.com/temp/splitBug.mp4

 

Is there something we should be doing differently to see the problem?

  • Like 1
Link to comment
Share on other sites

just saw your note about changing the size in your demo... that seems to work too.

http://greensock.com/temp/splitBug2.mp4

 

please note that I am hitting the "run" button and not relying on CodePen's auto-refresh.

 

Go to js panel config and deselect "auto update preview"

Link to comment
Share on other sites

Hello!

 

No, it's not that: I've done a full example for you, showing the problem. Just check the "SmallTest.html" file, the rest is just includes :)

It gives me this outcome on chrome:

7y9L3C.jpg

 

For my work, I only need this to work on chrome.

Link to comment
Share on other sites

it appears you are not waiting for the font to load. I added a simple delay and it worked fine. jQuery's ready does not wait for fonts to load and be applied.

 

TweenLite.delayedCall(1, split)
function split(){
var split = new SplitText("#content", {type:"lines"});
}
 
It works fine. I deleted your zip as we do not want folks sharing the members only files.
Feel free to continue to use the CodePen demos, I didn't see anything in your test that wouldn't work on CodePen.
 
Thanks
  • Like 1
Link to comment
Share on other sites

Also Google "Google font loader" to do this the right way... Its API lets you respond to when the fonts are ready.  I'm literally running out the door at the moment...

Link to comment
Share on other sites

Thanks!

 

I tried your fix and works, but it's a little arbitrary :) I cannot use the google font library as it works for the web fonts, while in my case I only deal with local fonts.

$(window).on("load", handler) does not work as well. do you have a better solution? :)

Link to comment
Share on other sites

  • Solution

Ok, I think I won over the machine with webfont loader using the custom tag:

WebFont.load({
custom: {
families: ['TypeWriter'],
urls: ['../GenericInclude/css/dpLib.css']
},
 
That preloads the font like a boss :)
Link to comment
Share on other sites

Awesome. Yeah, and just so you know, I agree that it does seem strange that even locally you need to wait for the font to get loaded and rendered.

But the problem is that SplitText is taking its measurements before the custom font gets displayed.

 

If you take SplitText out of the picture completely and use jQuery's width() to get the width of a <span> with your custom font you will often get messed up measurements too. Using font loader is the way to go.

 

Also, for you and anyone else that needs a nice reference, this pen pretty much shows all the different events and capabilities of Google WebFont Loader:

http://codepen.io/GreenSock/pen/tnADg

  • Like 3
Link to comment
Share on other sites

Hello Monops,

 

To add to Carl's and Rodrigo's great advise, I am late as usual:

 

Like Carl said, the jQuery ready() wont wait for web fonts to be loaded. So you could add your window.load inside your jQuery ready(). Sometimes the window loads before the DOM is ready. So you can make sure the DOM is ready before checking the window.load event. If the window load event is fired before the ready() event, then the window.load event will fire immediately after the jQuery ready(). So this way you make sure the DOM Is always ready before the window.load is fired. Making sure images, links and web fonts are fully loaded:

 

This is what i usually do when dealing with making sure my assets are fully loaded and ready before trying to animate them.

:

// fire when DOM is fully loaded
$(document).ready(function(){

        // fire when window is loaded (images, links, fonts, etc..)
        // this fires immediately if the window loaded before the DOM was ready for some reason
        // you could also use native javascript window.load function as well instead of jQuery load event
        $(window).on("load", function(){

                  // code goes here

        });

});

:

But Carl's solution of using the Google Web Font Loader is spot on!

 

I hope this helps :)

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