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.

We use cookies to ensure that we give you the best experience on our website Read the privacy policy