Cloud Development Kit

Answered

Set kerning of imported text

I am able to successfully import text using the command 'this.editor.import_('test', "text/plain")' and am able to modify the font size by setting it in 'this.editor.theme'. My issue now is that the imported text (smaller font size) has large gaps between the words. Is there a setting for the kerning of the text? I am struggling to find how to fix this.

image


Thank you




Best Answer

 Dear Remington Drake,


In order to modify the line-height, you should apply it to the text class property, as in the following example:

editor.theme = {".text":{"font-size":10,"line-height":1.3}} ;

This should fix your kerning issue as well.


Regards,


Gwenaëlle



Dear Remington Drake,


Thank you for your request.


In order to better understand your scenario, can you share with us your code or give us some more details about the sequence of your commands?


Regards,


Gwenaëlle


My editor is configured in  componentDidMount()  as follows:


this.editor = MyScriptJS.register(this.refs.editor, {

recognitionParams: {

type: 'TEXT',

protocol: 'WEBSOCKET',

apiVersion: 'V4',

server: {

scheme: 'https',

host: 'cloud.myscript.com',

},

v4: {

text: {

configuration: {

customResources: resources,

},

},

},

},

})


this.editor.theme = { '.blackPen': { 'font-family': 'Open Sans', 'font-size': 5, 'line-height': 1, color: '#000', '-myscript-pen-width': '0.5' } }

this.editor.penStyleClasses = 'blackPen';


An issue I have had is the 'font-size' key seems to work, but 'line-height' appears to have no effect. When I set the penStyleClasses after every export it will fix the kerning issue, however there is a momentary delay and looks visually poor.

Answer

 Dear Remington Drake,


In order to modify the line-height, you should apply it to the text class property, as in the following example:

editor.theme = {".text":{"font-size":10,"line-height":1.3}} ;

This should fix your kerning issue as well.


Regards,


Gwenaëlle



1 person likes this