Styling reference

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

ClassDescription
.diagramDefault class for items in a "Diagram" content block.
.diagram-anim-fillStyle applied to fill diagram shapes when diagram.recognition.feedback is set to animation-fill.
.diagram-fillStyle applied to fill diagram shapes when diagram.recognition.feedback is set to background-fill.
.diagram-guidelineStyle applied to the diagram alignment guides.
.diagram-handleStyle applied to the diagram selection handles.

Drawing block

ClassDescription
.drawingDefault class for items in a "Drawing" content block.

Math block

ClassDescription
.mathDefault class for items in a "Math" content block.
.math-variableStyle applied to the variables after ink conversion.
.math-solvedStyle applied to the glyphs that are generated by the solver.

Text block

ClassDescription
.textDefault class for items in a "Text" content block.
.text-heading1Style of text headings of level 1 (Text Document only).
.text-heading2Style of text headings of level 2 (Text Document only).
.text-emphasis1Style of text emphasis type 1 (Text Document only).
.text-emphasis2Style of text emphasis type 2 (Text Document only).
.text-highlightStyle 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:

ClassDescription
.raw-contentDefault class for items in a "Raw Content" block/part.
.raw-content-gridDefault class of the "Raw Content" block/part background grid, when the text-document.raw-content.line-pattern/raw-content.line-pattern is grid.

Whereas the following classes are specific to Raw Content parts:

ClassDescription
.raw-content-anim-fillSets how shapes should be filled when raw-content.recognition.feedback is set to animation-fill.
.raw-content-fillSets how shapes should be filled.
.raw-content-shapeDefault class for shape items in a "Raw Content" part.
.raw-content-textDefault class for text blocks in a "Raw Content" part.
.raw-content-drawingDefault 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 part 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.

The raw-content.feedback.type should be activated for debug purpose only.

Properties per class

.diagram

PropertyDefault valueRemarks
font-family"sans-serif"
font-stylenormal
font-variantnormal
font-weight300Only numerical values are supported.
font-sizeNone1In millimeters (model unit).
line-heightNone1Multiplier of the font size.
color#000000FFSee possible values.
-myscript-pen-width0.625In millimeters (model unit).
-myscript-pen-brushFeltPenSets the brush for the drawn strokes. Does not impact selections, handles and converted shapes. See possible values.

.diagram-anim-fill

PropertyDefault valueRemarks
-myscript-pen-fill-color#00000014See possible values.

.diagram-fill

PropertyDefault valueRemarks
-myscript-pen-fill-colornoneSee possible values.

.diagram-guideline

PropertyDefault valueRemarks
color#1A8BFFFFSee possible values.
-myscript-pen-width1.0In millimeters (model unit).

.diagram-handle

PropertyDefault valueRemarks
color#1A8BFFFFSee possible values.
-myscript-pen-width1.0In millimeters (model unit).
-myscript-pen-fill-color#44AADF88See possible values.

.drawing

PropertyDefault valueRemarks
color#000000FFSee possible values.
-myscript-pen-width0.625Unit is mm.
-myscript-pen-brushFeltPenSee possible values.

.math

PropertyDefault valueRemarks
font-familySTIX Two Math
font-stylenormal
font-variantnormal
font-weight300Only numerical values are supported.
color#000000FFSee possible values.
-myscript-pen-width0.625Unit is mm.
-myscript-pen-brushFeltPenSee possible values.

.math-variable

PropertyDefault valueRemarks
font-familySTIX Two Text
font-styleitalic
font-variantnormal
font-weight300Only numerical values are supported.
color#000000FFSee possible values.

.math-solved

PropertyDefault valueRemarks
font-familySTIX Two Math
font-stylenormal
font-variantnormal
font-weight300Only numerical values are supported.
color#A8A8A8FFSee possible values.

.text

PropertyDefault valueRemarks
font-family"sans-serif"
font-stylenormal
font-variantnormal
font-weight300Only numerical values are supported.
font-sizeNone1In millimeters (model unit).
line-heightNone1Multiplier of the font size.
color#000000FFSee possible values.
-myscript-pen-width0.625In millimeters (model unit).
-myscript-pen-brushFeltPenSee 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

