Old thread but I was having issues with individual characters of custom fonts getting cropped at the left or right edge when using split text. The only thing that I found to work was to loop through the characters and add a few pixels to their width. Since splitting creates individually sized character divs, the divs were not wide enough to accommodate some of the characters. I did something like this:
mySplitText0 = new SplitText(".copy0", {type:"chars", charsClass:"characterClass", position:"absolute"}),
chars0 = mySplitText0.chars,
// pad the character width so there's no cutoff letters
for (var i=0; i<chars0.length; i++) {
var charWidth = $(chars0[i]).width();
$(chars0[i]).css("width", charWidth+5);
}
Hopefully this helps someone. It's a bit kludgy but this stumped a couple of people for a few hours until we came up with this hack.
Split Text Crop Char
in GSAP
Posted
Old thread but I was having issues with individual characters of custom fonts getting cropped at the left or right edge when using split text.
The only thing that I found to work was to loop through the characters and add a few pixels to their width. Since splitting creates individually sized character divs, the divs were not wide enough to accommodate some of the characters.
I did something like this:
mySplitText0 = new SplitText(".copy0", {type:"chars", charsClass:"characterClass", position:"absolute"}), chars0 = mySplitText0.chars, // pad the character width so there's no cutoff letters for (var i=0; i<chars0.length; i++) { var charWidth = $(chars0[i]).width(); $(chars0[i]).css("width", charWidth+5); }Hopefully this helps someone. It's a bit kludgy but this stumped a couple of people for a few hours until we came up with this hack.