- Home /
UI Text: Wrap and Expand to keep aspect ratio
As I see it there are two options to display text within a background image:
Resize the background image to fit the text size (Content size fitter on the text)
Keep the background image constant size, and have the text wrap to fit the width
I'm trying to combine the two - expand the background as much as necessary to fit the entire text, but also wrap the text so that the aspect ratio of the background image remains constant.
Any tools that do this, or any ideas on how to do it?
Edit: Here's an example of larger text and shorter text.
I'd like the algorithm to be able to match the background and text sizes to both these cases, without having to manully insert "\n" in the text or manually sizing the rect. The point is to wrap the text, and automatically resize the component so that the text fills it as much as possible, leaving no empty space above/below.
How about this : 1. keep the text as a child of the background image. 2. Set the text's anchors to X:0,1 Y:0,1 [Fully stretched within the image] 3. enable the best fit property of Text . 4. Horizontal overflow to "Wrap". 5. Vertical overflow to "Truncate".
The thing is the amount of text may vary greatly, so I need the background image to change it's size depending on the amount of text. I don't want a huge background image for 3 words, and a tiny background image for 50 words won't work either cause the text will be tiny.
This is meant for tooltips.
Answer by pfreese · Apr 01, 2016 at 05:42 PM
Take a look at http://docs.unity3d.com/ScriptReference/TextGenerator.html.
You'll need to iteratively generate text to determine the proper size for layout. If you have particular aspect ratio (such as phi) you might start small and add vertical height a line at a time (query the font for the line height), calculating the width along the way until the bounds are large enough to contain the text without truncation.
Answer by Sun-Pengfei · Mar 02, 2017 at 06:48 AM
TextGenerator textGen = new TextGenerator();
TextGenerationSettings generationSettings = textCompo.GetGenerationSettings(textCompo.rectTransform.rect.size);
float width = textGen.GetPreferredWidth(text, generationSettings);
if (width > preferedWidthMax)
{
layoutElement.preferredWidth = preferedWidthMax;
}
This is the most elegant way I've found to this problem. Note that the text's parent has a content size fitter and a layout group components, and the text itself has a layout element.
Check the other related question:
https://forum.unity3d.com/threads/wrapping-child-text-with-content-size-fitter.315630/
http://answers.unity3d.com/questions/921726/how-to-get-the-size-of-a-unityengineuitext-for-whi.html
Your answer
Follow this Question
Related Questions
How do I calculate a text size with the Best Fit option using a TextGenerator 2 Answers
UI Relative to screen size 1 Answer
How do I calculate how big text is in a world space canvas UI Text? 2 Answers
How to make parent UI element change size to fit children? 0 Answers
How to calculate a TextMesh width without rendering it ? 2 Answers