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

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.

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

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

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

I'm need to get SplitText to work for a right-to-left language (Hebrew, "direction: rtl" in CSS), but unfortunately SplitText messes up the letter order completely. Is there a way to get this to work correctly or is this a bug?

 

Thanks, ,

 

Pascal.

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

[Right and center aligned text not correctly split by SplitText?]

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

[Right and center aligned text not correctly split by SplitText?]

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

[Right and center aligned text not correctly split by SplitText?]

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. 

[Right and center aligned text not correctly split by SplitText?]

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

[Splittext indents normally invisible spaces wrapped onto new lines]

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. 

[Splittext indents normally invisible spaces wrapped onto new lines]

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

 

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

 

Any other ideas?

 

Thanks, Pascal.

[Splittext indents normally invisible spaces wrapped onto new lines]

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

[Splittext indents normally invisible spaces wrapped onto new lines]

Hi, I've added a CodePen to the original post.

[Splittext indents normally invisible spaces wrapped onto new lines]

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.

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