Styling reference

Restrictions from CSS

The following restrictions apply:

Only a limited subset of CSS properties is supported.
Supported types are different from regular CSS types (e.g. type selectors like h1, p or div are not supported).
The default unit is mm and properties provided with an explicit unit will be ignored.
Keywords such as inherit, initial or unset are not supported.
Universal selector (*) and combinators are not supported.
Possibilities to express colors are constrained.

Type hierarchy

Interactive Ink SDK exposes the following type hierarchy:

ink - Groups all the types described below:
- stroke - Handwritten strokes only.
- glyph - Converted text glyphs.
- line - Converted lines, e.g. obtained when converting a diagram.
- arc - Converted elliptical arcs, ellipses and circles.
- guide - Text guides.

It is possible to combine class and type selectors:

glyph.text {}
line.diagram {}
arc.diagram {}

Available classes per content type

Diagram block

Class	Description
`.diagram`	Default class for items in a “Diagram” content block.
`.diagram-fill`	Style applied to fill diagram shapes.
`.diagram-guideline`	Style applied to the diagram alignment guides.
`.diagram-handle`	Style applied to the diagram selection handles.
`.diagram-selection`	Style applied to the overlay diagram blocks selections.

Drawing block

Class	Description
`.drawing`	Default class for items in a “Drawing” content block.

Math block

Class	Description
`.math`	Default class for items in a “Math” content block.
`.math-variable`	Style applied to the variables after ink conversion.
`.math-solved`	Style applied to the glyphs that are generated by the solver.

Text block

Class	Description
`.text`	Default class for items in a “Text” content block.
`.text-heading1`	Style of text headings of level 1 (Text Document only).
`.text-heading2`	Style of text headings of level 2 (Text Document only).
`.text-emphasis1`	Style of text emphasis type 1 (Text Document only).
`.text-emphasis2`	Style of text emphasis type 2 (Text Document only).
`.text-highlight`	Style of highlighted text (Text Document only).

The behavior in a “Text Document” part is as follows:

Underlining an entire paragraph of text allows you to cycle through text-heading1 (double underline), text-heading2 (simple underline) and basic text (no underline).
Underlining a portion of text allows you to cycle through text-emphasis1 (simple underline), text-emphasis2 (double underline) and basic text (no underline).
Circling over a portion of text allows you to apply text-highlight, circling again removes it.

Properties per class

`.diagram`

Property	Default value	Remarks
`font-family`	“sans-serif”
`font-style`	normal
`font-variant`	normal
`font-weight`	400	Only numerical values are supported.
`font-size`	5	In millimeters (model unit).
`line-height`	1.2	Multiplier of the font size.
`color`	#000000FF	See possible values.
`-myscript-pen-width`	1.2	In millimeters (model unit).
`-myscript-pen-brush`	FeltPen	Sets the brush for the drawn strokes. Does not impact selections, handles and converted shapes. See possible values.
`-myscript-pen-fill-color`	#44AADF44	See possible values.

`.diagram-fill`

Property	Default value	Remarks
`-myscript-pen-fill-style`	solid	Sets whether shapes should be filled. See possible values.
`-myscript-pen-fill-color`	#44AADF44	See possible values.

`.diagram-guideline`

Property	Default value	Remarks
`color`	#1A8BFFFF	See possible values.
`-myscript-pen-width`	1.2	In millimeters (model unit).

`.diagram-handle`

Property	Default value	Remarks
`color`	#1A8BFFFF	See possible values.
`-myscript-pen-width`	1.2	In millimeters (model unit).
`-myscript-pen-fill-color`	#44AADF88	See possible values.

`.diagram-selection`

Property	Default value	Remarks
`color`	#1A8BFFFF	See possible values.
`-myscript-pen-width`	1.2	Unit is `mm`.
`-myscript-pen-fill-color`	#44AADF44	See possible values.

`.drawing`

Property	Default value	Remarks
`color`	#000000FF	See possible values.
`-myscript-pen-width`	1.2	Unit is `mm`.
`-myscript-pen-brush`	FeltPen	See possible values.

`.math`

Property	Default value	Remarks
`font-family`	STIXGeneral
`font-style`	normal
`font-variant`	normal
`font-weight`	400	Only numerical values are supported.
`color`	#000000FF	See possible values.
`-myscript-pen-width`	1.2	Unit is `mm`.
`-myscript-pen-brush`	FeltPen	See possible values.

`.math-variable`

Property	Default value	Remarks
`font-family`	STIXGeneral
`font-style`	normal
`font-variant`	normal
`font-weight`	400	Only numerical values are supported.
`color`	#000000FF	See possible values.

`.math-solved`

Property	Default value	Remarks
`font-family`	STIXGeneral
`font-style`	normal
`font-variant`	normal
`font-weight`	400	Only numerical values are supported.
`color`	#A8A8A8FF	See possible values.

`.text`

Property	Default value	Remarks
`font-family`	“sans-serif”
`font-style`	normal
`font-variant`	normal
`font-weight`	400	Only numerical values are supported.
`font-size`	5	In millimeters (model unit).
`line-height`	1.2	Multiplier of the font size.
`color`	#000000FF	See possible values.
`-myscript-pen-width`	1.2	In millimeters (model unit).
`-myscript-pen-brush`	FeltPen	See possible values.

The spacing of handwriting guides (if enabled) is given by font-size * line-height. For instance, the following CSS will correspond to a 12-millimeter spacing:

.text {
  font-size: 10;
  line-height: 1.2;
}

