Styling

Interactive Ink 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 Editor object. It is not specific to any particular piece of content and it is therefore not stored in the ContentPart.

The style sheet shall be passed as a string to the setTheme() method of the Editor object. For example, to set the default ink color to blue for the current editor, you can write:

editor.setTheme("stroke { color: #0000FFFF; }");

Interactive Ink 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 pen

It is possible to set the style associated with the pen, for example to change its color or its thickness. This is useful when providing an end user with a color palette or when letting him/her define the characteristics of the pen 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 pen configurations in the custom theme and in applying a given style to the pen tool by calling setPenStyleClasses() on the editor.

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:

editor.setTheme(".greenThickPen { color: #00FF00FF; -myscript-pen-width: 1.5; }");
editor.setPenStyleClasses("greenThickPen");

Via dynamic styles

This approach consists in directly setting the style of the pen tool by calling setPenStyle() on the editor.

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:

editor.setPenStyle("color: #00FF00FF; -myscript-pen-width: 1.5");

iink SDK CSS specificities

Cascading Style Sheets (CSS) are a very common way to declaratively style content, for instance on the Web. Interactive Ink 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

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, 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.

Styling to get recognition feedback as you write

You can configure iink to tune the style so that you get immediate feedback on what the engine recognizes as text, shape and drawing while writing in a "Raw Content" part. To learn how to proceed, see the styling reference.

Back to the example

Custom theme

Let’s first adapt the theme of your calculator. There are several possibilities to semantically style elements stored inside a math part.

For example, you may want converted content to appear slightly bluer, 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.setTheme("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 setPenStyle() or specify at theme level a set of classes corresponding to predefined colors and apply those styles using setPenStyleClasses().

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.setTheme(".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.setPenStyleClasses("defaultPen");

or

editor.setPenStyleClasses("correctionPen");

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