search

airbnb / lottie-web

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

TextLayer.canResizeFont causes linebreaks in middle of words. #2937

Open DSalman opened 1 year ago

DSalman commented 1 year ago

Is it possible to add a line break mode for word boundaries so that resizing text won't result in breaks at character boundaries? I have a text box that can accommodate multiple lines of text. We implement 'updateDocumentData' so user can customize the text string, and would like for the font to auto resize so it fits. This works, but we sometimes get line-breaks in the middle of words instead of at boundaries.

Or maybe this is some other way to prevent this that you can recommend? The only thing I can think of is to do the layout manually and come up with a suitable font size, then assign it via the updateDocumentData method.

bodymovin commented 1 year ago

hi, as far as I know, unless the minumum font is not enough to accommodate text, it shouldn't break words at arbitrary positions. Do you have a simple example I can test?

DSalman commented 1 year ago

Hi. You may need to have the right right font to get the same results, but this illustrates what happens. The text box is large enough to accommodate 2 lines of text, but even when canResize is called, it doesn't seem to reduce the font to the point where "available" fits to width and the line-break occurs between words. Thanks. files.zip

kundokun commented 1 year ago

i want to know about this a lot, same problems here.

DSalman commented 1 year ago

Hi Rajat, I am setting resize flag as described here: https://github.com/airbnb/lottie-web/wiki/TextLayer.canResizeFont Are you saying there is a way to specify via the animation.json file? For example, somewhere here: https://lottiefiles.github.io/lottie-docs/text/#animated-text-document We are using the json as exported via the Bodyovin plugin, but I'm not aware of a way to specify auto-resizing via that route. Thanks, David

On Sat, Mar 4, 2023 at 2:24 AM Rajat Sangrame @.***> wrote:

Hey @DSalman https://github.com/DSalman , were able to set text auto-resize flag from JSON data?

— Reply to this email directly, view it on GitHub https://github.com/airbnb/lottie-web/issues/2937#issuecomment-1454620568, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAINY6H6KLQAMI57PNFXSTTW2LU4VANCNFSM6AAAAAAVMDKYU4 . You are receiving this because you were mentioned.Message ID: @.***>