Right and center aligned text not correctly split by SplitText?

[plindelauf]

Hi, 

 

I'm using SplitText with "position: absolute" to be able to also split justified text. However, in all non-left-aligned scenarios, SplitText adds a right margin to the all but the last line, which messes up the whole text block.

 

Without the "position: absolute", center and right aligned texts are split fine, but then justified text does not get split correctly at all...

 

Is there any way to make this work for all text alignments?

 

Thanks, 

 

Pascal.

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

[Jonathan]

Hello Pascal,

 

This looks like it is only happening in webkit based browser like Chrome and Safari

 

So it is better to use position: "relative" in your SplitText constructor value for position.

 

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

 

The position properties default is relative, so you shouldn't have to set this to absolute unless you really need to

 

webkit based browser seem to be buggy in how they calculate absolute positioning on nested elements for text-align.

function split() {

  var st = new SplitText($(".content_wrapper"), {
    type: "words,chars,lines",
    position: "relative" /* use relative instead of absolute, or leave out position since relative is default */
  });

  $(".content_wrapper").css("background-color", "red");
}

You could have fixed this with specific CSS that only targeted webkit based browsers but it is just better to use relative for position in your SplitText() constructor, which is the default value for position.

 

Taken from the SplitTextPlugin Docs:

• position : String - if "absolute", the position css style for all of the resulting <div> elements will be "absolute" and their "top", "left", "width", and "height" css properties will be calculated and applied inline which can be useful for certain effects. In IE8 and earlier, this provides better support for 2D transforms like rotation, scale, etc. It costs a bit more to split initially performance-wise, but it can improve performance during animation because the browser doesn't have to do as many reflow calculations (in most cases). Keep in mind that once you split things using position:"absolute", if the containing element is resized, the split text chunks won't reflow. And if position is not specifically set to"absolute", it will be "relative" [default: "relative"]

If the element uses justified text (text-align:justify), you must use position:"absolute" for the SplitText because divs that remain in the document flow cannot be justified.

 

.

[Jonathan]

Ok Pascal.. If you really wanted to keep position absolute you could do this for text-align:center

 

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

 

The below only applies to webkit based browsers to adjust the SplitText divs for these text-align center webkit bugs:

/* target only webkit based browsers */
@media screen and (-webkit-min-device-pixel-ratio:0){ 
  
  .content_wrapper > div > div > div{
    margin-left:6px;
  }

  .content_wrapper > div:last-of-type div > div {
    margin-left:0;
  }
}

x

And with position absolute you could do this for text-align: right

 

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

 

The below only applies to webkit based browsers to adjust the SplitText divs for these text-align right webkit bugs:

/* target only webkit based browsers */
@media screen and (-webkit-min-device-pixel-ratio:0){ 
  
  .content_wrapper > div > div > div{
    margin-left:16px;
  }

  .content_wrapper > div:last-of-type div > div {
    margin-left:0;
  }
}

But if it was me i would just use position relative in SplitTextPlugin which is the default

 

[plindelauf]

Thanks for the quick and elaborate answer, Jonathan. Too bad that we're running into browser-specific quirks here. I'm going to see what workaround suits us best. I'll let you know. 

[plindelauf]

Ok, I experimented with your suggestions. One important constraint is that I need a generic solution that works with any text, any font family, any font size and any alignment. Therefore, hard-coded margins won't work. Thus, the simplest solution for now is to use "position: relative" for all but justified text and "position: absolute" for all justified text.

 

But I would still need some generic solution for the incorrect positioning of the justified text. Would there be any "relative correction" that would work for justified text? (I'm guessing, probably not, since then it might have already been added as functionality to SplitText...?)

 

Thanks, Pascal

[Jonathan]

Here you can see that even with text-align: justify and before SplitText is even applied.. justify does not look pleasant

 

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

 

You would have to adjust your font-size appropriately to have text-align justify look good, and that is even without SplitText being applied.

 

SplitText doesn't add position absolute until you click that Split button.

 

text-align justify is only good when you have lots of text, but most of your text is like only 1 or 2 words on each line, so i dont see text-align justify being an option since justify is meant for many words on each line, even without SplitText.

 

Will you have more text in the box versus what you have now?

[Jonathan]

I was also wondering why you need to have the SplitTextPlugin position property at absolute?

 

WebKit based browsers have the most browser bugs when it comes to text, especially with text-align and absolute.

 

The SplitTextPlugin position property default is relative.

 

Using position relative is perfectly fine since all that does is allow the origin point to be at the initial relative position of that text. Using relative still brings the text outside the flow of the document, just like absolute. The only difference being is its origin point.

 

The only CSS position property that keeps the element in the normal flow of the document is CSS position static.

 

The browser will calculate based on different origin points for absolute and relative.

• absolute - computed based on its nearest ancestor that has position relative, or the top / left corner of the browser window
• relative - computed based on its current relative position

Both absolute and relative will still be outside the normal flow of the document.

 

So when dealing with webkit based browsers, I would just suggest you either leave the SplitTextPlugin position  property out, or just declare it as relative.

 

Either way position relative resolves this webkit bug.

 

It is perfectly safe to use position relative, since you can see that your text remains in the same place.

 

With text, position relative is your cross browser friend

 

Resources:

CSS position property reference: https://developer.mozilla.org/en-US/docs/Web/CSS/position

W3C CSS position property spec: http://www.w3.org/TR/CSS2/visuren.html#propdef-position

[plindelauf]

Hi Jonathan. Yes, you're right. Justified text only looks good with longer text and that is indeed what I need this to work for as well. The short text in the CodePen is only there for illustration.

 

Thanks, Pascal