search

airbnb / lottie-web

Render After Effects animations natively on Web, Android and iOS, and React Native. http://airbnb.io/lottie/
MIT License
30.34k stars 2.87k forks source link

Text alignment when exporting glyphs #1630

Open jackiemk opened 5 years ago

jackiemk commented 5 years ago

Previewing in Chrome Version 74.0.3729.157 (Official Build) (64-bit)

After Effects CC 2019 (16.1.1 Build 4) I'm using the latest Bodymovin plugin (5.5.3), but was also having this issue before updating this morning.

I'm having a persistent issue where text exported as glyphs does not align properly and/or text overflows to the next line. Here is an example.

Screenshot from AE:

Screen Shot 2019-05-20 at 11 42 13 AM

Screenshot of demo file in browser:

Screen Shot 2019-05-20 at 11 42 23 AM

If its not entirely clear, there are 3 text boxes in each group (6 total). The red and green are each shapes that are meant to appear behind and align with the text. In AE the shapes align with the text, while the exported text (as Glyphs) overhangs the boxes by at least a character, and in some cases overflows to the next line. An overlay of the render and the original shows the characters seem to be the correct size/proportion, and that the spacing between the letters is just too large compared to the original font - The second group of letters above is a monospaced type (courier new), which makes me think its not just an issue of the plugin not understanding kerning.

jackiemk commented 5 years ago

Here is the AE file with the above comp

glyphTextTest.aep.zip

jackiemk commented 5 years ago

I actually believe I may have found the root of the issue - I had optical kerning applied in AE, hence the very subtle difference in character spacing appearing between the AE text and the export (presumably the process of converting text to shapes strips the kerning that AE has applied before character position is determined)

Not sure if this is something that can be addressed on the plugin side, or should just be documented in case anyone else runs into this issue.

bodymovin commented 5 years ago

Hi, thanks for the research. I'll see if I can improve this, but exporting kerning for each pair of characters might bloat the json filesize. And I'm not sure this information is exposed to scripting.

jackiemk commented 5 years ago

I'll see if I can improve this, but exporting kerning for each pair of characters might bloat the json filesize.

Thanks, I agree this is probably not worth it - I've adjusted all my files to have 0 kerning and it is now working fine. Thanks for looking into it!