Regarding Text exports one character per <text> element #657

[DTDK]

Hi hernan iIf I understand correctly in order to get a single string of text instead of per character I need to use a tspan pair of tags, where do I add the tspans? in the .json file?

[bodymovin]

hi, that happens automatically when certain conditions are met. No animators and no box text.

[saadbruno]

@bodymovin I think there is a regression on this on 5.9.0

I created a new text layer with no animations, and no box text, and the web player still renders it as one character per element.
If I use 5.8.1, it will render as a single <tspan>

[Spo-oky]

I have the same problem, I've testes all versions and work ok but none of the versions 5.9.X.
In all 5.9.X the word turns into separate characters.

Anyone found out how to fix this or what do we need to do in After Effects to be a word again?

[saadbruno]

Still looking into this issue.

There has definitely been some changes to the code that dictates how the text should render.

Seems like this is the piece of code that will render text as a single <tspan>:

lottie-web/player/js/elements/svgElements/SVGTextElement.js

Lines 113 to 150 in 14dc0cb

	if (singleShape && !usesGlyphs && !documentData.sz) {
	var tElement = this.textContainer;
	var justify = 'start';
	switch (documentData.j) {
	case 1:
	justify = 'end';
	break;
	case 2:
	justify = 'middle';
	break;
	default:
	justify = 'start';
	break;
	}
	tElement.setAttribute('text-anchor', justify);
	tElement.setAttribute('letter-spacing', trackingOffset);
	var textContent = this.buildTextContents(documentData.finalText);
	len = textContent.length;
	yPos = documentData.ps ? documentData.ps[1] + documentData.ascent : 0;
	for (i = 0; i < len; i += 1) {
	tSpan = this.textSpans[i].span || createNS('tspan');
	tSpan.textContent = textContent[i];
	tSpan.setAttribute('x', 0);
	tSpan.setAttribute('y', yPos);
	tSpan.style.display = 'inherit';
	tElement.appendChild(tSpan);
	if (!this.textSpans[i]) {
	this.textSpans[i] = {
	span: null,
	glyph: null,
	};
	}
	this.textSpans[i].span = tSpan;
	yPos += documentData.finalLineHeight;
	}
	this.layerElement.appendChild(tElement);
	} else {

But it seems that singleShape will never evaluate to true, because the part that sets it to true is commented out:

lottie-web/player/js/utils/DataManager.js

Lines 486 to 490 in 14dc0cb

	function completeText(data) {
	if (data.t.a.length === 0 && !('m' in data.t.p)) {
	// data.singleShape = true;
	}
	}

Seems like the commit that changed it was 2af2f64

Now, I don't understand why this was changed. I'm assuming it is to add new features and bugfixes. But losing the ability to render a single tspan is really keeping me on v5.8.1

Hernan can you give us a pointer here?