Styling reference

This page list the most common styling properties supported by MyScript iink SDK.

MyScript iink SDK makes it easy to style content using 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.

Available classes and properties

glyph type

MyScript iink SDK exposes the glyph type that allows you to specify fonts properties for all converted text glyphs:

In addition, the following classes and properties are available that are specific to each content type:

Diagram block

.diagram is the default class for items in a "Diagram" content block:

Math block

.math is the default class for items in a "Math" content block:

.math-variable defines the style applied to the variables after ink conversion:

.math-solved defines the style applied to the glyphs that are generated by the solver:

Text block

.text is the default class for items in a "Text" content block:

Note that iink computes the default line height and font size based on the device resolution instead of using a static css containing default values. You can modify font-size and line-height values to adjust the guides spacing, but 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;
}

Raw Content block

.raw-content is the default class for items in a "Raw Content" block:

.raw-content-grid is the default class of the "Raw Content" block background pattern , when the raw-content.line-pattern is grid, dots or lines:

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 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-pen-orientation-sensitivity

This property values range from 0 to 1, with a default value of 0 meaning there is no effect and 1 meaning full sensitivity.

-myscript-pen-tilt-sensitivity

This property values range from 0 to 1, with a default value of 0 meaning there is no effect and 1 meaning full sensitivity.

-myscript-pen-pressure-sensitivity

This property values range from 0 to 1, with a default value of 0 meaning there is no effect and 1 meaning full sensitivity.