PageSourceSearch

https://coffeeio.com/typesetbot/

html coffeeio.com collected 2026-09-24 14:12:05 UTC 20,388 bytes, 380 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    
4<script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="21551c58-0013-47c8-8d40-5a4f244611d8" data-blockingmode="auto" type="text/javascript"></script>
4
5
6    <meta charset="utf-8">
7    <meta name="title" content="CoffeeIO">
8    <meta name="version" content="1.1.3">
9    <meta name="MobileOptimized" content="width">
10    <meta name="HandheldFriendly" content="true">
11    <meta name="viewport" content="width=device-width, initial-scale=1.0">
12
13    <link rel="apple-touch-icon" sizes="57x57" href="/assets/favicon/apple-icon-57x57.png">
14    <link rel="apple-touch-icon" sizes="60x60" href="/assets/favicon/apple-icon-60x60.png">
15    <link rel="apple-touch-icon" sizes="72x72" href="/assets/favicon/apple-icon-72x72.png">
16    <link rel="apple-touch-icon" sizes="76x76" href="/assets/favicon/apple-icon-76x76.png">
17    <link rel="apple-touch-icon" sizes="114x114" href="/assets/favicon/apple-icon-114x114.png">
18    <link rel="apple-touch-icon" sizes="120x120" href="/assets/favicon/apple-icon-120x120.png">
19    <link rel="apple-touch-icon" sizes="144x144" href="/assets/favicon/apple-icon-144x144.png">
20    <link rel="apple-touch-icon" sizes="152x152" href="/assets/favicon/apple-icon-152x152.png">
21    <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-icon-180x180.png">
22    <link rel="icon" type="image/png" sizes="192x192"  href="/assets/favicon/android-icon-192x192.png">
23    <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
24    <link rel="icon" type="image/png" sizes="96x96" href="/assets/favicon/favicon-96x96.png">
25    <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
26    <link rel="manifest" href="/assets/favicon/manifest.json">
27    <meta name="msapplication-TileColor" content="#ffffff">
28    <meta name="msapplication-TileImage" content="/assets/favicon/ms-icon-144x144.png">
29    <meta name="theme-color" content="#ffffff">
30
31    <meta http-equiv="X-UA-Compatible" content="IE=edge">
32    <meta name="viewport" content="width=device-width, initial-scale=1">
33
34    <link rel="stylesheet" href="https://unpkg.com/[email protected]/css/cookies-eu-banner.default.css">
35
36    <link rel="stylesheet" href="https://unpkg.com/[email protected]/build/pure-min.css" integrity="sha384-oAOxQR6DkCoMliIh8yFnu25d7Eq/PHS21PClpwjOTeU2jRSq11vu66rf90/cZr47" crossorigin="anonymous">
37    <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
38    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
39    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
40    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/pure/1.0.0/pure-min.css">
41    <link rel="stylesheet" href="/assets/main.css">
42
43    <title>CoffeeIO</title>
44</head>
45
46  <body>
47    <main class="page-content" aria-label="Content">
48      <div class="wrapper">
49        
49<script type="text/javascript" src="https://unpkg.com/@coffeeio/[email protected]/dist/hypher.js"></script>
vendor: 1 bytes, line 49
49
50<script type="text/javascript" src="https://unpkg.com/@fluid-project/[email protected]/dist/browser/en-us.js"></script>
vendor: 1 bytes, line 50
50
51<script type="text/javascript" src="https://unpkg.com/@fluid-project/[email protected]/dist/browser/da.js"></script>
51
52
53<!-- <link href="https://unpkg.com/typesetbot/dist/typesetbot.min.css" rel="stylesheet">
54<script src="https://unpkg.com/typesetbot/dist/typesetbot.min.js" type="text/javascript"></script>
54 -->
55
56<!-- debug -->
57
58<link href="/assets/project/typesetbot/assets/typesetbot.min.css" rel="stylesheet">
59<script src="/assets/project/typesetbot/assets/typesetbot.min.js"></script>
59
60
61
62<div class="nav-website-icon" style="margin-bottom: 10px;">
63    <a href="/" title="Take me to the frontpage">
64        <img src="/assets/logo/coffeeio32x32.png" alt="logo" class="footer-heading-logo">
65    </a>
66</div>
67<div class="tsb-nav">
68    <a class="pure-button pure-button-primary" href="/typesetbot">Home</a>
69    <a class="pure-button pure-button-primary" href="/typesetbot/examples">Examples</a>
70    <a class="pure-button pure-button-primary" href="/typesetbot/options">Options</a>
71    <a class="pure-button pure-button-primary" href="/typesetbot/api">API</a>
72    <a class="pure-button pure-button-primary" href="/typesetbot/license">License</a>
73</div>
74
75<div class="navbar burger">
76    <a href="#" onclick="return false;">☰</a>
77</div>
78<ul class="pure-menu-list navbar table-of-contents closed"></ul>
79
80
81<script>
82// Contruct table of contents.
83document.addEventListener("DOMContentLoaded", function(){
84    var toc = document.querySelector('.table-of-contents');
85    [].slice
86      .call(document.querySelectorAll("main h2, main h3"))
87      .forEach(item => {
88
89        var id = item.innerText.toLowerCase().split(' ').join('-');
90        item.id = id;
91        var tag = item.tagName;
92        var text = item.innerHTML;
93
94        if (id != null) {
95            item.innerHTML = '<a href="#' + id + '" aria-hidden="true" class="anchor" id="user-content-table-of-contents"><svg aria-hidden="true" class="octicon octicon-link" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>' + item.innerHTML;
96            if (tag === 'H2') {
97                toc.innerHTML += ('<li class="pure-menu-item"><a href="#' + id + '" class="pure-menu-link">' + text + '</a></li>');
98            } else if (tag === 'H3') {
99                toc.innerHTML += ('<li class="pure-menu-item indent"><a href="#' + id + '" class="pure-menu-link">' + text + '</a></li>');
100            }
101        }
102      });
103
104    // Toggle toc display on mobile.
105    document.querySelector(".navbar.burger > a").addEventListener("click", function(e) {
106        if (toc.classList.contains('closed')) {
107            toc.classList.remove('closed');
108            toc.classList.add('closed-desktop');
109        } else {
110            toc.classList.add('closed');
111            toc.classList.remove('closed-desktop');
112        }
113    });
114});
115
116
117</script>
117
118
119<article class="post" itemscope itemtype="http://schema.org/BlogPosting">
120
121
122<header class="post-header project-header">
123    <div class="project-header-title">
124        <h1 class="post-title" itemprop="name headline">TypesetBot - Beta</h1>
125        <p align="center">
126        Dynamically typeset text on the web.
127        </p>
128    </div>
129    <div class="project-header-badgets">
130        <div class="project-title-badgets">
131            <a href="https://travis-ci.org/CoffeeIO/TypesetBot" rel="nofollow"><img alt="TypesetBot" src="https://camo.githubusercontent.com/2217ddb004939a9faf009ef172601c37cdbdfbed/68747470733a2f2f7472617669732d63692e6f72672f436f66666565494f2f54797065736574426f742e7376673f6272616e63683d6d6173746572" data-canonical-src="https://travis-ci.org/CoffeeIO/TypesetBot.svg?branch=master" style="max-width:100%;"></a>
132            <a href="https://www.codacy.com/app/mgapcdev/TypesetBot/dashboard" rel="nofollow"><img src="https://camo.githubusercontent.com/f0e2ef069966c45dfd4468631773c496ba216e2e/68747470733a2f2f6170692e636f646163792e636f6d2f70726f6a6563742f62616467652f47726164652f6330393831333665663831333435623738633438306565363935333134613231" data-canonical-src="https://api.codacy.com/project/badge/Grade/c098136ef81345b78c480ee695314a21" style="max-width:100%;"></a>
133        </div>
134        <div class="project-title-badgets">
135            <a href="https://badge.fury.io/js/typesetbot"><img src="https://badge.fury.io/js/typesetbot.svg" alt="npm version"></a>
136        </div>
137    </div>
138    <div class="project-header-action">
139        <a class="pure-button pure-button-primary" href="/typesetbot/examples">Get Started / Documentation</a>
140    </div>
141    <div class="project-header-logo">
142        <img class="" alt="Rax" src="https://raw.githubusercontent.com/CoffeeIO/TypesetBot/master/logo.png" width="300">
143    </div>
144</header>
145<hr>
146<div class="post-wide">
147    <h4>Make your web text look professional, without hiring a professional typesetter.</h4>
148</div>
149
150<div class="demo">
151    <button class="button-error pure-button demo-switch tsb-on">TypesetBot ON</button>
152    <div class="demo-width">
153        <span class="option1">Desktop</span>
154        <span class="option2">Tablet</span>
155        <span class="option3">Mobile</span>
156    </div>
157    <div class="demo-body">
158        <p>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.</p>
159    </div>
160</div>
161
162<hr>
163
164<h2 id="install">Install</h2>
165
166<h3 id="cdn">CDN</h3>
167<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;link</span> <span class="na">href=</span><span class="s">"https://unpkg.com/typesetbot/dist/typesetbot.min.css"</span> <span class="na">rel=</span><span class="s">"stylesheet"</span><span class="nt">&gt;</span>
168<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://unpkg.com/typesetbot/dist/typesetbot.min.js"</span> <span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">&gt;&lt;/script&gt;</span>
169
170<span class="c">&lt;!-- (optional) --&gt;</span>
171<span class="c">&lt;!-- hyphenation library --&gt;</span>
172<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://unpkg.com/@coffeeio/[email protected]/dist/hypher.js"</span> <span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">&gt;&lt;/script&gt;</span>
173<span class="c">&lt;!-- hyphenation pattern for US english --&gt;</span>
174<span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"https://unpkg.com/@fluid-project/[email protected]/dist/browser/en-us.js"</span> <span class="na">type=</span><span class="s">
174"text/javascript"</span><span class="nt">&gt;&lt;/script&gt;</span></code></pre></figure>
175
176<h3 id="npm">Download</h3>
177<ul>
178    <li><a href="https://unpkg.com/typesetbot/dist/typesetbot.css">typesetbot.css</a></li>
179    <li><a href="https://unpkg.com/typesetbot/dist/typesetbot.js">typesetbot.js</a></li>
180    <li><a href="https://unpkg.com/@coffeeio/[email protected]/dist/hypher.js">hypher.js</a></li>
181    <li>Hyphenation pattern example: <a href="https://unpkg.com/@fluid-project/[email protected]/dist/browser/en-us.js">en-us.js</a></li>
182</ul>
183<p>Minified:</p>
184<ul>
185    <li><a href="https://unpkg.com/typesetbot/dist/typesetbot.min.css">typesetbot.min.css</a></li>
186    <li><a href="https://unpkg.com/typesetbot/dist/typesetbot.min.js">typesetbot.min.js</a></li>
187</ul>
188
189<h2>License </h2>
190
191<h3>Commercial license</h3>
192<p>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.</p>
193<script src="https://gumroad.com/js/gumroad.js"></script>
193
194<div style="text-align: center;">
195    <a class="gumroad-button" href="https://gum.co/TypesetBot" target="_blank">Buy commercial license on Gumroad (Subscription)</a>
196</div>
197
198<p style="text-align: center; margin-top: 15px;"><i>or</i></p>
199
200<script src="https://gumroad.com/js/gumroad.js"></script>
200
201<div style="text-align: center;">
202    <a class="gumroad-button" href="https://gum.co/Exbfg" target="_blank">Buy commercial license on Gumroad (Lifetime)</a>
203</div>
204
205<h3>Open source license</h3>
206<p>If you are creating an open source application under a license compatible with the <a href="https://www.gnu.org/licenses/gpl-3.0.html">GNU GPL license v3</a>, you may use TypesetBot under the terms of the GPLv3.</p>
207
208<h2>Usage</h2>
209<p>This example shows the basic usage of TypesetBot. More examples can be found <a href="/typesetbot/examples">here</a>.</p>
210
211<figure class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;head&gt;</span>
212<span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"https://unpkg.com/typesetbot/dist/typesetbot.min.css"</span><span class="nt">&gt;</span>
213<span class="nt">&lt;script </span><span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"https://unpkg.com/typesetbot/dist/typesetbot.min.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
214
215<span class="c">&lt;!-- (optional) --&gt;</span>
216<span class="c">&lt;!-- hyphenation library --&gt;</span>
217<span class="nt">&lt;script </span><span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"https://unpkg.com/@coffeeio/[email protected]/dist/hypher.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
218<span class="c">&lt;!-- hyphenation pattern for US english --&gt;</span>
219<span class="nt">&lt;script </span><span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">src=</span><span class="s">"https://unpkg.com/@fluid-project/[email protected]/dist/browser/en-us.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
220
221<span class="c">&lt;!-- Initialize TypesetBot --&gt;</span>
222<span class="nt">&lt;script </span><span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">&gt;</span>
223    <span class="kd">let</span> <span class="nx">tsb</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">TypesetBot</span><span class="p">(</span>
224        <span class="dl">'</span><span class="s1">.container</span><span class="dl">'</span><span class="p">,</span> <span class="c1">// Query selector.</span>
225        <span class="p">{</span>
226            <span class="dl">'</span><span class="s1">hyphenLanguage</span><span class="dl">'</span><span class="p">:</span> <span class="dl">'</span><span class="s1">en-us</span><span class="dl">'</span><span class="p">,</span>
227            <span class="dl">'</span><span class="s1">alignment</span><span class="dl">'</span><span class="p">:</span> <span class="dl">'</span><span class="s1">justify</span><span class="dl">'</span>
228        <span class="p">}</span>
229    <span class="p">);</span>
230<span class="nt">&lt;/script&gt;</span>
231<span class="nt">&lt;/head&gt;</span>
232
233<span class="nt">&lt;body&gt;</span>
234    <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">&gt;</span>Lorem ipsum...<span class="nt">&lt;/p&gt;</span>
235    <span class="nt">&lt;p</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">&gt;</span>Lorem ipsum...<span class="nt">&lt;/p&gt;</span>
236<span class="nt">&lt;/body&gt;</span></code></pre></figure>
237
238<hr>
239<h2>Features</h2>
240
241<ul class="post-list">
242    <li class="post-list-item wide">
243        <div class="post-list-item-display">
244            <img src="/assets/project/typesetbot/pitch/device.png" >
245        </div>
246        <div class="post-list-item-desc">
247            <h3>Device support</h3>
248            <p>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.</p>
249        </div>
250    </li>
251    <li class="post-list-item wide">
252        <hr>
253        <div class="post-list-item-display">
254            <img src="/assets/project/typesetbot/pitch/hyphen.png" >
255        </div>
256        <div class="post-list-item-desc">
257            <h3>Hyphenation</h3>
258            <p>TypesetBot uses a hyphenation algorithm, so words are only hyphenated 
258if it improves the overall look of the text. Currently there is support for hyphenation in 39 different languages.</p>
259        </div>
260    </li>
261    <li class="post-list-item wide">
262        <hr>
263        <div class="post-list-item-display">
264            <img src="/assets/project/typesetbot/pitch/smart-lines.png" >
265        </div>
266        <div class="post-list-item-desc">
267            <h3>Smart line algorithm</h3>
268            <p>TypesetBot's algorithm figures out the best layout, so the text doesn't jump from short to long lines.</p>
269        </div>
270    </li>
271    <li class="post-list-item wide">
272        <hr>
273        <div class="post-list-item-display">
274            <img src="/assets/project/typesetbot/pitch/settings.png" >
275        </div>
276        <div class="post-list-item-desc">
277            <h3>Settings</h3>
278            <p>A wide range of settings are adjustable from a json object, to allow full customizability, so you get the result you want.</p>
279        </div>
280    </li>
281</ul>
282
283
284
285
286<script>
287var settings = {
288    hyphenLanguage: 'en-us',
289    alignment: 'justify',
290    debug: true,
291};
292var demoSelector = '.demo .demo-body p';
293// var tsb = new TypesetBot(demoSelector, settings);
294let tsb = null;
295var desktopWidth = '100%';
296var tabletWidth = '540px';
297var mobileWidth = '280px';
298
299document.querySelector(".demo .demo-switch").addEventListener("click", function(e) {
300    var target = e.target;
301    if (target.classList.contains('tsb-on')) {
302        target.classList.remove('tsb-on', 'button-error');
303        target.innerHTML = 'TypesetBot OFF';
304        tsb.terminate();
305    } else {
306        target.classList.add('tsb-on', 'button-error');
307        target.innerHTML = 'TypesetBot ON';
308        tsb = new TypesetBot(demoSelector, settings);
309    }
310});
311
312document.querySelector(".demo .option1").addEventListener("click", function(e) {
313    updateSelected(e.target);
314    setDemoWidth(desktopWidth);
315});
316document.querySelector(".demo .option2").addEventListener("click", function(e) {
317    updateSelected(e.target);
318    setDemoWidth(tabletWidth);
319
320});
321document.querySelector(".demo .option3").addEventListener("click", function(e) {
322    updateSelected(e.target);
323    setDemoWidth(mobileWidth);
324});
325
326function setDemoWidth(width) {
327    document.querySelector(".demo .demo-body").style.maxWidth = width;
328    // tsb.rerun();
329}
330
331function updateSelected(target) {
332    [].slice
333      .call(document.querySelectorAll(".demo .demo-width span"))
334      .forEach(item => {
335        item.classList.remove("selected");
336      });
337    target.classList.add('selected');
338}
339
340// Init
341updateSelected(document.querySelector(".demo .option3"));
342setDemoWidth(mobileWidth);
343
344
345// var tsbPosts = new TypesetBot('.post-list-item-desc p', settings);
346
347</script>
347
348      </div>
349    </main>
350    <footer class="site-footer">
351  <div class="wrapper">
352    <h2 class="footer-heading">
353        <a href="/">
354            <img src="/assets/logo/coffeeio32x32.png" alt="logo" class="footer-heading-logo">CoffeeIO
355        </a>
356    </h2>
357    <div class="footer-social">
358        <a href="https://github.com/CoffeeIO" target="_blank" class="footer-social-icon">
359            <img src="/assets/icon/github-32x32.png" alt="GitHub">
360        </a>
361        <a href="https://www.linkedin.com/in/mathias-grundtvig-andreasen-2682b8a2/" target="_blank" class="footer-social-icon">
362            <img src="/assets/icon/linkedin-64x64.png" alt="LinkedIn">
363        </a>
364    </div>
365    <small class="site-version">v1.1.3</small>
366  </div>
367</footer>
368
369    
369<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
369
370    
370<script type="text/javascript">
371        window.sr = ScrollReveal();
372        sr.reveal('.post-list.reveal .post-list-item, .scrollreveal', {
373            delay: 100,
374            viewFactor: 0.8,
375            scale: 1,
376        });
377    </script>
377
378  </body>
379
380</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.