Miss any of our Open RFC calls?Watch the recordings here! »

typesetbot

1.0.0-beta1 • Public • Published

Rax

TypesetBot

Dynamically typeset text on the web.

TypesetBot
npm version

See coffeeio.com for complete docs and demos.

Install

CDN

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/hypher@1.0.0/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/hyphenation-patterns@0.2.2-dev.20181115T211247Z.d313a52/dist/browser/{language-code}.js

Download

Minified:

License

Commercial license

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

Open source license

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.

Usage

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/hypher@1.0.0/dist/hypher.js"></script>
<!-- hyphenation pattern for US english -->
<script type="text/javascript" src="https://unpkg.com/@fluid-project/hyphenation-patterns@0.2.2-dev.20181115T211247Z.d313a52/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>

Settings

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).

Install

npm i typesetbot

DownloadsWeekly Downloads

11

Version

1.0.0-beta1

License

GPL-3.0

Unpacked Size

6.55 MB

Total Files

108

Last publish

Collaborators

  • avatar