Leon Sans Documentation

repository·master·Indexed 27 days ago

A code-based geometric sans-serif typeface designed for HTML5 Canvas. Leon Sans allows developers to dynamically manipulate font weights and create complex animations, waves, and effects by accessing raw glyph coordinate data. It includes a LeonSans class for rendering to Canvas or WebGL (via PIXI.js), utilities for retrieving Latin glyph path data, and support for stroke-by-stroke drawing animations using TweenMax (GSAP).

Tokens: 2.7K
Snippets: 3
Records: 15
Agent score: 95%

What's inside Leon Sans

Install and use Leon Sans

master

To use Leon Sans, download the minified leon.js file from the dist folder and include it in your HTML. You can then instantiate LeonSans and draw it onto an HTML5 Canvas element.

<script src="js/leon.js"></script>

let leon, canvas, ctx;

const sw = 800;
const sh = 600;
const pixelRatio = 2;

function init() {
    canvas = document.createElement('canvas');
    document.body.appendChild(canvas);
    ctx = canvas.getContext("2d");

    canvas.width = sw * pixelRatio;
    canvas.height = sh * pixelRatio;
    canvas.style.width = sw + 'px';
    canvas.style.height = sh + 'px';
    ctx.scale(pixelRatio, pixelRatio);

    leon = new LeonSans({
        text: 'The quick brown\nfox jumps over\nthe lazy dog',
        color: ['#000000'],
        size: 80,
        weight: 200
    });

    requestAnimationFrame(animate);
}

function animate(t) {
    requestAnimationFrame(animate);

    ctx.clearRect(0, 0, sw, sh);

    const x = (sw - leon.rect.w) / 2;
    const y = (sh - leon.rect.h) / 2;
    leon.position(x, y);

    leon.draw(ctx);
}

window.onload = () => {
    init();
};

Configure LeonSans constructor options

master

When instantiating new LeonSans(options), you can provide the following configuration object:

Name	Type	Description
`text`	string	The text that needs to be shown.
`size`	integer	The size of the text.
`weight`	number	The weight of the font: `1 - 900`. [Default: `1`]
`color`	array	The colors of each characters. [Default: `['#000000']`]
`colorful`	array	The colors for colorful effect. [Default: `['#c5d73f', '#9d529c', '#49a9db', '#fec330', '#5eb96e', '#fc5356', '#f38f31']`]
`tracking`	integer	The spacing between the characters of a block of text. [Default: `0`]
`leading`	integer	The distance between each line of text. [Default: `0`]
`align`	string	How the text content of the element is horizontally aligned: `left, center, right`. [Default: `left`]
`pathGap`	number	The gap between each coordinate of the points on a line of each character: `0 - 1`. [Default: `0.5`]
`amplitude`	number	The amplitude of the wave effect: `0 - 1`. [Default: `0.5`]
`maxWidth`	number	The width of the text sentence.
`breakWord`	boolean	Words break when reaching the end of a line. [Default: `false`]
`fps`	number	The FPS for the wave effect. [Default: `30`]
`isPath`	boolean	`true` to get the coordinate values of the points on a line of each character. [Default: `false`]
`isWave`	boolean	`true` for the wave effect. [Default: `false`]

Create a drawing animation with Leon Sans and TweenMax
master
To create a drawing animation where the glyphs are drawn stroke-by-stroke, include TweenMax (GSAP) in your HTML. You can then animate the value property of each object in the leon.drawing array from 0 to 1.
```
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
```
```
let i, total = leon.drawing.length;
for (i = 0; i < total; i++) {
    TweenMax.fromTo(leon.drawing[i], 1.6, {
        value: 0
    }, {
        delay: i * 0.05,
        value: 1,
        ease: Power4.easeOut
    });
}
```
https://github.com/cmiscm/leonsans/blob/master/README.md

Reference LeonSans properties

master

The LeonSans instance exposes the following properties:

Name	Type	Description
`lineWidth`	number	The thickness of lines of the character.
`scale`	number	The scale of the character. `scale` is `1` when the font size is `500`.
`drawing`	array	The drawing object values for each character. `0` is the beginning of the animation, `1` is the end of the animation state.
`data`	array	An object of the raw data for the text.
`paths`	array	The coordinate values of the points on a line of each character.
`drawingPaths`	array	The coordinate values of the points on a line of each character to draw the drawing animation in WebGL. It has 1px distance of each path.
`wavePaths`	array	The coordinate values of the points on a line for the wave effect.
`rect`	Object	The size of the text and its position: `{x: x position, y: y position, w: width, h: height}`.

Reference LeonSans methods

master

The LeonSans instance provides the following methods for controlling and drawing the text:

