<commit_before><!DOCTYPE html>
<html>
<head>
    <title>opentype.js – JavaScript parser for OpenType and TrueType fonts.</title>
    <meta description="A JavaScript library to manipulate the letterforms of text from the browser or node.js.">
    <meta charset="utf-8">
    <script type="text/javascript" src="opentype.js"></script>
    <style type="text/css">
        body {
            font: 13px Helvetica, arial, freesans, sans--serif;
            line-height: 1.4;
            min-width: 1020px;
            color: #333;
            background-color: #fff;
            margin: 0 0 50px 0;
            padding: 0;
        }

        .header {
            background: #eee;
            color: #555;
            border-bottom: 1px solid #ddd;
            height: 40px;
            margin-bottom: 20px;
        }

        .header h1 {
            margin: 0;
            padding: 9px 0 0 0;
            font-size: 18px;
        }

        .container {
            width: 940px;
            margin-left: auto;
            margin-right: auto;
        }

        .explain {
            color: #222;
            font-size: 16px;
            margin-bottom: 20px;
        }

        .text-input {
            font-size: 24px;
            padding: 5px;
            width: 930px;
            display: block;
        }

        canvas.text {
            border: 1px solid #ddd;
            box-shadow: 1px 0 5px rgba(0, 0, 0, 0.2);
            margin-bottom: 5px;
        }

        .wrapper {
            border: 1px solid #ddd;
            margin: 0 5px 10px 0;
            float: left;
        }

        .wrapper canvas {
            display: inline-block;
        }

        .wrapper span {
            text-align: center;
            background: #ddd;
            display: block;
        }

        #message {
            font-weight: bold;
        }

        .message {
            clear: both;
            font-style: oblique;
        }

        #glyphs {
            width: 950px;
        }

        .info {
            float: right;
            font-size: 11px;
            color: #999;
        }

        hr {
            border: none;
            border-bottom: 1px solid #ccc;
            margin: 20px 0 20px 0;
            padding: 0;
        }

        label {
            font-weight: bold;
            font-size: 12px;
            display: inline-block;
            margin-right: 10px;
        }

        label input[type="range"] {
            vertical-align: middle;
        }

        a.github {
            float: right;
            position: relative;
            top: -22px;
            text-decoration: none;
            color: #44d;
        }

        a {
            text-decoration: none;
            color: #44d;
        }
    </style>


</head>
<body>
<div class="header">
    <div class="container">
        <h1>opentype.js</h1>
        <a class="github" href="https://github.com/nodebox/opentype.js">Fork me on GitHub</a>
    </div>
</div>

<div class="container">

    <div class="explain">
        opentype.js is an OpenType and TrueType font parser.
        It allows you to access the <strong>letterforms</strong> of text from the browser or node.js.
    </div>

    <span class="info">Roboto-Black</span>
    <canvas id="preview" width="940" height="300" class="text"></canvas>
    <span id="message"></span>
    <input type="text" class="text-input" onkeyup="renderText()" value="Hello, World!"
           autofocus id="textField">
    <label>Font Size<input type="range" min="6" max="500" value="150" onchange="fontSizeChanged(this)"/><span id="fontSize">150</span></label>
    <label><input type="checkbox" onchange="drawPointsChanged(this)" checked="checked"/>Draw Points</label>
    <label><input type="checkbox" onchange="kerningChanged(this)" checked="checked"/>Kerning</label>

    <hr>

    <div class="explain">
        Once you have the shapes, you can modify them, for example by <strong>snapping</strong> them to a virtual grid:
    </div>

    <canvas id="snap" width="940" height="300" class="text"></canvas>
    <label>Strength <input type="range" min="0" max="100" value="80" onchange="snapStrengthChanged(this)"/><span id="snapStrength">80</span></label>
    <label>Distance<input type="range" min="1" max="100" value="53" onchange="snapDistanceChanged(this)"/><span id="snapDistance">53</span></label>
    <label>X<input type="range" min="-100" max="100" value="0" onchange="snapXChanged(this)"/><span id="snapX">0</span></label>
    <label>Y<input type="range" min="-100" max="100" value="0" onchange="snapYChanged(this)"/><span id="snapY">0</span></label>

    <hr>

    <div class="explain">
        <h1>Glyphs</h1>
        opentype.js provides you with <strong>raw access</strong> to the glyphs so you can modify them as you please.
    </div>

    <div id="glyphs">
    </div>
    <div class="message">Only the first 100 glyphs are shown.</div>

    <hr>

    <div class="explain">
        <h1>Free Software</h1>
        <p>opentype.js is available on <a href="https://github.com/nodebox/opentype.js">GitHub</a> under the <a href="https://raw.github.com/nodebox/opentype.js/master/LICENSE">MIT License</a>.</p>
        <p>Copyright &copy; 2013 <NAME>.</p>
    </div>

    <hr>


    <script type="text/javascript">
        var fontReady = false;
        var fontSize = 150;
        var textToRender = "Hello, World!";
        var drawPoints = true;
        var kerning = true;
        var previewPath = null;
        var snapPath = null;<commit_msg>Fix live sliders in Firefox.<commit_after><!DOCTYPE html>
