• Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
  • Asset Store
  • Get Unity

UNITY ACCOUNT

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account
  • Blog
  • Forums
  • Answers
  • Evangelists
  • User Groups
  • Beta Program
  • Advisory Panel

Navigation

  • Home
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
    • Blog
    • Forums
    • Answers
    • Evangelists
    • User Groups
    • Beta Program
    • Advisory Panel

Unity account

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account

Language

  • Chinese
  • Spanish
  • Japanese
  • Korean
  • Portuguese
  • Ask a question
  • Spaces
    • Default
    • Help Room
    • META
    • Moderators
    • Topics
    • Questions
    • Users
    • Badges
  • Home /
avatar image
0
Question by Tomer-Barkan · Mar 21, 2016 at 07:29 AM · uitextsizewrap

UI Text: Wrap and Expand to keep aspect ratio

As I see it there are two options to display text within a background image:

  1. Resize the background image to fit the text size (Content size fitter on the text)

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

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

hoversizes.png (161.8 kB)
Comment
Add comment · Show 2
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image digzou · Mar 21, 2016 at 08:15 AM 0
Share

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

avatar image Tomer-Barkan digzou · Mar 21, 2016 at 08:36 AM 0
Share

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.

2 Replies

· Add your reply
  • Sort: 
avatar image
0

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.

Comment
Add comment · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image
0

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

Comment
Add comment · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

Your answer

Hint: You can notify a user about this post by typing @username

Up to 2 attachments (including images) can be used with a maximum of 524.3 kB each and 1.0 MB total.

Welcome to Unity Answers

The best place to ask and answer questions about development with Unity.

To help users navigate the site we have posted a site navigation guide.

If you are a new user to Unity Answers, check out our FAQ for more information.

Make sure to check out our Knowledge Base for commonly asked Unity questions.

If you are a moderator, see our Moderator Guidelines page.

We are making improvements to UA, see the list of changes.



Follow this Question

Answers Answers and Comments

56 People are following this question.

avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image

Related Questions

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

How do I calculate a text size with the Best Fit option using a TextGenerator 2 Answers

  • Anonymous
  • Sign in
  • Create
  • Ask a question
  • Spaces
  • Default
  • Help Room
  • META
  • Moderators
  • Explore
  • Topics
  • Questions
  • Users
  • Badges