`.text-heading1`

Property	Default value	Remarks
`font-family`	“sans-serif”
`font-style`	normal
`font-variant`	normal
`font-weight`	650	Only numerical values are supported.
`font-size`	9.166667	In millimeters (model unit).
`line-height`	1.2	Multiplier of the font size.
`color`	#000000FF	See possible values.
`-myscript-pen-width`	1.2	In millimeters (model unit).
`-myscript-text-decoration-color`	#000000FF	See possible values.
`-myscript-text-decoration-background-color`	#FFFFFF00	See possible values.
`-myscript-text-decoration-pen-width`	1.2	In millimeters (model unit).
`-myscript-pen-brush`	FeltPen	See possible values.

Notes:

-myscript-text-decoration-style is by default set to double-underlined for stroke.text-heading1.
-myscript-text-decoration-style is by default set to none for glyph.text-heading1.

`.text-heading2`

Property	Default value	Remarks
`font-family`	“sans-serif”
`font-style`	normal
`font-variant`	normal
`font-weight`	650	Only numerical values are supported.
`font-size`	6.25	In millimeters (model unit).
`line-height`	1.2	Multiplier of the font size.
`color`	#000000FF	See possible values.
`-myscript-pen-width`	1.2	In millimeters (model unit).
`-myscript-text-decoration-color`	#000000FF	See possible values.
`-myscript-text-decoration-background-color`	#FFFFFF00	See possible values.
`-myscript-text-decoration-pen-width`	1.2	In millimeters (model unit).
`-myscript-pen-brush`	FeltPen	See possible values.

-myscript-text-decoration-style is by default set to underlined for stroke.text-heading2.
-myscript-text-decoration-style is by default set to none for glyph.text-heading2.

`.text-emphasis1`

Property	Default value	Remarks
`font-family`	“sans-serif”
`font-style`	normal
`font-variant`	normal
`font-weight`	700	Only numerical values are supported.
`font-size`	5.0	In millimeters (model unit).
`color`	#000000FF	See possible values.
`-myscript-pen-width`	1.2	In millimeters (model unit).
`-myscript-text-decoration-color`	#000000FF	See possible values.
`-myscript-text-decoration-background-color`	#FFFFFF00	See possible values.
`-myscript-text-decoration-pen-width`	1.2	In millimeters (model unit).
`-myscript-pen-brush`	FeltPen	See possible values.

-myscript-text-decoration-style is by default set to underlined for stroke.emphasis1.
-myscript-text-decoration-style is by default set to none for glyph.emphasis1.

`.text-emphasis2`

Property	Default value	Remarks
`font-family`	“sans-serif”
`font-style`	normal
`font-variant`	normal
`font-weight`	700	Only numerical values are supported.
`font-size`	5.0	In millimeters (model unit).
`color`	#000000FF	See possible values.
`-myscript-pen-width`	1.2	In millimeters (model unit).
`-myscript-text-decoration-color`	#000000FF	See possible values.
`-myscript-text-decoration-background-color`	#FFFFFF00	See possible values.
`-myscript-text-decoration-pen-width`	1.2	In millimeters (model unit).
`-myscript-pen-brush`	FeltPen	See possible values.

-myscript-text-decoration-style is by default set to double-underlined for stroke.emphasis2.
-myscript-text-decoration-style is by default set to none for glyph.emphasis2.

`.text-highlight`

Property	Default value	Remarks
`font-family`	“sans-serif”
`font-style`	normal
`font-variant`	normal
`font-weight`	700	Only numerical values are supported.
`font-size`	5.0	In millimeters (model unit).
`-myscript-pen-width`	1.2	In millimeters (model unit).
`-myscript-text-decoration-color`	#000000FF	If not set, `-myscript-text-decoration-color` will be the same as the current pen color. See possible values.
`-myscript-text-decoration-background-color`	#FFED2666	If not set, `-myscript-text-decoration-background-color` will be derived from the current pen color. See possible values.
`-myscript-text-decoration-pen-width`	1.2	In millimeters (model unit).
`-myscript-pen-brush`	FeltPen	See possible values.

`stroke.text-highlight`

Property	Default value	Remarks
`-myscript-text-decoration-style`	`framed-outline`	`framed-outline` only displays the framed outline of the decoration: property `-myscript-text-decoration-background-color` is ignored.

`glyph.text-highlight`

Property	Default value	Remarks
`-myscript-text-decoration-style`	`framed-background`	`framed-outline` does not display the outline of the decoration: property `-myscript-text-decoration-color` is ignored.

Possible values

Colors

Colors can be specified as rgb(), rgba(), hsl(), hsla(), #rgb, #rgba, #rrggbb, #rrggbbaa.

Named colors (black, red, etc.) are not supported.

`-myscript-pen-brush`

Possible values for pen brushes are: Polyline, FountainPen, CalligraphicQuill, CalligraphicBrush, Qalam and FeltPen.

`-myscript-text-decoration-style`

none - No decoration.
underlined - Simple underline.
double-underlined - Double underline.
framed - Rectangular frame drawn around the content and background color.
circled - Rounded frame drawn around the content and background color.
framed-outline - Rectangular frame around the content, no background is drawn.
framed-background - Rectangular frame around the content with only the background being rendered.
circled-outline - Circle frame around the content, no background is drawn.
circled-background - Circle frame around the content with only the background being rendered.

`-myscript-pen-fill-style`

none - No fill.
solid - Fill with a solid color.