Show an example opentype.RenderOptions object

[doox911]

Hey. I don’t understand which object to transfer as the last argument to

new Text (font: opentype.Font, text: string, fontSize: number, combine ?: boolean, centerCharacterOrigin ?: boolean, bezierAccuracy ?: number, opentypeOptions ?: opentype.RenderOptions): Text,

because I have opentype.RenderOptions === undefined?

And how do I make a thin (neat) font?

bad font

[danmarshall]

Hi @doox911 - from your example, it seems that you might want captions instead of fonts

Captions are fragments of text that can be positioned anywhere in your model, useful for adding documentation within your drawing. Captions are unlike the Text model, which is a line drawing of glyphs in a given font.

[utkarshsaraogi]

Can you exactly tell what are those options? I'm also looking for this, since I need to generate text that has fill property not just outline.

[danmarshall]

@utkarshsaraogi The TextModel code invokes an opentype.js font's forEachGlyph method which takes the options object.

This object is loosely defined by opentype.js in their Readme for the font object, and further defined in their JSDoc as:

/**
 * @typedef GlyphRenderOptions
 * @type Object
 * @property {string} [script] - script used to determine which features to apply. By default, 'DFLT' or 'latn' is used.
 *                               See https://www.microsoft.com/typography/otspec/scripttags.htm
 * @property {string} [language='dflt'] - language system used to determine which features to apply.
 *                                        See https://www.microsoft.com/typography/developers/opentype/languagetags.aspx
 * @property {boolean} [kerning=true] - whether to include kerning values
 * @property {object} [features] - OpenType Layout feature tags. Used to enable or disable the features of the given script/language system.
 *                                 See https://www.microsoft.com/typography/otspec/featuretags.htm
 */

Looking at their forEachGlyph method code we can see that it also has some other undocumented options like letterSpacing and tracking.

But remember, Maker.js does not have a "fill" concept internally - it is strictly for line drawing without fill, until you export your line drawing to a fill-enabled format such as SVG. So these opentype.js options might not help you achieve that.

Perhaps you can let me know what you are trying to achieve, it may be that you want captions instead of letterform outlines (fonts) if you want filled text (see my previous comment above). It also depends on your output format. Are you using SVG?

[utkarshsaraogi]

I am creating single line diagram(SLD) using maker.js. There are various components and connection wires having text labels. I am exporting this model as SVG to extract all the paths data, to render it in my app, so that user can interact with it. Like zoom in/out and pan. Also can provide input to generate the SLD accordingly.

By default loading font file from opentype.js and then using it to create text model generates a text that has outline boundary, which is not very crisp/clear when zoomed out a bit.

I am looking for a way so that I can generate text which contains only single path(line), not double outlines or if they can be filled with some color.

Edit: I tried captions also, that seems pretty nice while using in playground, but cant seem to find a way to keep its size same, and export its path data points in SVG.

For rendering svg in app, I am using threejs to generate shapes based on parsed data from exported svg from makerjs.

[danmarshall]

@utkarshsaraogi it does sound that captions would be better suited to your scenario. Let me know we can make the size work for you.