Unable to recognize some of text style and vertical text.

[Danjuanlab]

Today, I found some BUGs in my animation. The first one was that bodymovin couldn't recognize some of text style correctly. Then I looked at the JSON file and found that there was a data record about the text type. But because CSS controls the text differently from AE / AI, all the font types in the part of the page couldn't be displayed correctly like Heavy, ExtraLight, because font-weight's attribute value in CSS is only: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit, so heavy and ExtraLight can't be applied directly. In addition, I looked at the exported demo page, and when I saw the CSS style of the text, I found two The content of the first is always the last character, but it's hidden. The bottom is the real content. I don't understand the part of htmlcode.

Suggestion: Create a dictionary that maps common font sizes, such as heavy: 900, ExtraLight: 200... to reduce the font-weight that are not recognized.

The second BUG is unable to recognize vertical text, from the JSON file and demo page, there is no record of text direction type of data, to solve this problem is actually relatively simple, just add

writing-mode

to CSS, you can solve horizontal and vertical text. explains.

[Danjuanlab]

Hi,Today I tried a new solution to achieve vertical text, but it seems that the web page will report an error, can help me see what is going on?

demo.html:30 Uncaught TypeError: Cannot assign to read only property 'className' of object '#' at i (demo.html:30) at f.r [as addFonts] (demo.html:30) at SVGRenderer.BaseRenderer.setupGlobalData (demo.html:32) at SVGRenderer.configAnimation (demo.html:32) at AnimationItem.configAnimation (demo.html:33) at AnimationItem.setParams (demo.html:33) at Object.n [as loadAnimation] (demo.html:33) at Object.loadAnimation (demo.html:29) at demo.html:64

---

The origin JS code:

e.fClass?(i.style.fontFamily="inherit",i.className=e.fClass):i.style.fontFamily=e.fFamily

From the content of the error, "i" does not have classname items.

change to:

e.fClass?(i.style.fontFamily="inherit",i.setAttribute("class",e.fClass)):i.style.fontFamily=e.fFamily

It can render the vertical text.But this doesn't seem to be the best solution, Because it will change the text content of all the fonts applied, but my original intention is that a piece of content is horizontal typesetting, and a piece of content is vertical typesetting. hopefully this BUG will be solved in the next iteration.

[bodymovin]

Hi, I'll look into it meanwhile, if you want to add a class to a specific text layer, can you try naming that layer in AE with a prefix "."? That will add a class only to that specific layer. https://github.com/airbnb/lottie-web/wiki/SVG-and-HTML-ids-and-classes-to-reference-via-css-or-select-via-Javascript Would that work in your case?

[Danjuanlab]

Hi, I'll look into it meanwhile, if you want to add a class to a specific text layer, can you try naming that layer in AE with a prefix "."? That will add a class only to that specific layer. https://github.com/airbnb/lottie-web/wiki/SVG-and-HTML-ids-and-classes-to-reference-via-css-or-select-via-Javascript Would that work in your case?

Thanks for your reply, using ".XX" to add a class to a separate layer is not useful in text, because the class is added to "< g >" tag, not < Text > or " < tspan >", so vertical text is not correctly applied to the text.

The effect I want to achieve is the effect of the following GIF. A flag with text and pictures sway in the air, where both text and images need to interact with the information. Since bodymovin does not support puppet pin, it can only be implemented. Set the keyframe for the position and path point, and the text needs to follow the mask path to move. I have already done this effect.

1. Write the content using horizontal text.
2. Draw a mask on the text and apply it.
3. Add animation-rotation to the text layer and rotate -90°
4. Set keyframes to the mask The effect can be viewed at this url.

[bodymovin]

Can't you use the css selector as .xx text{} or .xx tspan{}?

[Danjuanlab]

Can't you use the css selector as .xx text{} or .xx tspan{}?

For static text without animation, It can use the selector to make a vertical text, but for the text to follow the mask animation, the above example can not use such tips. Because the animated text is used for svg rendering. The characters are animated separately. I just tried the tip you said. I found that it can't be vertical text animation effects. It seems that the current solution can only be solved with the solution I found.