Name	Description
`on()`	Add `update` event.
`off()`	Remove `update` event.
`position(x, y)`	Set the position of the text.
`updateDrawingPaths()`	Update paths for drawing in WebGL (PIXI.js). It's very expensive, only call when it needs.
`drawPixi(graphics)`	Draw text in WebGL with PIXI.js.
`draw(ctx)`	Draw text in the Canvas element.
`drawColorful(ctx)`	Draw the colorful effect.
`wave(ctx, t)`	Draw the wave effect.
`pattern(ctx, w, h)`	Draw rectangle shapes at each path point
`grid(ctx)`	Draw grid for each type.
`point(ctx)`	Draw circles at each drawing point and lines for each type.
`box(ctx)`	Draw outline box for the text.
`reset()`	Reset all the values.
`dispose()`	Dispose.

Use the typo() function for typography presets
master
The typo function is the primary entrypoint for creating typography presets. It accepts a string identifier v representing a specific typographic style (such as UPPER, LOWER, NUMBER, SPECIAL, or LATIN). If the provided identifier is not found in the dataset, it defaults to the TOFU preset. The function returns a cloned typography object with the property v set to the requested identifier.
https://github.com/cmiscm/leonsans/blob/master/src/font/index.js
Retrieve coordinate data for Latin glyphs
master
The latinutil.js module provides a series of functions to retrieve coordinate data for specific Latin glyphs. Each function accepts x and y coordinates and returns an array of path objects containing drawing commands (like m for move, l for line, b for bezier, a for arc) and associated properties. These functions are intended for low-level font rendering or path generation within the Leon Sans project.
https://github.com/cmiscm/leonsans/blob/master/src/font/latinutil.js
Generate font data with generateFontData()
master
Use generateFontData to transform raw path data into a structured font data object containing bounding rectangles, ratios, and centered vector paths. This is useful for preparing font glyphs for rendering within a specific coordinate system.
Parameters:
- w: Width of the bounding rectangle.
- fw: Font width.
- fh: Font height.
- x1, x2, y1, y2: Ratio coordinates.
- path: An array of path objects, where each object contains a d property (path data) and a v property (vertex array).
Returns: An object containing:
- rect: { w, h, fw, fh } where h is fixed at 824.
- ratio: { x1, x2, y1, y2 }.
- p: An array of objects with d and centered v (as Vector instances).
- clone(): A method to create a deep copy of the generated data object.
https://github.com/cmiscm/leonsans/blob/master/src/font/util.js
Calculate rotation angles with getR() and getCurveR()
master
These utilities calculate rotation angles (in radians) based on coordinate points, typically used for aligning paths or tangents.
getR(x1, y1, x2, y2)
Calculates the angle between two points $(x1, y1)$ and $(x2, y2)$ using -Math.atan2(x1 - x2, y1 - y2).
getCurveR(x1, y1, x2, y2, x3, y3, x4, y4, t)
Calculates the tangent angle of a Bezier curve at a specific time t (where $0 \le t \le 1$) using the four control points $(x1, y1)$ through $(x4, y4)$.
https://github.com/cmiscm/leonsans/blob/master/src/font/util.js
Access lowercase font data via the LOWER object
master
The LOWER object provides pre-generated font data for all lowercase English letters ('a' through 'z'). Each property in the object contains the result of generateFontData, which is ready for use in rendering engines that consume Leon Sans font structures.
Available keys: a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t, u, v, w, x, y, z.
https://github.com/cmiscm/leonsans/blob/master/src/font/lower.js
Use getLatin functions for glyph path data
master
To retrieve the path data for a specific Latin glyph, call the corresponding getLatinN function (where N is the glyph index) with the desired x and y coordinates.
Available functions include:
- getLatin1(x, y)
- getLatin2(x, y)
- getLatin3(x, y)
- getLatin4(x, y)
- getLatin5(x, y)
- getLatin6(x, y)
- getLatin7(x, y)
- getLatin8(x, y)
- getLatin9(x, y)
- getLatin10(x, y)
- getLatin11(x, y)
- getLatin12(x, y)
- getLatin13(x, y)
- getLatin14(x, y)
https://github.com/cmiscm/leonsans/blob/master/src/font/latinutil.js
Access uppercase font data via the UPPER object
master
The UPPER object provides pre-generated font data for all uppercase English letters ('A' through 'Z'). Each entry is created using generateFontData and contains the necessary coordinate and path information to render the corresponding glyph. You can access specific letters by their character key.
https://github.com/cmiscm/leonsans/blob/master/src/font/upper.js

Leon Sans Documentation

What's inside Leon Sans

Install and use Leon Sans

Configure LeonSans constructor options

Create a drawing animation with Leon Sans and TweenMax

Reference LeonSans properties

Reference LeonSans methods

Use the typo() function for typography presets

Retrieve coordinate data for Latin glyphs

Generate font data with generateFontData()

Calculate rotation angles with getR() and getCurveR()

`getR(x1, y1, x2, y2)`

`getCurveR(x1, y1, x2, y2, x3, y3, x4, y4, t)`

Access lowercase font data via the LOWER object

Use getLatin functions for glyph path data

Access uppercase font data via the UPPER object