Styling reference

Interactive Ink SDK makes it easy to style content with css properties listed in this page. In addition to these css styling properties, you can adjust its default configuration with different options presented here.

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.

Raw Content part

Class Description
.raw-content Default class for items in a “Raw Content” part.
.raw-content-fill Sets how shapes should be filled.
.raw-content-shape Default class for shape items in a “Raw Content” part.
.raw-content-text Default class for text blocks in a “Raw Content” part.
.raw-content-drawing Default class for non text and/or not shape items in a “Raw Content” part. See details below.

The recognition feedback via styling in a “Raw Content” behaves as follows:

  1. if raw-content.recognition.shape is disabled, .raw-content-text styling properties will apply to text blocks and raw-content-drawing to the rest of the content.
  2. if raw-content.recognition.shape is enabled, .raw-content-text styling properties will apply to text blocks, .raw-content-shape to shape items and raw-content-drawing to the rest of the content.

Properties per class

.diagram

Property Default value Remarks
font-family “sans-serif”  
font-style normal  
font-variant normal  
font-weight 300 Only numerical values are supported.
font-size None1 In millimeters (model unit).
line-height None1 Multiplier of the font size.
color #000000FF See possible values.
-myscript-pen-width 0.625 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.0 In millimeters (model unit).

.diagram-handle

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.

.diagram-selection

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.

.drawing

Property Default value Remarks
color #000000FF See possible values.
-myscript-pen-width 0.625 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 300 Only numerical values are supported.
color #000000FF See possible values.
-myscript-pen-width 0.625 Unit is mm.
-myscript-pen-brush FeltPen See possible values.

.math-variable

Property Default value Remarks
font-family STIX  
font-style italic  
font-variant normal  
font-weight 300 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 300 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 300 Only numerical values are supported.
font-size None1 In millimeters (model unit).
line-height None1 Multiplier of the font size.
color #000000FF See possible values.
-myscript-pen-width 0.625 In millimeters (model unit).
-myscript-pen-brush FeltPen See possible values.

Note that “Text” and “Text Document” guides spacings are not identical.

  • For “Text” parts, the spacing of handwriting guides (if enabled) is given by font-size * line-height.

  • For “Text Document” parts, the guides spacing considers the font-size and line-height product too. But some more computation adjusts the line gap.

For instance, the following CSS will correspond to a 13-millimeter spacing when the theme is set to a “Text” part. For a “Text Document” part, the example is still valid but the outcome might be slightly different.

.text {
  font-size: 10;
  line-height: 1.3;
}
In both cases, to avoid visual artifacts, you should change the editor theme before opening the part.

.text-heading1

Property Default value Remarks
font-family “sans-serif”  
font-style normal  
font-variant normal  
font-weight 700 Only numerical values are supported.
font-size None1 In millimeters (model unit).
line-height None1 Multiplier of the font size.
color #000000FF See possible values.
-myscript-pen-width 0.625 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 0.625 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 700 Only numerical values are supported.
font-size None1 In millimeters (model unit).
line-height None1 Multiplier of the font size.
color #000000FF See possible values.
-myscript-pen-width 0.625 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 0.625 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 None1 In millimeters (model unit).
color #000000FF See possible values.
-myscript-pen-width 0.625 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 0.625 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 None1 In millimeters (model unit).
color #000000FF See possible values.
-myscript-pen-width 0.625 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 0.625 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 None1 In millimeters (model unit).
-myscript-pen-width 0.625 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 0.625 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-background does not display the outline of the decoration: property -myscript-text-decoration-color is ignored.

.raw-content

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

.raw-content-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.

.raw-content-shape

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

.raw-content-text

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

.raw-content-drawing

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

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.
  1. iink computes the default line height and font size based on the device resolution instead of using a static css containing default values.  2 3 4 5 6 7 8 9 10 11

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