Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Text exports one character per <text> element #657

Closed
shuams opened this issue Oct 4, 2017 · 12 comments · May be fixed by #3020
Closed

Text exports one character per <text> element #657

shuams opened this issue Oct 4, 2017 · 12 comments · May be fixed by #3020

Comments

@shuams
Copy link

shuams commented Oct 4, 2017

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
Copy link

cpdt commented Oct 4, 2017

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
Copy link

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
Copy link

cpdt commented Oct 7, 2017

@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
Copy link
Collaborator

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
Copy link
Collaborator

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

@Shirkit
Copy link

Shirkit commented Apr 6, 2018

Did you have any progress regarding seo @bodymovin ?

@omphteliba
Copy link

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

@bodymovin
Copy link
Collaborator

@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
Copy link

Shirkit commented Apr 9, 2018

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
Copy link

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
Copy link
Collaborator

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

@human-ore
Copy link

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

This is a problem for languages with hyphenated properties, such as Thai, Arabic, etc.

https://codepen.io/human-ore/pen/RwdQJdK

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants