Colours

The micronodes only canvas text takes: the nine colours, highlight and symbol.

#Canvas text only

The nine text colours, !highlight, !symbol and !cue.highlight go only in canvas text: a paragraph, heading or list in a scene's detail, a table cell, a question's prompt, a mark's label. Anywhere in the narrative — inside bold or italic, a callout's body or its title — each is a compile error:

scene{
    The **!red{gradient}** is the rise over the run.
}

[semantic]'!red' is not allowed in the narrative; colour, highlighting and symbols belong in the canvas

The narrative names in words what the canvas shows. Bold, italic, maths and code stay allowed in it.

On the canvas, all of them together: two marks named in their lines' colours with a symbol beside each, and a table with coloured names, a highlighted cell and a column of symbols.

Two lines of weekly scores, blue for the morning group rising from 52 to 71 and orange for the evening group falling from 60 to 50, each named at its last reading in its own colour beside a green rise or red fall arrow. Beneath, a table of the two groups whose names are coloured to match, the 71 highlighted yellow, and a rise or fall symbol in the last column.Two lines of weekly scores, blue for the morning group rising from 52 to 71 and orange for the evening group falling from 60 to 50, each named at its last reading in its own colour beside a green rise or red fall arrow. Beneath, a table of the two groups whose names are coloured to match, the 71 highlighted yellow, and a rise or fall symbol in the last column.
graph{
    line(x: 1, 2, 3, 4; y: 52, 58, 63, 71; colour: blue)
    line(x: 1, 2, 3, 4; y: 60, 57, 55, 50; colour: orange)
    point(x: 4; y: 71; colour: blue; label: !blue{Morning} !symbol:rise(colour: green))
    point(x: 4; y: 50; colour: orange; label: !orange{Evening} !symbol:fall(colour: red))
}(
    x axis label: week
    y axis label: score
)

table{
    Group            | Week 1 | Week 4 | Change
    !blue{Morning}   | 52     | ==71== | !symbol:rise(colour: green)
    !orange{Evening} | 60     | 50     | !symbol:fall(colour: red)
}

#Colouring a run of text

A colour micronode is the hue's name around a run of text: !teal{f(x)}. It takes inline content and no attributes. Only the nine bare hues — red, orange, yellow, green, teal, blue, purple, pink and grey — have one; !light-blue{…} and !neutral{…} are refused as unknown micronodes. The family page text colours sets the nine side by side and says how each is drawn in a label and in running text.

Here each curve's label, and the list item about it, is written in the curve's own colour:

scene{
    Two curves from the same start.
}[
    graph{
        curve(expression: x^2; colour: teal; label: !teal{growing})
        curve(expression: -x^2; colour: orange; label: !orange{shrinking})
    }

    - !teal{$f(x) = x^2$} climbs away from the origin
    - !orange{$g(x) = -x^2$} falls away from it
]
scene{
    The slope.
}[
    The !light-blue{gradient} is the rise over the run.
]

[unknown-identifier]unknown micronode `light-blue`

#Highlighting

!highlight, or !h, sets a tinted band behind a run of text. ==…== is the shorthand for the default yellow. colour, the implicit attribute, takes one of the nine hues — !h:teal{…} — or neutral, a dark band with the text set light on it.

scene{
    Slope and intercept.
}[
    The ==gradient== is the rise over the run, and the !h:neutral{intercept} is where the line starts. !h:teal{Both} are read off the line.
]
Warning
A light- or dark- tone, or a hex(…) or rgb(…) literal, compiles and draws no band. In a mark's label every highlight is drawn yellow, whatever its colour.

A highlight is there for the whole scene. Words marked from one step and plain again at another are !cue.highlight, which draws a wash across them at in and back off at out:

scene{
    Where the curves meet.
    ===
    The first climbs.
    ===
    The second falls.
}[
    - !cue.h{!teal{f(x)}}(in: 1; out: 2) climbs
    - !cue.h:2{!orange{g(x)}} falls
]

It marks words in a paragraph, heading or list on the canvas; in a table cell, an image caption or a mark's label the words are shown unmarked.

#Symbols

!symbol draws a glyph in a run of canvas text, sitting on the line like a letter and one em square. The name is the implicit attribute: !symbol:tick(). The reference page lists the thirty-four names; any other is refused with the list.

Warning
The brackets are required. Without them, !symbol:tick is printed as typed.
scene{
    Two answers, marked.
}[
    table{
        Answer   | Marked
        $x = 2$  | !symbol:tick(colour: green)
        $x = -2$ | !symbol:cross(colour: red)
    }
]

colour defaults to neutral: the colour of the mark's label the glyph sits in, or the body-text colour in a table cell or paragraph. Each glyph carries its name as an accessible label, so a screen reader reads a cell holding only a symbol.

Warning
A colour micronode around the glyph does not colour it — colour does.

A name outside the set, such as !symbol:smile(), is refused with the list: micronode `symbol`: attribute `name`: `smile` is not one of the allowed values: tick, cross, dash, question, star, warning, info, arrow-right, arrow-left, arrow-up, arrow-down, rise, fall, person, people, house, business, school, book, clock, money, car, tree, leaf, drop, sun, bolt, flask, globe, lightbulb, spade, heart, diamond, club.

Last updated