<html>
<head>
    <title>opentype.js – JavaScript parser for OpenType and TrueType fonts.</title>
    <meta description="A JavaScript library to manipulate the letterforms of text from the browser or node.js.">
    <meta charset="utf-8">
    <script type="text/javascript" src="opentype.js"></script>
    <style type="text/css">
        body {
            font: 13px Helvetica, arial, freesans, sans--serif;
            line-height: 1.4;
            min-width: 1020px;
            color: #333;
            background-color: #fff;
            margin: 0 0 50px 0;
            padding: 0;
        }

        .header {
            background: #eee;
            color: #555;
            border-bottom: 1px solid #ddd;
            height: 40px;
            margin-bottom: 20px;
        }

        .header h1 {
            margin: 0;
            padding: 9px 0 0 0;
            font-size: 18px;
        }

        .container {
            width: 940px;
            margin-left: auto;
            margin-right: auto;
        }

        .explain {
            color: #222;
            font-size: 16px;
            margin-bottom: 20px;
        }

        .text-input {
            font-size: 24px;
            padding: 5px;
            width: 930px;
            display: block;
        }

        canvas.text {
            border: 1px solid #ddd;
            box-shadow: 1px 0 5px rgba(0, 0, 0, 0.2);
            margin-bottom: 5px;
        }

        .wrapper {
            border: 1px solid #ddd;
            margin: 0 5px 10px 0;
            float: left;
        }

        .wrapper canvas {
            display: inline-block;
        }

        .wrapper span {
            text-align: center;
            background: #ddd;
            display: block;
        }

        #message {
            font-weight: bold;
        }

        .message {
            clear: both;
            font-style: oblique;
        }

        #glyphs {
            width: 950px;
        }

        .info {
            float: right;
            font-size: 11px;
            color: #999;
        }

        hr {
            border: none;
            border-bottom: 1px solid #ccc;
            margin: 20px 0 20px 0;
            padding: 0;
        }

        label {
            font-weight: bold;
            font-size: 12px;
            display: inline-block;
            margin-right: 10px;
        }

        label input[type="range"] {
            vertical-align: middle;
        }

        a.github {
            float: right;
            position: relative;
            top: -22px;
            text-decoration: none;
            color: #44d;
        }

        a {
            text-decoration: none;
            color: #44d;
        }
    </style>


</head>
<body>
<div class="header">
    <div class="container">
        <h1>opentype.js</h1>
        <a class="github" href="https://github.com/nodebox/opentype.js">Fork me on GitHub</a>
    </div>
</div>

<div class="container">

    <div class="explain">
        opentype.js is an OpenType and TrueType font parser.
        It allows you to access the <strong>letterforms</strong> of text from the browser or node.js.
    </div>

    <span class="info">Roboto-Black</span>
    <canvas id="preview" width="940" height="300" class="text"></canvas>
    <span id="message"></span>
    <input type="text" class="text-input" onkeyup="renderText()" value="Hello, World!"
           autofocus id="textField">
    <label>Font Size<input type="range" min="6" max="500" value="150" oninput="fontSizeChanged(this)"/><span id="fontSize">150</span></label>
    <label><input type="checkbox" onchange="drawPointsChanged(this)" checked="checked"/>Draw Points</label>
    <label><input type="checkbox" onchange="kerningChanged(this)" checked="checked"/>Kerning</label>

    <hr>

    <div class="explain">
        Once you have the shapes, you can modify them, for example by <strong>snapping</strong> them to a virtual grid:
    </div>

    <canvas id="snap" width="940" height="300" class="text"></canvas>
    <label>Strength <input type="range" min="0" max="100" value="80" oninput="snapStrengthChanged(this)"/><span id="snapStrength">80</span></label>
    <label>Distance<input type="range" min="1" max="100" value="53" oninput="snapDistanceChanged(this)"/><span id="snapDistance">53</span></label>
    <label>X<input type="range" min="-100" max="100" value="0" oninput="snapXChanged(this)"/><span id="snapX">0</span></label>
    <label>Y<input type="range" min="-100" max="100" value="0" oninput="snapYChanged(this)"/><span id="snapY">0</span></label>

    <hr>

    <div class="explain">
        <h1>Glyphs</h1>
        opentype.js provides you with <strong>raw access</strong> to the glyphs so you can modify them as you please.
    </div>

    <div id="glyphs">
    </div>
    <div class="message">Only the first 100 glyphs are shown.</div>

    <hr>

    <div class="explain">
        <h1>Free Software</h1>
        <p>opentype.js is available on <a href="https://github.com/nodebox/opentype.js">GitHub</a> under the <a href="https://raw.github.com/nodebox/opentype.js/master/LICENSE">MIT License</a>.</p>
        <p>Copyright &copy; 2013 <NAME>.</p>
    </div>

    <hr>


    <script type="text/javascript">
        var fontReady = false;
        var fontSize = 150;
        var textToRender = "Hello, World!";
        var drawPoints = true;
        var kerning = true;
        var previewPath = null;
        var snapPath = null;
{'fraction_non_alphanumeric': 0.14035247093023256, 'fraction_numerical': 0.02943313953488372, 'mean_word_length': 1.8624544981799271, 'pattern_counts': {'":': 0, '<': 199, '<?xml version=': 0, '>': 199, 'https://': 6, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5160186', 'n_tokens_mistral': 3681, 'n_tokens_neox': 3334, 'n_words': 835}