Typography & Text Styling
RTXUI supports rich text styling including colors, alignment, decorations, bold/strong emphasis, and opacity. These are applied via CSS properties in <style> blocks, just like in the web.
Colors
RTXUI supports multiple color formats for color and background-color properties:
| Format | Example |
|---|---|
| Named keywords | red, navy, silver, fuchsia, … |
| Hex (short) | #f0f, #0ff |
| Hex (full) | #ff3366, #151520 |
| Hex with alpha | #00ffcc88, #ff000080 |
rgb() | rgb(255, 0, 128) |
rgba() | rgba(255, 0, 0, 0.5) |
The 16 standard CSS color keywords are supported (black, white, red, green, blue, yellow, aqua, fuchsia, gray, silver, maroon, olive, navy, purple, teal, lime).
Weight and Style
Terminals render four text intensities and an italic face; RTXUI maps the standard CSS properties onto them:
font-weight: bold; /* bold — also: bolder, or numbers >= 600 */
font-weight: lighter; /* dim — also: numbers <= 300 */
font-weight: normal;
font-style: italic; /* also: oblique */The semantic inline tags apply these for you: <b>/<strong> for bold, <i>/<em> for italic, <u> for underline, <s>/<del> for strikethrough.
Case Transformation
text-transform changes the rendered case without touching the underlying text. It is inherited.
text-transform: uppercase; /* MENU */
text-transform: lowercase; /* menu */
text-transform: capitalize; /* Menu Item */ASCII letters are transformed; other characters pass through unchanged.
Spacing
letter-spacing inserts blank cells between characters, and line-height sets how many rows each line occupies. Both take whole numbers of cells and are inherited:
h1 {
letter-spacing: 1; /* H E A D I N G */
}
p {
line-height: 2; /* One blank row between lines. */
}The cells added by letter-spacing are non-breaking: a spaced word never wraps in the middle, while the gaps between words stay breakable. line-height is a minimum — a taller inline element still grows its line.
Text Alignment
Use text-align to control horizontal text placement within a block element:
text-align: left; /* Default */
text-align: center;
text-align: right;
text-align: justify;justify widens the spaces of soft-wrapped lines so each fills the content width; the last line, and lines ended by an explicit newline, keep their natural width. The alignment is inherited by child elements.
Text Decoration
Use text-decoration to add visual emphasis to text. Multiple decorations can be combined by separating them with spaces.
| Value | Effect |
|---|---|
underline | Single underline |
double-underline | Double underline |
line-through / strikethrough | Horizontal line through text |
blink | Blinking text (terminal support varies) |
none | Remove decorations |
Combine multiple decorations:
text-decoration: double-underline strikethrough;Whitespace and Wrapping
white-space controls how newlines and wrapping behave inside an element:
| Value | Newlines | Wrapping |
|---|---|---|
normal (default) | Rendered as spaces | Wraps at spaces |
nowrap | Rendered as spaces | Never wraps |
pre | Hard line breaks | Never wraps |
pre-wrap | Hard line breaks | Wraps at spaces |
pre-line | Hard line breaks; space runs collapse to one | Wraps at spaces |
The <pre> element sets white-space: pre for you; <textarea> uses pre-wrap. For text that must not wrap, pair nowrap with text-overflow: ellipsis to truncate with ... instead of overflowing. Three periods rather than …, because they are one cell each and every terminal has them; in a container too narrow for the text plus the marker, as many periods are shown as fit. Truncation lands on a character boundary, so a double-width glyph is dropped whole rather than halved:
.crumb {
white-space: nowrap;
text-overflow: ellipsis;
}To show a few lines of wrapped text rather than one, line-clamp keeps the first N lines of a block and ends the last with the same ... when it cut anything:
.summary {
line-clamp: 2;
}text-indent shifts the first line of a block. A negative indent with as much padding hangs it, which suits a list marker written in the text:
.note {
padding-left: 2;
text-indent: -2;
}Words longer than the line break at the container edge by default (overflow-wrap: anywhere — note this differs from CSS, whose default lets long words overflow). Set overflow-wrap: normal to keep such words intact and let them overflow instead:
.url {
overflow-wrap: normal;
}Opacity
The opacity property controls the transparency of an element and all its children. Values range from 0.0 (fully transparent) to 1.0 (fully opaque).
opacity: 0.5;Opacity is multiplicative: a child with opacity: 0.5 inside a parent with opacity: 0.5 will render at 25% opacity. Opacity can also be animated using CSS transitions.
Selecting and Copying Text
Dragging the mouse over text selects it, as in a browser: the text from the character the drag started on to the one it is on, in document order, shown in reverse video. A double click selects a word, a triple click the whole block (a paragraph, say), and a drag after either extends by words or blocks. Shift and a click extends the selection from where the last click was to there. Releasing the button copies the selection to the system clipboard (OSC 52, so it works over SSH). The next click clears it. Ctrl+A selects and copies the whole page, unless what has the focus takes it, as an input does for its own text.
The selection is of the document, not of the screen. Dragging from one column of a layout to the one beside it takes the end of the first and the start of the second, not the rows of both. Scrolling moves the selection with its text, and what is scrolled out of view is copied too. Dragging past the edge of the scroll container the selection started in scrolls it, faster the further the mouse is, and the selection follows; at its end, the scroll container around it takes over, once the mouse is past that one's edge too; for a container that reaches the edge of the screen, the screen's edge row or column does it. A paragraph's wrapped lines are copied as one line; separate blocks, and lines a <br> or a newline in <pre> ends, on lines of their own. Text is copied as written, before text-transform changes its case.
Only text is taken: borders, scrollbars and empty space are left out, and a gap in a row of selected text, a border between table cells say, is copied as a space. A drag that starts on an element with a click handler, on a link, in an input or on a scrollbar does what it does there instead.
A ::selection rule changes the highlight's colors; see ::selection.
user-select chooses what can be selected. It is inherited:
.toolbar { user-select: none; } /* never selected; a drag from it selects nothing */
code { user-select: all; } /* a click selects and copies it whole */