Textual widgets contain content. The content is what you see within the widget’s borders. From a technical perspective, you can think of content as what is specified when you call Static.update() or what a call to render() returns in a custom widget.
You can specify content by using a string that contains special markup, use Content objects for more advanced control, or use a Rich renderable. However, you will focus only on Textual calls here.
You will be covering the following in regards to widget content:
Content styles markup
Colorful content
Content with CSS Variables
Content links
The content playground
Content markup allows you to style widgets and make your application stand out. When you finish this chapter, you will confidently apply these concepts in your creations.
Let’s start learning now!
Content Styles Markup
Textual provides you with six types of style markup. When you use markup styles, you enclose the markup inside square brackets. Here are the size types that you can choose from, along with their abbreviations:
bold or b - Creates bold text.
dim or d - Dims the text (i.e. makes the text slightly transparent).
italic or i - Italicizes the text.
underline or u - Underlines the specified text.
strike or s - Draw a line through the specified text.
reverse or r - Reverses the colors of the text (i.e., the foreground is swapped with the background color).
To end the markup, you use a forward slash and the style name (i.e. [/bold] or [/b]) or you may use [/] without specifying a style at all.
If you have done anything with HTML, Markdown, or some other markup language, you are familiar with these styles. However, you still need to see how these work in Textual itself.
Open up your Python IDE and create a new file called content_test.py. Then enter the following code:
When you use markup in your strings, you start by using an opening square brace, then the name of the style, and then the closing square brace. Next, you write the string to which you want to apply the style. Finally, you can write a closing markup tag. If you have [bold] as your beginning tag, then [/bold] would be the closing tag. Alternatively, you can also use [/b] or simply [/] to end the formatting.
You can also invert a style by using the word not. For example, if you wanted to turn off bolding an entire string, you could have the tags [not bold] added in the middle of the string and then end the inversion with [/not bold]. You can use not with any of the styling commands.
Try running the code block above, and you should see something like this in your terminal:
You may have noticed a couple of additional markup commands in the code above that were not included in the six styles at the beginning of this section. Yes, you can also add color to specific sub-strings using the markup as well.
When you are adding markup, keep in mind that the markup will only impact the widget that it is applied to.
Let’s learn more about how that works in the next section!
Colorful Content
Content markup uses the same colors as CSS. You can use any of the following:
HTML hex colors. Example: [#FF0000]This is red text[/]
RGB colors. Example: [rgba(255, 255, 0, 1)]This is yellow text[/]
Named colors, such as sienna or chartreuse. Example: [cyan]A vibrant greenish-blue[/]
The fourth component of the RGB example above is the alpha component. You can use alpha to control the color’s transparency. An alpha of one will be fully opaque, while an alpha of zero is fully transparent. If you use a color between zero and one, the color will appear faded.
Take the three examples above and add a fourth where you set the alpha to 0.5. Then, take those strings and put them into an application. To do that, open up your Python IDE and create a file named content_colors.py with the following code in it:
Your code creates four labels with various colors applied to the text. If you run this code, you will see something like this:
Find an HTML or hex color picker on the Internet to try out other colors. Update the code above accordingly and re-run it to see how it changes. You should also try editing the alpha and see how that changes the colors.
Background Colors and Auto
Textual supports setting the background color in addition to the foreground text color. Using the “on” keyword, you can set the text to be written on top of a specific color using any of the color specifications mentioned above.
If you need or want to maintain good contrast with your colors, you can use the “auto” and “on” keywords. Auto will tell Textual to automatically choose a white or black text, whichever has the best contrast for the currently chosen background color.
Return to your Python IDE and create a new file called content_auto_color.py. Then enter the following code:
Here you have three labels with various uses of “auto” and “on”. Try running the code, and you will see something like the following:
You can see how “auto” automatically picks the right colors for the best contrast. You can also see what happens if you do not use “auto”.
Color Opacity
There’s one more trick up Textual’s sleeve: an opacity percentage. If you set the opacity to 75%, Textual will make the color three-fourths of the way between the background and the specified color.
Take the previous example and copy it to a new file called content_opacity.py in your Python IDE. Then update the strings in the labels to match the following:
Here you continue to use a mix of the “auto” command and various amounts of opacity. When you run this code, you will see an output that looks something like this:
Neat! Try changing the color and the opacity to see what you can develop.
Now, you’re ready to move on and learn about CSS variables!
Content with CSS Variables
Textual also supports using CSS variables in markup. You can use the ones mentioned in Textual’s design guide or you can use the ones that you find when you run textual colors in your terminal under the Theme Colors tab.
Here are some example CSS colors you can use:
$primary
$secondary
$warning
$error
$success
$accent
You can find more in the previously mentioned resources.
To see how this works, open up your Python IDE and create a file called content_css.py. Once you have the file opened, add this code to it:
Here you can see that you can use these CSS variables the same way as regular color names. You can even use “on” and “auto” with them!
When you run this code, you will see the following output:
Spend a few minutes trying out some of the different colors and options you have learned about with these CSS variables.
When you finish, you can move on to learn about content links!
Content Links
Textual content allows you to add hyperlinks to your terminal. You can also apply color and other formatting to the links if you wish. You use the keyword “link=” followed by the URL to add a link. You enclose the URL in single or double quotes.
You will probably understand this concept if you see an example. Create a new file called content_link.py in your Python IDE. Then add the following code:
Here, you create a green link to the Mouse vs Python blog. The last part of the string is not green because it is outside the markup tags. To see this visually, run the code and you will get the following in your terminal:
You can now CTRL+Click the link to launch your default web browser, which will load that URL. Try putting in a different URL and re-running the code. You could also add some of the other formatting to the markup.
The Content Playground
If you want to experiment with live coding your content markup in your terminal, you can run the following tool that comes with Textual:
python -m textual.markup
When you run this command, you will get the Content Markup Playground application, allowing you to live code and test your content markup skills. If you have any LanguageDoesNotExist errors, you may need to install the textual[syntax] package. Here’s how to do that:
python -m pip install “textual[syntax]”
Take some markup from one of the previous examples above and try running it in the playground application:
Isn’t that nice? Try out some of the other examples in there or write your own!
Wrapping Up
Content markup is a nice way to style your text within Textual. You can do similar things with the Rich package, but the colors may not match the Textual colors. Using Content markup helps keep your code more consistent.
In this chapter, you covered the following topics about Content markup:
Content styles markup
Colorful content
Content with CSS Variables
Content links
The content playground
You can use markup in most widgets that accept text. Give Content markup a try and see how nice it is. While you cannot live code with Content markup like you can with CSS, you may find it useful for certain portions of your code.
Special Thanks to Our Sponsor
Mindrift, a platform connecting experts with leading AI training projects, is looking for professionals in STEM. Want to train models to handle complex, multi-step challenges that mirror real-world research and workflows?
Explore Mindrift’s freelance, project-based flexible opportunities — we have live projects open right now!
1. Mathematics Expert with Python - Freelance AI Trainer [Apply today]
2. Physics Expert with Python - Freelance AI Trainer [Apply today]
3. Auto Engineering Expert with Python - Freelance AI Trainer [Apply today]
4. Civil Engineering Expert with Python - Freelance AI Trainer [Apply today]