MyScript iink 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

MyScript iink 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-anim-fill`	Style applied to fill diagram shapes when `diagram.recognition.feedback` is set to `animation-fill`.
`.diagram-fill`	Style applied to fill diagram shapes when setting the shape feedback in the `diagram.interactive-blocks.feedback` property.
`.diagram-guideline`	Style applied to the diagram alignment guides.
`.diagram-handle`	Style applied to the diagram selection handles.

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.

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

Underlining an entire paragraph of text or setting programmatically the text format of a selection 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

The following classes apply to both Raw Content parts and blocks:

Class	Description
`.raw-content`	Default class for items in a “Raw Content” block/part.
`.raw-content-grid`	Default class of the “Raw Content” block/part background grid, when the `raw-content.line-pattern` is `grid`.

Whereas the following classes are specific to Raw Content parts:

Class	Description
`.raw-content-anim-fill`	Sets how shapes should be filled when `raw-content.recognition.feedback` is set to `animation-fill`.
`.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 drawing items in a “Raw Content” part. See details below.

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

To apply .raw-content-anim-fill styling class, iink needs you to both activate the shape recognition with the [raw-content.recognition.types] property and sets the raw-content.recognition.feedback property to animation-fill.
To apply .raw-content-fill styling class, iink needs you to both activate the shape recognition with the [raw-content.recognition.types] property and sets shape in the raw-content.interactive-blocks.feedback property.
To apply .raw-content-shape, .raw-content-text and .raw-content-drawing styling classes, iink needs you to activate the raw-content.feedback.type. Then:

if the shape recognition is disabled, .raw-content-text styling properties will apply to text blocks and raw-content-drawing to the rest of the content.
if the shape recognition 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.

The following classes apply for block visual feedback:

Class	Description
`.block-feedback-math`	Default class for math visual feedback in a “Raw Content” block/part.
`.block-feedback-hint-math`	Default class for math visual feedback hint in a “Raw Content” block/part.

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`	None¹	In millimeters (model unit).
`line-height`	None¹	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.

`.diagram-anim-fill`

Property	Default value	Remarks
`-myscript-pen-fill-color`	#00000014	See possible values.

`.diagram-fill`

Property	Default value	Remarks
`-myscript-pen-fill-color`	none	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.

`.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`	STIX Two Math
`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 Two Text
`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`	STIX Two Math
`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`	None¹	In millimeters (model unit).
`line-height`	None¹	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`	None¹	In millimeters (model unit).
`line-height`	None¹	Multiplier of the font size.
`color`	#000000FF	See possible values.
`-myscript-pen-width`	0.625	In millimeters (model unit).
`-myscript-text-decoration-pen-width`	0.625	In millimeters (model unit).
`-myscript-pen-brush`	FeltPen	See possible values.

`stroke.text-heading1`

Property	Default value	Remarks
`-myscript-text-decoration-style`	`double-underlined`	See possible values

`glyph.text-heading1`

Property	Default value	Remarks
`-myscript-text-decoration-style`	`none`	See possible values

`.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`	None¹	In millimeters (model unit).
`line-height`	None¹	Multiplier of the font size.
`color`	#000000FF	See possible values.
`-myscript-pen-width`	0.625	In millimeters (model unit).
`-myscript-text-decoration-pen-width`	0.625	In millimeters (model unit).
`-myscript-pen-brush`	FeltPen	See possible values.

`stroke.text-heading2`

Property	Default value	Remarks
`-myscript-text-decoration-style`	`underlined`	See possible values

`glyph.text-heading2`

Property	Default value	Remarks
`-myscript-text-decoration-style`	`none`	See possible values

`.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`	None¹	In millimeters (model unit).
`color`	#000000FF	See possible values.
`-myscript-pen-width`	0.625	In millimeters (model unit).
`-myscript-text-decoration-pen-width`	0.625	In millimeters (model unit).
`-myscript-pen-brush`	FeltPen	See possible values.

`stroke.text-emphasis1`

Property	Default value	Remarks
`-myscript-text-decoration-style`	`underlined`	See possible values

`glyph.text-emphasis1`

Property	Default value	Remarks
`-myscript-text-decoration-style`	`none`	See possible values

`.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`	None¹	In millimeters (model unit).
`color`	#000000FF	See possible values.
`-myscript-pen-width`	0.625	In millimeters (model unit).
`-myscript-text-decoration-pen-width`	0.625	In millimeters (model unit).
`-myscript-pen-brush`	FeltPen	See possible values.

`stroke.text-emphasis2`

Property	Default value	Remarks
`-myscript-text-decoration-style`	`double-underlined`	See possible values

`glyph.text-emphasis2`

Property	Default value	Remarks
`-myscript-text-decoration-style`	`none`	See possible values

`.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`	None¹	In millimeters (model unit).
`-myscript-pen-width`	0.625	In millimeters (model unit).
`-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-background`	See possible values

`glyph.text-highlight`

Property	Default value	Remarks
`-myscript-text-decoration-style`	`framed-background`	See possible values

`.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-grid`

Property	Default value	Remarks
`color`	#00000011	See possible values.

`.raw-content-fill`

Property	Default value	Remarks
`-myscript-pen-fill-color`	none	See possible values.

`.raw-content-anim-fill`

Property	Default value	Remarks
`-myscript-pen-fill-color`	none	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.

`.block-feedback-math`

Property	Default value	Remarks
`color`	#77777777	See possible values.
`-myscript-pen-width`	1.0	Unit is `mm`.
`-myscript-pen-brush`	dash	Possible values are `dash` and `Polyline`.

`.block-feedback-hint-math`

Property	Default value	Remarks
`color`	#1a8bffff	See possible values.
`-myscript-pen-width`	1.0	Unit is `mm`.
`font-family`	STIX Two Math
`font-weight`	700	Only numerical values are supported.
`font-size`	3.0	In millimeters (model unit).

Possible values for built-in pen brushes are: Polyline, FountainPen, CalligraphicQuill, CalligraphicBrush, Qalam and FeltPen.
In addition, you can implement additional brushes whose names must start with the prefix Extra-, such as Extra-Pencil in the Android demo example.
Unknown values (including extra ones) fallback to 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.

The highlight background color is the pen color with alpha, and the frame color is the pen color.

iink computes the default line height and font size based on the device resolution instead of using a static css containing default values. ↩ ↩² ↩³ ↩⁴ ↩⁵ ↩⁶ ↩⁷ ↩⁸ ↩⁹ ↩¹⁰ ↩¹¹