https://github.com/tdjsnelling/microtype
A JavaScript package that implements LaTeX-like text justification, hyphenation, and other micro-typographic adjustments
https://github.com/tdjsnelling/microtype
html javascript justification latex microtype microtypography typescript typography
Last synced: 8 months ago
JSON representation
A JavaScript package that implements LaTeX-like text justification, hyphenation, and other micro-typographic adjustments
- Host: GitHub
- URL: https://github.com/tdjsnelling/microtype
- Owner: tdjsnelling
- Created: 2024-03-20T11:35:06.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2024-06-19T16:34:22.000Z (almost 2 years ago)
- Last Synced: 2024-11-15T10:30:42.618Z (over 1 year ago)
- Topics: html, javascript, justification, latex, microtype, microtypography, typescript, typography
- Language: HTML
- Homepage:
- Size: 225 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# microtype
A JavaScript package that implements LaTeX-like text justification, hyphenation, and other micro-typographic adjustments. The name of course is borrowed from the [microtype LaTeX package](https://eu.mirrors.cicku.me/ctan/macros/latex/contrib/microtype/microtype.pdf).
## Usage
The package can be installed via npm, and imported as an ES module:
```
npm install microtypejs
```
```js
import microtype from "microtypejs";
```
Or loaded directly via a CDN:
```html
```
Once the package is loaded, the most basic usage is just to call the `microtype` function with an array of elements you want to format.
At present, the elements you want to format **must contain nothing but text**. Paragraphs containing inline elements are not supported. This is something I want to improve in the future.
```js
microtype({
elements: document.querySelectorAll("p")
});
```
More on other configuration options below.
## Options
The full list of available options and their defaults are as follows:
```ts
type MicrotypeOptions = {
elements: HTMLElement[];
maxSpaceShrink: number;
maxSpaceGrow: number;
maxTrackingShrink: number;
maxTrackingGrow: number;
protrusion: { [key: string]: number };
hyphenate: boolean;
showFrame: boolean;
};
const defaultOptions: MicrotypeOptions = {
elements: [], // The array of elements to format
maxSpaceShrink: 0.15, // How much space characters can shrink (em)
maxSpaceGrow: 0.25, // How much space characters can grow (em)
maxTrackingShrink: 0.01, // How much letter spacing can shrink (em)
maxTrackingGrow: 0.01, // How much letter spacing can grow (em)
protrusion: {
// How much certain characters may protrude from the right margin (em)
",": 0.1,
".": 0.15,
"!": 0.1,
"-": 0.2,
},
hyphenate: true, // Whether or not words may hyphenate across lines
showFrame: false, // Whether or not to show the target frame for formatted elements (for debugging)
};
```
## Demo
Visit [tdjsnelling.github.io/microtype](https://tdjsnelling.github.io/microtype/test/from-cdn/) for a live demo.