CSS Engine & Attribute Specification

This document provides the formal specification of the CSS styling engine implemented in RTXUI, defining value grammar, cascade and specificity rules, box-model semantics, and the exhaustive property reference.

1. Engine Formal Grammar

RTXUI implements an inline stylesheet parser and property resolver operating directly over terminal character cells.

ebnf

Declaration      ::= PropertyName ':' Value ('!important')? ';'
PropertyName     ::= [a-z-]+ | '--' [a-z0-9-]+
Value            ::= Token (Whitespace Token)*

Length           ::= Integer | Percentage | Fractional | Viewport | 'auto' | CalcExpr | MinMaxExpr
Integer          ::= [-+]? [0-9]+
Percentage       ::= [-+]? [0-9]+ ('.' [0-9]+)? '%'
Fractional       ::= [0-9]+ ('.' [0-9]+)? 'fr'
Viewport         ::= [0-9]+ ('.' [0-9]+)? ('vh' | 'vw')
Color            ::= HexColor | RgbColor | HslColor | ColorKeyword | ColorTransform

HexColor         ::= '#' ([0-9a-fA-F]{3} | [0-9a-fA-F]{4} | [0-9a-fA-F]{6} | [0-9a-fA-F]{8})
RgbColor         ::= ('rgb(' | 'rgba(') Number ',' Number ',' Number (',' Alpha)? ')'
                   | ('rgb(' | 'rgba(') Number Number Number ('/' Alpha)? ')'
HslColor         ::= ('hsl(' | 'hsla(') Angle (',' | Whitespace) Percentage (',' | Whitespace) Percentage (('/' | ',') Alpha)? ')'
ColorTransform   ::= ('lighten(' | 'darken(' | 'alpha(') (Percentage | Number) ')'
ColorKeyword     ::= 'transparent' | 'orange' | 'red' | 'white' | 'blue' | 'yellow' | 'green' | 'lime' | 'black' | 'gray' | 'grey' | 'cyan' | 'aqua' | 'magenta' | 'fuchsia' | 'silver' | 'maroon' | 'purple' | 'olive' | 'navy' | 'teal'

Coordinate & Dimensional Model

Grid Unit: 1 unit = 1 terminal character cell. vh and vw are hundredths of the terminal's height and width, rounded down to cells. Other units (px, em, rem, ...) are reported and ignored.
Physical Cell Aspect Ratio: Terminal cells are approximately 1:2 (width:height). An aspect ratio of 2 / 1 produces an approximately square visual block.
Default Box Model: Unlike web browsers which default to content-box, RTXUI defaults to border-box (box-sizing: border-box). Declared width and height define the outer dimensions including padding and borders.

2. Cascade, Inheritance & Specificity

2.1 Specificity Vector `(A, B, C)`

Selector precedence is determined by a 3-component specificity vector (A, B, C):

$A$ (ID Component): Count of ID selectors (#id).
$B$ (Class & Pseudo Component): Count of class selectors (.class), attribute selectors ([attr]), and pseudo-classes (:hover, :focus, :active, :checked, :disabled, :first-child, etc.).
$C$ (Type Component): Count of element type selectors (div, button, span).

Note: Pseudo-elements (::part(...)) participate in target isolation rather than global specificity weighting. :is(X) counts as the entry of $X$ that matched and :where(X) counts nothing, as in CSS. Other functional pseudo-classes (:not(X), :has(X), :nth-child(...)) count as a single pseudo-class, whatever their argument; CSS would count the most specific selector in $X$ instead.

2.2 Precedence Order (Descending)

Declarations with !important (resolved in reverse cascade order).
Inline element styles (style="...").
Higher specificity vector (A, B, C) (evaluated lexicographically: $A_1 > A_2$, then $B_1 > B_2$, then $C_1 > C_2$).
Source declaration order (later rules override earlier rules).
Inherited values from parent elements (only properties marked as inherited).
Engine initial property defaults.

3. Spacing, Sizing, and Box Model

margin: <length> | auto⧉ shorthand

margin-top: <length> | auto

margin-bottom: <length> | auto

margin-left: <length> | auto

margin-right: <length> | auto

padding: <integer>⧉ shorthand

padding-top: <integer>

padding-bottom: <integer>

padding-left: <integer>

padding-right: <integer>

width: <length>✦ animatable

height: <length>✦ animatable

min-width: <length>

max-width: <length>

min-height: <length>

max-height: <length>

box-sizing: content-box | border-box

Logical properties

A terminal writes left to right and top to bottom, so the logical properties map onto fixed sides: the inline axis is left (start) to right (end), the block axis top (start) to bottom (end). Each takes the values of the physical property it stands for.

Logical	Physical
`margin-inline` / `padding-inline` / `inset-inline` (`<start> <end>?`)	`-left`, `-right` (`left`, `right`)
`margin-block` / `padding-block` / `inset-block` (`<start> <end>?`)	`-top`, `-bottom` (`top`, `bottom`)
`margin-inline-start`, `-inline-end`, `-block-start`, `-block-end` (also `padding-`, `inset-`)	`margin-left`, `-right`, `-top`, `-bottom`
`inline-size`, `min-inline-size`, `max-inline-size`	`width`, `min-width`, `max-width`
`block-size`, `min-block-size`, `max-block-size`	`height`, `min-height`, `max-height`
`border-inline`, `border-block` (one value for both sides)	`border-left` + `border-right`, `border-top` + `border-bottom`
`border-inline-start`, `-inline-end`, `-block-start`, `-block-end` (also `-width`, `-color`)	the same side's border, width or color
`border-inline-width`, `border-block-width`, `border-inline-color`, `border-block-color` (`<start> <end>?`)	both sides

The standard per-side longhands border-top-width … border-left-width and border-top-color … border-left-color are accepted too.

`calc()` Expressions

Length properties accept calc() expressions combining discrete cells and percentages:

css

.sidebar {
  width: calc(100% - 20);
}
.split {
  height: calc((100% - 1) / 2);
}

`min()`, `max()`, and `clamp()`

min(a, b): Evaluates to the smaller resolved length.
max(a, b): Evaluates to the larger resolved length.
clamp(min, preferred, max): Clamps preferred between lower and upper bounds.

css

.responsive-box {
  width: clamp(20, 50%, 80);
}

4. Borders and Frames

border: <border-style> || <color> || <integer>⧉ shorthand

border-width: <integer>

border-top: <border-style> || <color> || <integer>

border-bottom: <border-style> || <color> || <integer>

border-left: <border-style> || <color> || <integer>

border-right: <border-style> || <color> || <integer>

border-style: <border-style>

border-top-style: <border-style>

border-bottom-style: <border-style>

border-left-style: <border-style>

border-right-style: <border-style>

border-color: <color>✦ animatable

border-color-top: <color>✦ animatable

border-color-bottom: <color>✦ animatable

border-color-left: <color>✦ animatable

border-color-right: <color>✦ animatable

border-collapse: separate | collapse

border-spacing: <integer> <integer>?

outline: [<border-style>] [<color>] [<integer>]⧉ shorthand

outline-style: <border-style>

outline-color: <color>

outline-offset: <integer>

4.1 Border Style Glyph Matrix

RTXUI supports 29 border style keywords mapping directly to Unicode box-drawing and block elements:

Style Keyword	Canonical Alias	Visual Glyphs / Behavior Description
`none`	`hidden`	No border rendered; 0 cells allocated.
`blank`	—	Reserves 1 cell perimeter without drawing lines (background passes through).
`ascii`	—	Plain ASCII fallback: `+`, `-`, `\|`.
`solid`	—	Standard light box-drawing lines: `┌`, `─`, `┐`, `│`, `└`, `┘`.
`round`	`rounded`	Curved corner box-drawing lines: `╭`, `─`, `╮`, `│`, `╰`, `╯`.
`heavy`	—	Bold / heavy stroke lines: `┏`, `━`, `┓`, `┃`, `┗`, `┛`.
`thick`	—	Full block sides (`█`) with half-block top and bottom (`▀`, `▄`).
`double`	—	Double parallel lines: `╔`, `═`, `╗`, `║`, `╚`, `╝`.
`double-horizontal`	—	Double lines on horizontal axes; single line on vertical axes.
`double-vertical`	—	Double lines on vertical axes; single line on horizontal axes.
`dashed`	—	Light dashed stroke lines: `┌`, `╌`, `╎`.
`heavy-dashed`	—	Heavy dashed stroke lines: `┏`, `╍`, `╏`.
`dotted`	—	Light dotted stroke lines: `┌`, `┈`, `┊`.
`dotted-fine`	—	Braille dots along the outer edge of each cell: `⡏`, `⠉`, `⢹`, `⡇`, `⣇`, `⣀`.
`outset`	—	Solid lines, top and left lighter, bottom and right darker: a raised box.
`inset`	—	Solid lines, top and left darker, bottom and right lighter: a sunken box.
`outer`	—	Half-cell block hugging outer cell edge (`▀`, `▄`, `▌`, `▐`).
`inner`	—	Half-cell block hugging inner cell edge.
`tall`	—	Quarter-block vertical bars; eighth-block horizontal lines.
`wide`	—	Quarter-block vertical bars with inset horizontal lines.
`panel`	—	Tall border structure featuring a solid top bar for title integration.
`hkey`	—	Horizontal-only boundary lines on top and bottom.
`vkey`	—	Vertical-only boundary lines on left and right.
`shade-light`	—	25% stippled block fill (`░`).
`shade-medium`	—	50% stippled block fill (`▒`).
`shade-dark`	—	75% stippled block fill (`▓`).
`shadow`	`3d`	Light shading top/left; dark shading bottom/right (depth effect).
`block`	—	Full block vertical columns (`█`) with half-block horizontals.

Fullscreen Demo

cpp

// Copyright 2026 Arthur Sonzogni. All rights reserved.
// Use of this source code is governed by the MIT license that can be found in
// the LICENSE file.
//
// Every border style: solid, double, dashed, round, tall, vkey and more,
// then the ways to combine them: a color in the shorthand, a style per side.
//
// Each tile names the style it draws, so this doubles as a lookup table.
#include <rtxui/rtxui.hpp>
#include <string>
#include <string_view>
#include <vector>

using namespace rtxui;

class BordersDemo : public Component<BordersDemo> {
 public:
  std::vector<std::string> styles = {
      "solid",
      "round",
      "double",
      "heavy",
      "dashed",
      "dotted",
      "dotted-fine",
      "ascii",
      "heavy-dashed",
      "double-horizontal",
      "double-vertical",
      "tall",
      "wide",
      "thick",
      "inner",
      "outer",
      "panel",
      "hkey",
      "vkey",
      "outset",
      "inset",
      "block",
      "shadow",
      "blank",
      "shade-light",
      "shade-medium",
      "shade-dark",
      "none",
  };
  std::vector<std::string> combinations = {
      "border: round red",
      "border: double green",
      "border: solid; border-top: heavy",
      "border: solid; border-bottom: double yellow",
      "border-left: heavy magenta",
      "border-top: solid; border-bottom: solid",
      "border: dashed; border-left-style: heavy; border-right-style: heavy",
      "border: inset cyan",
  };

  std::string_view view = R"html(
      <div class="card">
        <h1>Borders</h1>
        <p>Every value of the border property, each drawn on itself.</p>

        <div class="grid">
          <for each="{styles}" as="s">
            <div class="tile" style="border: {s};">{s}</div>
          </for>
        </div>

        <h2>Combined</h2>
        <div class="grid combinations">
          <for each="{combinations}" as="c">
            <div class="tile" style="{c}">{c}</div>
          </for>
        </div>
      </div>

      <style>
        self {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          color: rgb(230, 237, 243);
        }
        .card {
          border: tall;
          border-color: rgb(48, 54, 61);
          background-color: rgb(22, 27, 34);
          padding: 1 3;
          width: 92;
          max-height: 100%;
          overflow-y: scroll;
        }
        h1, h2 {
          color: rgb(88, 166, 255);
        }
        h2 {
          margin-top: 2;
        }
        p {
          color: rgb(139, 148, 158);
        }
        .grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 2 2;
        }
        .combinations {
          grid-template-columns: repeat(2, 1fr);
        }
        .tile {
          border-color: rgb(88, 166, 255);
          text-align: center;
          padding: 1;
        }
        .tile:hover {
          border-color: yellow;
          background-color:black;
        }
      </style>
    )html";

  BordersDemo() {
    Bind(styles);
    Bind(combinations);
  }
};

int main() {
  auto app = Ref<BordersDemo>::New();
  Screen screen(app);
  screen.Loop();
  return 0;
}

5. Typography and Coloring

content: <string> | attr(<name>) ... | none | normal

color: <color>✦ animatable↓ inherited

foreground-color: <color>✦ animatable↓ inherited

background-color: <color>✦ animatable

background: <color> | none✦ animatable⧉ shorthand

opacity: <number>✦ animatable

text-align: left | right | center | justify↓ inherited

font-weight: bold | bolder | lighter | normal | <number>↓ inherited

font-style: italic | oblique | normal↓ inherited

text-transform: uppercase | lowercase | capitalize | none↓ inherited

text-indent: <integer>↓ inherited

line-clamp: <integer> | none

-webkit-line-clamp: <integer> | none

letter-spacing: <integer> | normal↓ inherited

tab-size: <integer>↓ inherited

line-height: <integer> | normal↓ inherited

overflow-wrap: anywhere | break-word | normal↓ inherited

word-wrap: anywhere | break-word | normal↓ inherited

word-break: normal | break-all↓ inherited

text-overflow: clip | ellipsis

visibility: visible | hidden

cursor: default | pointer

pointer-events: auto | none↓ inherited

user-select: auto | text | none | all↓ inherited

Color Transforms

lighten(amount): Interpolates toward #ffffff in sRGB space.
darken(amount): Interpolates toward #000000 in sRGB space.
alpha(amount): Sets the alpha transparency channel to amount.

Translucent colors

A color with alpha blends with whatever is painted beneath it. Painted straight onto the screen, it blends with the terminal's background: RTXUI asks the terminal for that color on startup (OSC 11), uses it for the blending only, and still leaves the rest of the screen at the terminal's own background, so a translucent or themed terminal shows through. A terminal that does not answer gets the color unblended. Screen::SetBackgroundColor names the background instead, and paints it everywhere. See the translucent example.

`currentColor`

currentColor (any case) is accepted by color, border-color and its per-side longhands, outline-color and outline. A border or outline with it is drawn in the element's text color and follows it, through transitions too; color: currentColor takes the parent's color. Other properties, such as background-color, do not accept it and report it as unsupported.

6. Custom Properties (`--*` and `var()`)

Properties with a -- prefix declare custom variables. They inherit down the element hierarchy and resolve during style application.

css

self {
  --primary-color: rgb(59, 130, 246);
}
.header {
  color: var(--primary-color, white);
}

Fallback Semantics: If a variable is missing, var(--name, fallback) evaluates the fallback expression. Fallbacks may contain nested var() calls.
Substitution Limit: Recursive resolution is capped at 128 expansions to prevent cyclic reference hangs.

7. Flexbox Layout

flex-direction: row | column | row-reverse | column-reverse

flex-wrap: nowrap | wrap | wrap-reverse

flex-flow: <flex-direction> || <flex-wrap>⧉ shorthand

flex-grow: <number>✦ animatable

flex-shrink: <number>✦ animatable

flex-basis: <length>

flex: shorthand⧉ shorthand

order: <integer>

justify-items: stretch | start | center | end

justify-self: auto | stretch | start | center | end

place-items: <align-items> <justify-items>?⧉ shorthand

place-self: <align-self> <justify-self>?⧉ shorthand

align-items: stretch | flex-start | flex-end | center | baseline

align-content: stretch (normal) | flex-start (start) | flex-end (end) | center | space-between | space-around | space-evenly

justify-content: normal (stretch) | flex-start (start) | flex-end (end) | center | space-between | space-around | space-evenly

place-content: <align-content> <justify-content>?⧉ shorthand

gap: <length>⧉ shorthand

row-gap: <length>

column-gap: <length>

8. Grid Layout

grid-template-columns: list of <length> | [names]

grid-template-rows: list of <length> | [names]

grid-template: none | <rows> / <columns> | areas⧉ shorthand

grid-auto-columns: list of <length> | auto

grid-auto-rows: list of <length> | auto

grid-auto-flow: [ row | column ] || dense

grid-template-areas: <string>+ | none

grid-area: <line> [ / <line> ]{0,3}⧉ shorthand

grid-column: <line> [ / <line> ]?⧉ shorthand

grid-column-start: <line>

grid-column-end: <line>

grid-row: <line> [ / <line> ]?⧉ shorthand

grid-row-start: <line>

grid-row-end: <line>

grid-gap: <length>⧉ shorthand

grid-row-gap: <length>

grid-column-gap: <length>

9. Scrolling & Overflow Management

overflow: visible | hidden | scroll | auto⧉ shorthand

overflow-x: visible | hidden | scroll | auto

overflow-y: visible | hidden | scroll | auto

scrollbar-width: auto | none

scrollbar-color: <color> <color>✦ animatable

scroll-speed: <integer>

scroll-speed-x: <integer>

scroll-speed-y: <integer>

scroll-behavior: auto | smooth

10. Positioning, Transitions & Animations

transition: property duration timing-function⧉ shorthand

animation: name duration [timing-function] [delay] [iteration-count] [direction] [fill-mode] [play-state]⧉ shorthand

animation-name: <name># | none

animation-duration: <time>#

animation-delay: <time>#

animation-timing-function: <easing>#

animation-iteration-count: <number># | infinite

animation-direction: normal | reverse | alternate | alternate-reverse

animation-fill-mode: none | forwards | backwards | both

animation-play-state: running | paused

`@keyframes`

css

@keyframes pulse {
  from {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
    animation-timing-function: ease-out;
  }
  to {
    opacity: 0.4;
  }
}

Blocks are selected by from (0%), to (100%) or a percentage, several at once when comma-separated. A property missing from the first or last block runs from, or to, the element's own value. Keyframes animate the properties transitions do: color, background-color, border-color and its per-side border-color-* longhands, opacity, flex-grow, flex-shrink, width, height, top, right, bottom, left, inset and translate. Any other declaration in a block is reported as a diagnostic.

position: static | relative | absolute | fixed | sticky

inset: 1-4 <length> values✦ animatable⧉ shorthand

aspect-ratio: <w> / <h> | <number> | auto

top: <length>✦ animatable

bottom: <length>✦ animatable

left: <length>✦ animatable

right: <length>✦ animatable

translate: <x> [<y>] | none✦ animatable

z-index: <integer> | auto

11. List Styling

list-style-type: disc | circle | square | decimal | none

list-style: disc | circle | square | decimal | none⧉ shorthand

CSS Engine & Attribute Specification ​

1. Engine Formal Grammar ​

Coordinate & Dimensional Model ​

2. Cascade, Inheritance & Specificity ​

2.1 Specificity Vector (A, B, C) ​

2.2 Precedence Order (Descending) ​

3. Spacing, Sizing, and Box Model ​

Logical properties ​

calc() Expressions ​

min(), max(), and clamp() ​

4. Borders and Frames ​

4.1 Border Style Glyph Matrix ​

5. Typography and Coloring ​

Color Transforms ​

Translucent colors ​

currentColor ​

6. Custom Properties (--* and var()) ​

7. Flexbox Layout ​

8. Grid Layout ​

9. Scrolling & Overflow Management ​

10. Positioning, Transitions & Animations ​

@keyframes ​

11. List Styling ​