Styling reference
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.
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 {}
Class
Description
.drawing
Default class for items in a “Drawing” content 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.
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.
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.0
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 .
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 .
Property
Default value
Remarks
color
#1A8BFFFF
See possible values .
-myscript-pen-width
1.0
In millimeters (model unit).
Property
Default value
Remarks
color
#1A8BFFFF
See possible values .
-myscript-pen-width
1.0
In millimeters (model unit).
-myscript-pen-fill-color
#44AADF88
See possible values .
Property
Default value
Remarks
color
#1A8BFFFF
See possible values .
-myscript-pen-width
1.0
Unit is mm
.
-myscript-pen-fill-color
#44AADF44
See possible values .
Property
Default value
Remarks
color
#000000FF
See possible values .
-myscript-pen-width
1.0
Unit is mm
.
-myscript-pen-brush
FeltPen
See possible values .
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.0
Unit is mm
.
-myscript-pen-brush
FeltPen
See possible values .
Property
Default value
Remarks
font-family
STIX
font-style
italic
font-variant
normal
font-weight
400
Only numerical values are supported.
color
#000000FF
See possible values .
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 .
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.0
In millimeters (model unit).
-myscript-pen-brush
FeltPen
See possible values .
Currently the .text
font-size
and line-height
parameters only affect “Text” content type, not “Text Document”.
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 ;
}
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.0
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.0
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
.
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.0
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.0
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
.
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.0
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.0
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
.
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.0
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.0
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
.
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.0
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.0
In millimeters (model unit).
-myscript-pen-brush
FeltPen
See possible values .
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.
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.
Colors can be specified as rgb()
, rgba()
, hsl()
, hsla()
, #rgb
, #rgba
, #rrggbb
, #rrggbbaa
.
Named colors (black
, red
, etc.) are not supported .
Possible values for pen brushes are: Polyline
, FountainPen
, CalligraphicQuill
, CalligraphicBrush
, Qalam
and FeltPen
.
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.
none
- No fill.
solid
- Fill with a solid color.