text

Displays a value as a static text.

Note that to create a text control when using the Markdown syntax, you don't need to specify the control name in the text template:

<|Some content|text|>

is equivalent to

<|Some content|>

Properties¶

Name	Type	Default	Description
`value`^(★)	`Any` dynamic	""	The value displayed as text by this control.
`raw`	`bool`	False	If set to True, the component renders as an HTML <span> element without any default style.
`mode`	`str`		Define the way the text is processed: "raw": synonym for setting the raw property to True "pre": keeps spaces and new lines "markdown" or "md": basic support for Markdown "latex": LaTeχ support
`format`	`str`		The format to apply to the value. See below.
`width`	`Union[str, int]`	None	The width of the text element, in CSS units.
`id`	`str`		The identifier assigned to the rendered HTML component. This can be used in callbacks or to target the element for styling.
`properties`	`dict[str, Any]`		A dictionary of additional properties that can be set to the element.
`class_name`	`str` dynamic		A space-separated list of CSS class names to be applied to the generated HTML element. These classes are added to the default `taipy-text` class.
`hover_text`	`str` dynamic		The text that is displayed when the user hovers over the element.

^(★)value is the default property for this visual element.

Details¶

The format property uses a format string like the ones used by the string format() function of Python.

If the value is a date or a datetime, then format can be set to a date/time formatting string.

Usage¶

Display values¶

See the entire code for this example

The property value can be set to any text that will be rendered.
This value must be a Formatted string literals so that if it includes Python expressions (potentially as simple as a variable name), the resulting text is displayed.

You can represent a variable value as a simple, static text:

Definition

MarkdownHTMLPython

<|Hello {name}!|text|>

<taipy:text>Hello {name}!</taipy:text>

import taipy.gui.builder as tgb
...
tgb.text("Hello {name}!")

Presuming that the Python variable name is set to the value "Taipy", here is how this control displays:

Formatted output¶

See the entire code for this example

If your value is a floating point value, you can use the format property to indicate what the output format should be used.

If we have the following Python definition:

pi = 3.14159265358979

To display this floating point value with three decimal places, we can create the text control as follows:

Definition

MarkdownHTMLPython

<|{pi}|text|format=%.3f|>

<taipy:text format="%.3f">{pi}</taipy:text>

import taipy.gui.builder as tgb
...
tgb.text("{pi}", format="%.3f")

Here is the resulting display:

Markdown formatting¶

See the entire code for this example

You can use the Markdown markup language to add formatting indications to the text you want to render.
You must set the mode property to "markdown" or "md" to do that.

Note that the Markdown syntax mentions that if a line ends with two white space characters, a line break is issued.

Here is an example of that feature.
Consider the following variable definition:

markdown = """
# Generated by *Taipy*

You can insert *Markdown* code in a `text` control to
add style to the text.

If a line ends with two white spaces, such as here  
then you can create line skips.
"""

You cannot see that line 7 ends with two white space characters.

Let's bind this variable to the value property of the control and set mode so that Markdown formatting is issued:

Definition

MarkdownHTMLPython

<|{markdown}|text|mode=markdown|>

<taipy:text mode="markdown">{markdown}</taipy:text>

import taipy.gui.builder as tgb
...
tgb.text("{markdown}", mode="markdown")

The control looks like this on the page:

Note that a line break was forced where we expected it.

Preformatted text¶

See the entire code for this example

You may need to store text that is preformatted (where spaces and line skips are essential). This is really useful dealing with source code, for example.
Set the mode property to "pre" to indicate such a situation. The content is displayed in a fixed-width font.

Line skips and space characters are crucial for Python code to be correctly interpreted.
Say you have the following Python variable definition, showing some raw Python source code:

code = """
def say_hello(name: str):
    print(f"Hello, {name}!")

if __name__ == "__main__":
    say_hello("Taipy")

We can use this variable in our text control and set mode to "pre":

Definition

MarkdownHTMLPython

<|{code}|text|mode=pre|>

<taipy:text mode="pre">{code}</taipy:text>

import taipy.gui.builder as tgb
...
tgb.text("{code}", mode="pre")

This is how the control is displayed:

Displaying LaTeχ¶

See the entire code for this example

LaTeχ is a markup language that is great at typesetting documents and excels at rendering complex math expressions. You can render LaTeχ in a text control by setting the mode property to "latex".
Taipy uses the MathJax component from the better-react-mathjax package for the final rendering.

You can set a variable to some LaTeχ content:

latex = """
$$f'(x) = \\lim_{h \\to 0} \\frac{f(x+h) - f(x)}{h}$$
"""

Note that the double dollar sign ($) indicates that the control creates its own block, breaking the current text line.

Then use that in your control definition:

Definition

MarkdownHTMLPython

<|{latex}|text|mode=latex|>

<taipy:text mode="latex">{latex}</taipy:text>

import taipy.gui.builder as tgb
...
tgb.text("{latex}", mode="latex")

The controls appears like this:

Styling¶

All the text controls are generated with the "taipy-text" CSS class. You can use this class name to select the text controls on your page and apply style.