Styling TextField content with CSS

Haxe
#1

In the TextField API it says:

You can apply Cascading Style Sheets(CSS) styles to text fields by using the TextField.styleSheet property and the StyleSheet class.

but I don’t actually see a styleSheet property on TextField. Nor do I see a StyleSheet class anywhere. Am I missing something, or is the documentation wrong? Is there a way to do this? I sure hope so…

Thanks.

#2

This is not implemented, but you can use the TextFormat class to apply other styles

We have been importing documentation from Flash Player, and have not finished doing our pass to update the documentation to apply more specifically to what OpenFL does currently support. Sorry for the confusion

#3

TextFormat affects the entire TextField though, correct? Does this mean it’s not currently possible to style parts of a TextField separately? I need to my links to look different from the surrounding text…

#4

Try using textField.setTextFormat using the start and end indices of what you would like to change, or use textField.htmlText which supports some inline tags

1 Like
#5

Ahaaaaa, I didn’t know that you could provide boundaries to setTextFormat! That’ll totally work. Thanks much! <3

1 Like
#6

Hm… applying TextFormat seems to break links embedded in the htmlText.

Any characters covered by the applied TextFormat lose clickability, while those uncovered still work. Straaaaaange.

#7

TextField is a big complicated feature that isn’t perfect – I’m sure there’s a way to fix this. Can you try using textField.text and then using textField.setTextFormat to apply a URL where needed?

1 Like
#8

Yup, that did it. Weird that TextFormat handles both styling and behaviour. Thanks again! You’re incredible.

#9

I just created a test and interestingly I had the opposite problem:

package;

import openfl.text.TextField;
import openfl.text.TextFormat;
import openfl.display.Sprite;

class Main extends Sprite
{
	public function new()
	{
		super();
		
		var textField = new TextField ();
		textField.htmlText = "Hello <a href='http://www.google.com'>World</a>";
		
		var format = new TextFormat();
		// format.url = "";
		format.size = 22;
		textField.setTextFormat(format);
		addChild(textField);
	}
}

The above worked the same for me in both Flash Player and Neko, but when uncommenting the line to apply a URL of “” only Flash Player removed the link. I just committed a minor fix to OpenFL that makes this behave the same :slight_smile: