1.0.0 • Published 3 years ago

apl-custom-fonts v1.0.0

Weekly downloads
-
License
ISC
Repository
github
Last release
3 years ago

APLCustomFonts

NPM version Build Status

This module allows for an easy implementation of custom fonts for the Alexa Presentation Language at runtime. It converts any text into an APL-compatible Alexa Vector Graphic (AVG) that can be easily implemented in any APL document.

Installation

This module requires NodeJS.

$ npm install --save apl-custom-fonts

Constructor

Here is an example of initializing the module, loading a font and converting it into an AVG.

const APLCustomFonts = require('apl-custom-fonts').default;

const customFont = new APLCustomFonts("Hello world!", {
    fill: 'black',
    fontSize: 72
});

customFont.loadFont('./fonts/OpenSans_Medium.ttf');
console.log(customFont.getAVG());

Note: The options parameter accepts more entries. A complete overview of all available options is described below at .updateOptions.

API

.loadFont()

Used to synchronously load a font in memory. The preferred file types are .ttf or .otf.

.updateOptions(options: Options)

Options is an required object containing optional entries:

  • fill define the text color (default is "black")
  • fontSize define the font size (default is 72)
  • stroke define the stroke color (default is "white")
  • strokeWidth define the stroke width (default is 1)
  • letterSpacing define the letter spacing (default is 0)

.getAVG(text?: string)

Convert text to AVG. Optionally uses a text parameter for passing text to convert to AVG.

.getPath(text?: string)

Convert text to raw path data. Optionally uses a text parameter for passing text to convert to path data.

.getSVG(text?: string)

Convert text to SVG. Optionally uses a text parameter for passing text to convert to SVG.

.getDimensions()

Get dimensions of path data.

APL Integration

The generated AVGs can be implemented like any other AVG. It is recommended creating separate objects for each generated AVG-text. AVGs can be easily added to the graphics object in your APL document like so:

{
    "type": "APL",
    "version": "1.6",
	"graphics": {
		"HelloWorldText": {
			"type": "AVG",
			"version": "1.2",
			"width": 743,
			"height": 73,
			"items": {
				"type": "path",
				"description": "Hello World!",
				"fill": "blue",
				"stroke": "red",
				"strokeWidth": 1,
				"pathData": "M19.51 57L15.12 57Q14.33 57 13.68 56.5 13.03 55.99 12.89 55.2L12.89 55.2 2.95 ... 729.94 52.82Z"
			}
		}
	},
}

When added to your APL document, AVGs can be referenced by any VectorGraphic object.

{
	"type": "VectorGraphic",
	"source": "HelloWorldText",
	"scale": "best-fill"
}

License

MIT

Credits

APLCustomFonts depends on the following modules:

A big shoutout goes out to these guys! Thanks for making this module possible.