MyScript iink SDK makes it easy to style content. In this part of the guide, you will learn how to set a theme and how you can change the color of the pen at any time.

Setting a theme

A theme is a style sheet that influences the look & feel of the content rendered by a particular IINKEditor object. It is not specific to any particular piece of content and it is therefore not stored in the IINKContentPart.

The same content will look different if it is opened by two editor instances configured with different themes.

The style sheet shall be passed as a string via the theme property of the IINKEditor object. For example, to set the default ink color to blue for the current editor, you can write:

editor?.set(theme: "stroke { color: #0000FFFF; }")

MyScript iink SDK dynamically computes the default styling parameters such as line height and font size, based on the device resolution. You can override this default styling, by setting a theme: values defined by your provided style sheet will have a higher priority.

Theme changes are not managed by iink SDK undo/redo stack. To let your users undo or redo theme changes, you have to manage it on the integration side. For a possible implementation path, read how you can combine the iink SDK undo/redo stack with that of your application (advanced).

See the full styling reference for more information about available styling options.

Changing the style of the writing tools

You can set the style associated with a pointer tool that adds content to the Content Part, for example to choose the PEN or HIGHLIGHTER color or their thicknesses. This is also useful when providing end users with a color palette or when letting them define the characteristics of the PEN or HIGHLIGHTER tool.

There are two possible approaches: via the theme or by setting dynamic styles.

Via the theme

The theming approach, which consists in specifying classes corresponding to the different style configurations in the custom theme and in applying a given style to the tool by calling set(styleClasses:forTool:) on the tool controller.

This first approach is the most efficient one, and is better suited when users are provided with a fixed set of choices. It will however be dependent of the theme and thus not stored within the content part.

Example applied on the highlighter tool:

//Configure the theme
editor?.set(theme: ".greenThickPen { color: #00FF00FF; -myscript-pen-width: 2.1; }")

// Configure the highlighter
editor?.toolController?.set(styleClasses: "greenThickPen", forTool: IINKPointerTool.highlighter)

Via dynamic styles

This approach consists in directly setting the style of the tool by calling set(style:forTool:) method on the tool controller.

It is less optimal in terms of processing time than the theming approach. However, it makes it easy to dynamically create styles (for instance if you let your users build their own color palettes) and will be saved within the content part.

Example applied on the pen tool:

editor?.toolController?.set(style: "color: #00FF00FF; -myscript-pen-width: 2.1", forTool: IINKPointerTool.pen)

How to apply style a posteriori

Depending on the Content Part type, it is possible to apply style on some content after it has been written or typeset:

Select the content either with the lasso selector or as an entire block.
Call the editor applyStyle method with the corresponding selection/block and the CSS style properties to apply.

iink SDK CSS specificities

Cascading Style Sheets (CSS) are a very common way to declaratively style content, for instance on the Web. MyScript iink SDK only relies on a subset of CSS for styling, with a few specificities to keep in mind.

Restrictions

The following restrictions apply:

Only a limited subset of CSS properties is supported.
Supported types are different from those of regular CSS (for example 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 (*) is not supported, neither are combinators.

CSS types

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, obtained for instance when converting a diagram
- arc - Converted elliptical arcs, ellipses and circles
- guide - The text guides

Built-in classes and properties

The full reference of supported classes and properties can be found here.

Illustration by some examples

Custom theme

There are several possibilities to semantically style elements stored inside a part. Let’s imagine that you have developped an application based on Math content:

You may want converted content to appear blue, while keeping the default black color for handwritten ink. You may also choose a nice green color for the results of the math solver, and set the font to bold (weight of 700) and italic.

The code would look like this:

editor?.set(theme: "glyph.math { color: #3A308CFF; }"
                     "glyph.math-solved {"
                     "  color: #1E9035FF;"
                     "  font-weight: 700;"
                     "  font-style: italic;"
                     "}")

In this example, the values defined in the new style sheet overwrote the values of the default built-in style sheet.

Pen color options

Let’s now imagine that you want to provide users with a color palette, letting them use two different ink colors, one of them being the default blue that you defined, the other being a red color (a color a teacher could use to correct an exercise).

There are two ways to proceed: create pen styles “on the fly” using the toolStyle property of the tool controller or specify at theme level a set of classes corresponding to predefined colors and apply those styles using the toolStyleClasses property of the tool controller.

As you are dealing with predefined color, the second approach is probably the best, and it happens to also be the most efficient one.

You can first add two new classes (one for each pen) to your custom theme:

editor?.set(theme: ".math { color: #3A308CFF; }"
                     "glyph.math-solved {"
                     "  color: #1E9035FF;"
                     "  font-weight: 700;"
                     "  font-style: italic;"
                     "}"
                     ".defaultPen { color: #3A308CFF; }"
                     ".correctionPen { color: #FF0000FF; }")

Now, reacting to the selection of one of the pen options is just a matter of calling either:

editor?.toolController?.set(styleClasses: "defaultPen", forTool: IINKPointerTool.pen);

editor?.toolController?.set(styleClasses: "correctionPen", forTool: IINKPointerTool.pen);

The last part of the step-by-step guide will talk about error management and provide useful hints at what may be happening in case you experience some puzzling behaviors.

Useful links

Styling reference