TypesetBot
<link href="https://unpkg.com/typesetbot/dist/typesetbot.min.css" rel="stylesheet">
<script src="https://unpkg.com/typesetbot/dist/typesetbot.min.js" type="text/javascript"></script>Hyphenation Library
<script src="https://unpkg.com/@coffeeio/[email protected]/dist/hypher.js" type="text/javascript"></script>Hyphenation pattern, replace {language-code} with language code for example en-us. Full list can be found here.
https://unpkg.com/@fluid-project/[email protected]/dist/browser/{language-code}.js
- typesetbot.css
- typesetbot.js
- hypher.js
- Hyphenation pattern example: en-us.js
Minified:
If you want to use TypesetBot to develop commercial sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary. Purchase a TypesetBot Commercial License at coffeeio.com
If you are creating an open source application under a license compatible with the GNU GPL license v3, you may use TypesetBot under the terms of the GPLv3.
More examples found at coffeeio.com
<head>
<link rel="stylesheet" href="https://unpkg.com/typesetbot/dist/typesetbot.min.css">
<script type="text/javascript" src="https://unpkg.com/typesetbot/dist/typesetbot.min.js"></script>
<!-- (optional) -->
<!-- hyphenation library -->
<script type="text/javascript" src="https://unpkg.com/@coffeeio/[email protected]/dist/hypher.js"></script>
<!-- hyphenation pattern for US english -->
<script type="text/javascript" src="https://unpkg.com/@fluid-project/[email protected]/dist/browser/en-us.js"></script>
<!-- Initialize TypesetBot -->
<script type="text/javascript">
let tsb = new TypesetBot(
'.container', // Query selector.
{
'hyphenLanguage': 'en-us',
'alignment': 'justify'
}
);
</script>
</head>
<body>
<p class="container">Lorem ipsum...</p>
<p class="container">Lorem ipsum...</p>
</body>Default settings. Any setting can be overwritten.
Most common settings to adjust is hyphenLanguage and alignment.
{
// Hyphenation. -----------------------------------------------------------
// Language of hyphenation patterns to use
hyphenLanguage: string = 'en-us';
// Minimum number of letters to keep on the left side of word
hyphenLeftMin : number = 2;
// Minimum number of letters to keep on the right side of word
hyphenRightMin: number = 2;
// Algorithm. -------------------------------------------------------------
// Other options are 'left', 'right' and 'center'.
alignment: string = 'justify';
// Penalty for line-breaking on a hyphen
hyphenPenalty : number = 50;
// Penalty for line-breaking on a hyphen when using ragged text
hyphenPenaltyRagged: number = 500;
// Penalty when current and last line had flag value 1.
flagPenalty : number = 3000;
// Penalty when switching between ratio classes.
fitnessClassDemerit: number = 3000;
// 4 classes of adjustment ratios.
fitnessClasses: number[] = [-1, -0.5, 0.5, 1, Infinity];
// Offset to prefer fewer lines by increasing demerit of "~zero badness lines"
demeritOffset : number = 1;
// Max adjustment ratio before we give up on finding solutions
absoluteMaxRatio: number = 5;
// Maximum acceptable adjustment ratio.
maxRatio: number = 2;
// Minimum acceptable adjustment ratio. Less than -1 will make the text too closely spaced.
minRatio: number = -1;
// Tags inside element that might break the typesetting algorithm
unsupportedTags: string[] = ['BR', 'IMG'];
// Font. ------------------------------------------------------------------
// Ideal space width
spaceWidth : number = 1 / 3;
// How much can the space width stretch
spaceStretchability: number = 1 / 6;
// How much can the space width shrink
spaceShrinkability : number = 1 / 9;
// Debug mode. ------------------------------------------------------------
// Prints performance stats.
debug: boolean = false;
// Don't run Typesetting as soon as program is initialized.
noRun: boolean = false;
// Define levels to log. Options: 'error', 'warn', 'log'
logs: string[] = ['error', 'warn'];
}See coffeeio.com for complete docs and demos.
Copyright © 2020 CoffeeIO (Mathias Grundtvig Andreasen).