@roukara/kerning
This library provides a function for applying kerning to text within an HTML element. Kerning is the process of adjusting the spacing between characters in a font to create a visually pleasing result. By adding extra space between certain characters, we can improve the legibility and aesthetics of text.
Install
npm install @roukara/kerning
import kerning from '@roukara/kerning';
or
<script src="https://unpkg.com/@roukara/kerning"></script>
Usage
This takes in three arguments:
-
textElement
(require): An HTML element that contains the text to be kerned. -
kerningData
(require): An object that maps character indices to kerning values. The kerning value specifies the amount of space that should be added to the left of the character at the corresponding index. -
direction
(optional): An optional string argument that specifies the direction of the kerning. It can be either'horizontal'
(default) or'vertical'
.
const textElement = document.querySelector('.my-text');
const kerningData = {
1: 0.02,
3: -0.01,
7: 0.05,
// etc.
};
kerning(textElement, kerningData);
The kerning function will modify the text within the textElement by adding elements with margin-left
or margin-top
styles for each character with a defined kerning value.
Note that the kerning values are specified in em
units, which are relative to the font size of the text.