Formatting text with textfield and textarea

Questions & Answers
, ,
1

hi, how can i format text segments in a textfield or textarea. similar to what can be done with htmlText property in flash apps? thanks, flexrails

3

This may not exactly be what you're looking for - but it at least it's a way to do some fancy font-formatting; and it may be a good starting point to get towards what you actually want to achieve:

From the original forum posting:

With this control you can draw a multi-line label that:

  • Can use multiple colors to highlight words.
  • Can use multiple fonts to accent words (ex. normal, bold, italic)
  • Can align the resulting multi-line fancy text to left, right or center.

To use the function you simply mark up your text strings with the proper escape sequences, which are:

(hash)aabbccdd - Change current color to the one specified by the hex string red green blue alpha (much like HTML color codes, but also with an alpha channel) (hash)! - Revert back to the original color that was used before this function call (hash)n - normal font (hash)x - bold font (hash)i - italic font

Well, (hash) is # - but using that will make the font really big instead of showing a # here on Unity Answers ;-)

2

I'm afraid you can't. Of course there are ways around it, for example by combining lots of textfields, a textfield for every font/color variation. Other solution I used is making my own fontmanager/renderer that draws text into a texture using different fonts and displaying this texture. Of course, if the text is quite static in your application, you could prerender all text into a texture and show this.

4

using UnityEngine;
using System.Collections;

public class MulticolorTextArea : MonoBehaviour 
{
    public string stringToEdit = "Hello World

I’ve got 2 lines…";

    void OnGUI() 
	{
		//backup color 
		Color backupColor = GUI.color;
		Color backupContentColor = GUI.contentColor;
		Color backupBackgroundColor = GUI.backgroundColor;
		
		//add textarea with transparent text
		GUI.contentColor = new Color(1f, 1f, 1f, 0f);
		GUIStyle style = new GUIStyle(GUI.skin.textArea);
		Rect bounds = new Rect(10, 20, Screen.width - 10, Screen.height - 20);
		stringToEdit = GUI.TextArea(bounds, stringToEdit);
		
		//get the texteditor of the textarea to control selection
		int controlID = GUIUtility.GetControlID(bounds.GetHashCode(), FocusType.Keyboard);	
		TextEditor editor = (TextEditor)GUIUtility.GetStateObject(typeof(TextEditor), controlID -1);
		
		//set background of all textfield transparent
		GUI.backgroundColor = new Color(1f, 1f, 1f, 0f);	
		
		//backup selection to remake it after process
		int backupPos = editor.pos;
		int backupSelPos = editor.selectPos;
		
		//get last position in text
		editor.MoveTextEnd();
		int endpos = editor.pos;
		
		Random.seed = 123;
		
		//draw textfield with color on top of text area
		editor.MoveTextStart();		
		while (editor.pos != endpos)
		{
			editor.SelectToStartOfNextWord();
			string wordtext = editor.SelectedText;	
	
			//set word color
			GUI.contentColor = new Color(Random.Range(0f, 1f), Random.Range(0f, 1f), Random.Range(0f, 1f));
			
			//draw each word with a random color
			Vector2 pixelselpos = style.GetCursorPixelPosition(editor.position, editor.content, editor.selectPos);
			Vector2 pixelpos = style.GetCursorPixelPosition(editor.position, editor.content, editor.pos);
			GUI.TextField(new Rect(pixelselpos.x - style.border.left, pixelselpos.y - style.border.top, pixelpos.x, pixelpos.y), wordtext);
		
			editor.MoveToStartOfNextWord();
		}
		
		//Reposition selection
		Vector2 bkpixelselpos = style.GetCursorPixelPosition(editor.position, editor.content, backupSelPos);	
		editor.MoveCursorToPosition(bkpixelselpos);	
			
		//Remake selection
		Vector2 bkpixelpos = style.GetCursorPixelPosition(editor.position, editor.content, backupPos);	
		editor.SelectToPosition(bkpixelpos);	

		//Reset color
		GUI.color = backupColor;
		GUI.contentColor = backupContentColor;
		GUI.backgroundColor = backupBackgroundColor;
    }
}
5

Just in case someone else ends up here:

It works now without problems. You just have to define a GUIStyle:

GUIStyle textStyle = new GUIStyle();
textStyle.normal.textColor = Color.white;
textStyle.richText = true;

This answers the question: