Lottie-web: Text exports one character per <text> element

[shuams]

First off, just wanted to say this is groundbreaking stuff and you're a genius. So thank you for creating this library. Now, on to my issue...

When exporting via bodymovin after having disabled the glyphs option, each character of text is wrapped in its own element, e.g. the word "the" would output like this:

<text>t</text>
<text>h</text>
<text>e</text>

Is there a reason for this or a way to force text to not be wrapped in such a way? It makes manipulating the generated SVG much more problematic. I would prefer it spits out whole lines at a time and only performs transform-style positioning on those blocks of text where necessary.

[cpdt]

I've been having this issue as well -- as far as I'm aware, the separate elements are used in order to permit things like tracking and character-based text animators.

Unfortunately, I'm not aware of any way to disable this (at least without going into the code and hacking around it).

[omphteliba]

For SEO we also want text as a text-block, not single chars. Will this come? Does it already work, and we didn't found out how?

[cpdt]

@omphteliba I'm not the maintainer and so not the one who'd make the decision on this, but surely a search engine smart enough to execute Javascript code and actually read SVG elements would also be smart enough to piece together text fragments like this? In other words, I'm not sure bodymovin is the best library to use if you're concerned about SEO.

[bodymovin]

The reason for this is text animators and tracking, indeed.
I've tried using tspans wrapped around each character but I haven't found a good way for animating them.
I'll try to see if I can use a single text element if the layer has no animators.
Regarding SEO and accessibility, I'm also looking for a way to support them on every situation.
Suggestions are welcome :)

[bodymovin]

Added a single text element with tSpans if layer doesn't use animators.

[Shirkit]

Did you have any progress regarding seo @bodymovin ?

[omphteliba]

@Shirkit Sorry, I haven't tried it yet.

[bodymovin]

@Shirkit I could add an extra attribute to each that contains text with the current rendered text.
Do you know what is the best way to have this get read for SEO?

[Shirkit]

After thinking for a while I don't think that this library is the best thing if you are worried by SEO, as @cpdt said.

Besides, SEO should pick up the text wrapped in the different blocks, maybe thinking it's a bit strange, but the focus of the library is the animations.

I personally strongly dislike the current state of SEOs, and instead of us pushing towards them, they should push towards us. This is the kind of library that adds much to a website and doesn't have much SEO capabilities. Lots of elements and pieces that creative designers currently come up with are not currently good for SEO.

I don't think there's a way for the library to be SEO friendly and still be good. I think it's good enough for now.

[MehdiRaash]

I have no animation in my text layer, also the language is Persian, so the words are corrupted. how can I tell AE or bodyMovin not to textify it?

[bodymovin]

@MehdiRaash you can try with glyphs checked and unchecked, but not sure how it will behave with persian characters. If you want to share a simple .aep example I can check it out.