PropertyDefault valueRemarks
font-family"sans-serif"
font-stylenormal
font-variantnormal
font-weight700Only numerical values are supported.
font-sizeNone1In millimeters (model unit).
line-heightNone1Multiplier of the font size.
color#000000FFSee possible values.
-myscript-pen-width0.625In millimeters (model unit).
-myscript-text-decoration-pen-width0.625In millimeters (model unit).
-myscript-pen-brushFeltPenSee possible values.

stroke.text-heading1

PropertyDefault valueRemarks
-myscript-text-decoration-styledouble-underlinedSee possible values

glyph.text-heading1

PropertyDefault valueRemarks
-myscript-text-decoration-stylenoneSee possible values

.text-heading2

PropertyDefault valueRemarks
font-family"sans-serif"
font-stylenormal
font-variantnormal
font-weight700Only numerical values are supported.
font-sizeNone1In millimeters (model unit).
line-heightNone1Multiplier of the font size.
color#000000FFSee possible values.
-myscript-pen-width0.625In millimeters (model unit).
-myscript-text-decoration-pen-width0.625In millimeters (model unit).
-myscript-pen-brushFeltPenSee possible values.

stroke.text-heading2

PropertyDefault valueRemarks
-myscript-text-decoration-styleunderlinedSee possible values

glyph.text-heading2

PropertyDefault valueRemarks
-myscript-text-decoration-stylenoneSee possible values

.text-emphasis1

PropertyDefault valueRemarks
font-family"sans-serif"
font-stylenormal
font-variantnormal
font-weight700Only numerical values are supported.
font-sizeNone1In millimeters (model unit).
color#000000FFSee possible values.
-myscript-pen-width0.625In millimeters (model unit).
-myscript-text-decoration-pen-width0.625In millimeters (model unit).
-myscript-pen-brushFeltPenSee possible values.

stroke.text-emphasis1

PropertyDefault valueRemarks
-myscript-text-decoration-styleunderlinedSee possible values

glyph.text-emphasis1

PropertyDefault valueRemarks
-myscript-text-decoration-stylenoneSee possible values

.text-emphasis2

PropertyDefault valueRemarks
font-family"sans-serif"
font-stylenormal 
font-variantnormal
font-weight700Only numerical values are supported.
font-sizeNone1In millimeters (model unit).
color#000000FFSee possible values.
-myscript-pen-width0.625In millimeters (model unit).
-myscript-text-decoration-pen-width0.625In millimeters (model unit).
-myscript-pen-brushFeltPenSee possible values.

stroke.text-emphasis2

PropertyDefault valueRemarks
-myscript-text-decoration-styledouble-underlinedSee possible values

glyph.text-emphasis2

PropertyDefault valueRemarks
-myscript-text-decoration-stylenoneSee possible values

.text-highlight

PropertyDefault valueRemarks
font-family"sans-serif"
font-stylenormal
font-variantnormal
font-weight700Only numerical values are supported.
font-sizeNone1In millimeters (model unit).
-myscript-pen-width0.625In millimeters (model unit).
-myscript-text-decoration-pen-width0.625In millimeters (model unit).
-myscript-pen-brushFeltPenSee possible values.

stroke.text-highlight

PropertyDefault valueRemarks
-myscript-text-decoration-styleframed-backgroundSee possible values

glyph.text-highlight

PropertyDefault valueRemarks
-myscript-text-decoration-styleframed-backgroundSee possible values

.raw-content

PropertyDefault valueRemarks
color#000000FFSee possible values.
-myscript-pen-width0.625Unit is mm.
-myscript-pen-brushFeltPenSee possible values.

.raw-content-grid

PropertyDefault valueRemarks
color#00000011See possible values.

.raw-content-fill

PropertyDefault valueRemarks
-myscript-pen-fill-colornoneSee possible values.

.raw-content-anim-fill

PropertyDefault valueRemarks
-myscript-pen-fill-colornoneSee possible values.

.raw-content-shape

PropertyDefault valueRemarks
color#000000FFSee possible values.
-myscript-pen-width0.625Unit is mm.
-myscript-pen-brushFeltPenSee possible values.

.raw-content-text

PropertyDefault valueRemarks
color#000000FFSee possible values.
-myscript-pen-width0.625Unit is mm.
-myscript-pen-brushFeltPenSee possible values.

.raw-content-drawing

PropertyDefault valueRemarks
color#000000FFSee possible values.
-myscript-pen-width0.625Unit is mm.
-myscript-pen-brushFeltPenSee 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.

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

Footnotes

  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