Styling

The MyScriptJS editor is built to make easier the capturing and rendering of strokes into the browser.

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.

Boundaries and background styling

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.
CSS class Description
ms-editor Please do not modify this, it is the style to apply to the editor, some property values are mandatory to get a proper render.
loader Style to apply to the loader element.
error-msg Style to apply to the error message element.
Please do not edit the CSS style of the DOM element. To offer full support of the gestures, the server has to know the exact position of every element inside the component. Changing the theme and the pen style is the only way to style the content of the component.

Understanding the difference between theme and pen style

The component contains a content part. The content style can be manipulated in two different ways. The theme is the global style of the part. Every time the theme is changed, all the part content is “re-styled”.

For example, if you start writing with the color theme as blue and later change this theme to red, all the content will switch to red, even the first strokes. To have the style stuck to the content, you have to use pen-style. When the user writes with a pen-style set, the configured style is kept even if the theme or pen-style is changed.

At the moment, only rgb(), rgba(), hsl(), hsla(), #rgb, #rgba, #rrggbb and #rrggbbaa formats are supported for colors. Distances like width and height are only expressed in millimeters.

You can customize the theme and pen style used to display the typeset content at the editor creation. The second or third parameter can be used, like in the below example.

const theme = {
  ink: { // The default ink color if the penStyle wasn't set
    color: '#1A9FFF',
    '-myscript-pen-width': 1,
    '-myscript-pen-fill-style': 'none',
    '-myscript-pen-fill-color': '#FFFFFF00'
  },
  '.math': { // Properties for math converted ink
    'font-family': 'STIXGeneral',
    color: '#000000'
  },
  '.text': { // Properties for text converted ink
    'font-family': 'Open Sans',
    'font-size': 10,
    color: '#000000'
  }
}

const editor = MyScript.register(editorElement, options,
  { // penStyle
    color: '#FFFFFF',
    '-myscript-pen-width': 2
  }, theme});

The default properties of strokes and primitives are set by the ink type, and each content-type - here math and text - has its own class describing specific style to be applied.

The pen width is expressed in millimeters. No other unit can be used. Supported color formats are rgb(), rgba(), hsl(), hsla(), #rgb, #rgb,a #rrggbb or #rrggbbaa. Currently, only the Open Sans font is supported .

You can change the pen style at every moment. Please note that the pen style color and width properties stick to the content, even after a conversion in a font style. To unset the pen style set the value to {}.

const yourNewPenStyle = {
  color: '#F70000',
}

editor.penStyle = youNewPenStyle

You can also change the theme. It is immediately applied to the whole document and trigger a repositioning of elements (reflow) into the document.

const yourTheme = {
  '.text': {
    'font-size': 13.0
  }
}

editor.theme = yourTheme
More font support and style customization will be possible in the upcoming releases. Feel free to ask what you need in the support section.

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. You have to listen to the resize event and call the resize() method of the editor every time the event fires.

We use cookies to ensure that we give you the best experience on our website Read the privacy policy