Home Examples Options API License
☰

TypesetBot - Beta

Dynamically typeset text on the web.

TypesetBot
npm version
Get Started / Documentation

Make your web text look professional, without hiring a professional typesetter.

Desktop Tablet Mobile

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut lectus nec tellus venenatis feugiat sed a sem. Nullam rutrum lacus sed enim vehicula, vel suscipit ex gravida. Duis interdum est non augue bibendum ornare. Nunc accumsan egestas quam. Sed mollis quis urna ac laoreet. Mauris consequat congue nibh ut varius. Quisque ultrices felis et diam mollis convallis. Vivamus convallis felis vitae augue faucibus, vel porttitor diam viverra. Vivamus dictum vulputate aliquet. Ut neque arcu, venenatis eget ullamcorper id, pulvinar sit amet nunc. Morbi cursus euismod lorem rutrum lacinia. Suspendisse enim elit, consequat eu finibus sed, elementum sed risus.

Install

CDN

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

<!-- (optional) -->
<!-- hyphenation library -->
<script src="https://unpkg.com/@coffeeio/hypher@1.0.0/dist/hypher.js" type="text/javascript"></script>
<!-- hyphenation pattern for US english -->
<script src="https://unpkg.com/@fluid-project/hyphenation-patterns@0.2.2-dev.20181115T211247Z.d313a52/dist/browser/en-us.js" type="text/javascript"></script>

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.

Buy commercial license on Gumroad (Subscription)

or

Buy commercial license on Gumroad (Lifetime)

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

This example shows the basic usage of TypesetBot. More examples can be found here.

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

Features

  • Device support

    TypesetBot works on any device size and dynamically re-typesets every time the viewport size changes. As text width gets smaller the more benefit from TypesetBot you will see.

  • Hyphenation

    TypesetBot uses a hyphenation algorithm, so words are only hyphenated if it improves the overall look of the text. Currently there is support for hyphenation in 39 different languages.

  • Smart line algorithm

    TypesetBot's algorithm figures out the best layout, so the text doesn't jump from short to long lines.

  • Settings

    A wide range of settings are adjustable from a json object, to allow full customizability, so you get the result you want.