Jump to content
GreenSock

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

Splittext indents normally invisible spaces wrapped onto new lines

Go to solution Solved by Jonathan,

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'm using the following command to initialize SplitText: 

new SplitText(".content_wrapper", { type: "words,chars,lines", position: "absolute" })

on the following DOM element:

<div class="content_wrapper" style="width: 365px; height: 224px; opacity: 1; perspective: 400px;">Some text that indents with SplitText</div>

What goes wrong is the following: 

  1. The line splits between the word "that" and "indents" 
  2. SplitText indents the word "indent" with 10px if it thinks that the space between "that" and "indents" does not fit behind "that" anymore. The effect is shown in the attached screen shot and highlighted with the red box. 
  3. If you make the parent div a bit wider, you can get to the point where SplitText *does* think the space fits behind the word "that" and then the word "indents" is not indented. 

The problem is related the the following style setting:

white-space: pre-wrap;

Could you please have a look at this problem and (hopefully) solve it quickly. It goes wrong in a lot of our use cases... :(

 

Thank you. 

 

Pascal.

post-39969-0-56751300-1448030573_thumb.png

post-39969-0-49776200-1448030964_thumb.png

See the Pen ZbZObj by plindelauf (@plindelauf) on CodePen

Link to comment
Share on other sites

Hello plindelauf, and Welcome to the GreenSock Forum!

 

To better help you can you please create a codepen demo example. This way we can see your code in action and in live editable environment.

 

 

You could also use this SplitText codepen by GreenSock to get you started with building an example:

 

See the Pen mvhak by GreenSock (@GreenSock) on CodePen

 

Also this is the SplitText Docs page:

 

http://greensock.com/docs/#/HTML5/GSAP/Utils/SplitText/

http://greensock.com/SplitText

 

:)

  • Like 2
Link to comment
Share on other sites

Hi plindelauf :)

 

pls remove this line from your css : white-space: pre-wrap;

  • Like 2
Link to comment
Share on other sites

Haha... yes, that would be an option if I wouldn't need it. It's there for a reason. :)

 

The problem is that SplitText does not handle the "white-space: pre-wrap;" the same way the browser does. I would expect SplitText to seamlessly split any formatted text, but that does not hold in this case. 

 

Is this solvable in SplitText?

 

Thanks, Pascal
Link to comment
Share on other sites

Hi Plindelauf,

 

Welcome to the forums. Sorry to hear you are having trouble with SplitText and white-space:pre-wrap.

Your demo is certainly helpful. 

 

2 things I've noticed:

 

  • results seem to vary based on what font is used. for instance I removed Bevan and it worked with my default font
  • unwanted indent goes away when you switch to position:"relative" in the SplitText config vars.

These are simply findings and not solutions.

 

We will certainly look into this further and let you know what we find.

  • Like 1
Link to comment
Share on other sites

This looks like a browser bug with letter-spacing. I think the issue is because you are using a web font that is calculating letter-spacing differently, since the letter-spacing default is normal and that is calculated differently in each browser, especially with a web font.

 

Check this out.. if i defined the letter-spacing at 1px default in the CSS, it gets inherited on its children. And then SplitText will calculate correctly since you define letter-spacing, since the browser default is normal which is buggy for web fonts.

 

The following works:

 

See the Pen GpLjJy by jonathan (@jonathan) on CodePen



Add letter-spacing: 1px to your CSS .content-wrapper class rule:

.content_wrapper {
  font-family: "Bevan";
  font-size: 60px;
  background-color: grey;
  width: 315px;
  height: 300px;
  line-height: 119%;
  white-space: pre-wrap;

  letter-spacing: 1px; /* define letter-spacing at 1px since default is normal */
}

I think this is not a GSAP bug but a browser bug and how the browser references web font text with letter-spacing.  Since the default letter-spacing is normal and that is calculated differently in each browser.

 

:)

  • Like 1
Link to comment
Share on other sites

Hmmm... unfortunately adding the "letter-spacing: 1px" does not make a difference. See:

See the Pen ZbZObj by plindelauf (@plindelauf) on CodePen


 

I'm running Chrome 46.0.2490.86 on OS X...

 

Any other ideas?

 

Thanks, Pascal.

Link to comment
Share on other sites

Did you test using

See the Pen GpLjJy by jonathan (@jonathan) on CodePen

? I am  using latest Chrome version Version 46.0.2490.86 m

 

See the Pen GpLjJy by jonathan (@jonathan) on CodePen

 

I am on Windows 7 (64-bit) .. i even tested on latest Firefox and IE.. and it works!

 

Your original codepen had a width of 315px. So i used letter-spacing 1px

 

Your second codepen from above has a width of 325px. and i saw that gap in Chrome, but I used a letter-spacing of 2px, and it fixed it.

 

Here is a fork of your second codepen using letter-spacing 2px

 

See the Pen ZbZLRw by jonathan (@jonathan) on CodePen

 

You might have to play with letter-spacing since it looks like the width has some bearing on the letter-spacing calculation.

 

:)

  • Like 1
Link to comment
Share on other sites

  • Solution

Alright i just tested this with both of your widths from your first and second codepen. white-space:pre-wrap is causing the issue.

 

You can set the letter-spacing using ems or px, it just needs to be defined... and also do as Diaco suggested above and remove white-space:prewrap since that is also calculated differently in each browser.

 

So don't use white-space:pre-wrap; and define a letter-spacing value.

 

Add this:

 

See the Pen ZbZLdd by jonathan (@jonathan) on CodePen


 

.content_wrapper {
  /*white-space: pre-wrap;*/ /* this is also calculated differently in each browser */
  letter-spacing: 0.005em; /* define a letter-spacing value */
}

Or use my previous solution by defining letter-spacing value and Diacos advice about removing white-space:pre-wrap:

 

See the Pen xwegmG by jonathan (@jonathan) on CodePen


 

.content_wrapper {
  /*white-space: pre-wrap;*/ /* this is also calculated differently in each browser */
  letter-spacing: 1px; /* define a letter-spacing value */
}

Either way... to fix this, don't use white-space: pre-wrap; and define a letter-spacing value.

 

Again this is how browsers handle different CSS properties, and not a GSAP bug. Anytime a CSS value is other than a numerical length, and a keyword is used. You will have some browser bugs or quirks in how they calculate those keyword values.

 

i.e. the normal keyword for letter-spacing and the pre-wrap keyword for white-space in CSS

 

:)

  • Like 1
Link to comment
Share on other sites

Ok, clear. I will have to find a way to work around the "white-space: pre-wrap" then... too bad. But I do see how this is caused by different browser implementations. 

 

Thanks for the very quick responses, though. I really appreciate that!

 

Cheers, Pascal. 

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