The formatted text is a string that contains font style, colour and other information for rich text rendering. The label widget supports the formatted text.

Enable the Formatted Text mode.

label.format(true);

Bold font

label.caption("Hello, <bold>This is a bold text</>");

Font color

label.caption("Hello, <bold color=0xff0000>This is a bold red text</>");

Change font family name

label.caption("Hello, <bold color=0xff0000 font=\"Consolas\">This is a bold red Consolas text</>");

Change font size

label.caption("Hello, <bold color=0xff0000 font=\"Consolas\" size=20>This is a bold red Consolas text in size 20</>");

Reserved words

The formatted text defines some reserved words: red, green, blue, white and black. The reserved words can simplify the formatted text and increas readability.

label.caption("Click <color=0xff target=\"target id\">here</>");
//vs
label.caption("Click <blue target=\"target id\">here</>");

Alignment of Text The Formatted Text defines the vertical alignment of text. The default alignment of text is baseline-aligned. Nana provides 4 kinds of alignments: top, center, bottom and baseline. They are useful tools when display texts with different size in a line.

label.caption("<size=12 top>top</><size=14 center>center<size=16 bottom>bottom</><size=30>baseline</><size=10>small font by baseline</>");

URL Attribute

label.caption("Hello, <bold color=0xff0000 font=\"Consolas\" url=\"http://nanapro.org\">This is a bold red Consolas text</>"");

Arrow cursor becomes a hand when the cursor moves over the red text. Meanwhile, it calls a web browser to open the URL by clicking the red text. NOTE: the url only works under Windows

Target Attribute

The target attribute allows user clicking on the specified text, and application can react to the operation.

int main()
{
	using nanemspace nana;
	form fm;
	label lab(fm, rectangle{0, 0, 100, 40});
	lab.caption("Click <color=0xff target=\"target id\">here</>");
	lab.format(true);
	lab.add_format_listener([](label::command cmd, const std::string& str)
	{
		if(label::command::click == cmd)
		{
			msgbox mb("target clicked");
			mb<<"the target \""<<str<<"\" is clicked";
			mb();
		}
	});
	
	fm.show();
	exec();
}

label.caption("<image=\"file.bmp\"><bold red size=20>Nana C++ Library</>");

The image tag has not a close-tag </>. The image is displayed with its orignal size.

Sizing image

label.caption("<image=\"file.bmp\" size=(150,150)><bold red size=20>Nana C++ Library</>");

"size=(150,150)" means that it stretchs the image by the specified size.

In some situations, the image is required to be displayed by a given size but with preserving aspect ratio. By using max_limited/min_limited, it is possible to make it. max_limited: stretchs the image with preserving aspect ratio until its one of edge beyongds the specified size. min_limited: stretchs the image with preserving aspect ratio until its one of edge is less than the specified size.

label.caption("<image=\"file.bmp\" size=(150,150) max_limited><bold red size=20>Nana C++ Library</>");