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"><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">></span> 168<span class="nt"><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">></script></span> 169 170<span class="c"><!-- (optional) --></span> 171<span class="c"><!-- hyphenation library --></span> 172<span class="nt"><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">></script></span> 173<span class="c"><!-- hyphenation pattern for US english --></span> 174<span class="nt"><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">></script></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"><head></span> 212<span class="nt"><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">></span> 213<span class="nt"><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">></script></span> 214 215<span class="c"><!-- (optional) --></span> 216<span class="c"><!-- hyphenation library --></span> 217<span class="nt"><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">></script></span> 218<span class="c"><!-- hyphenation pattern for US english --></span> 219<span class="nt"><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">></script></span> 220 221<span class="c"><!-- Initialize TypesetBot --></span> 222<span class="nt"><script </span><span class="na">type=</span><span class="s">"text/javascript"</span><span class="nt">></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"></script></span> 231<span class="nt"></head></span> 232 233<span class="nt"><body></span> 234 <span class="nt"><p</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>Lorem ipsum...<span class="nt"></p></span> 235 <span class="nt"><p</span> <span class="na">class=</span><span class="s">"container"</span><span class="nt">></span>Lorem ipsum...<span class="nt"></p></span> 236<span class="nt"></body></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.