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.

Browser styling vs Server styling

As the recognition logic is held by the server, the exact same representation is held on it. It means that the position of strokes and fonts should be the same on the client and the server.

As a consequence of this architecture, size and background of editor can be styled with CSS, but you have to use JavaScript API to configure the inside content of the document.

Browser styling, Loader, boundaries and background

You can use regular CSS to configure the size and the background and editor.

Be aware that CSS zoom properties will break the stroke capture and can not be used.

Resizing

As the editor is built with different DOM elements, including canvas and SVG elements, its size does not adapt immediately when the window size changes, plus the server has to be notified of the exact size of the editor. You have to listen to the resize event and call the resize() method of the editor every time the event fires.

window.addEventListener('resize', () => {
    editorElement.editor.resize();
  });

Setting a theme

The next sections are all about server styling

A theme is a style sheet that influences the look & feel of the content rendered by a particular editor object.

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

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

Interactive Ink SDK comes with a built-in default theme. Values defined by the provided style sheet will have a higher priority and override the default style.

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 penStyleClasses() on the editor.

This 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.theme({'.greenThickPen' : { font-family: 'Open Sans', color: '#00FF00FF', '-myscript-pen-width': 1.5 });
editor.penStyleClasses("greenThickPen");

Via dynamic styles

This approach consists in directly setting the style of the pen tool by calling penStyle() 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.penStyle({color: '#00FF00FF', '-myscript-pen-width': 1.5});

While it is possible to update the overall look & feel of the content by setting a theme at any time, iink SDK does not currently offer the possibility to specifically modify a posteriori the style of a selection of elements. This is expected to land in a future version.

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 Google fonts are supported. The available fonts depends on the selected language. See the full list of supported fonts.
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.

Useful links

Styling reference