index.html

---
layout: empty
title: Home
---
<script src="/assets/base32h/base32h.js"></script>
<script>
    // @license magnet:?xt=urn:btih:b8999bbaf509c08d127678643c515b9ab0836bae&dn=ISC.txt ISC
    console.log(base32h.encodeBin(base32h.decodeBin('hello world')));
    var decBase = 10;
    var decBin = false;

    function switchDecBase() {
        console.log("Switching...");
        var baseField = document.getElementById("demo-base");
        var decField = document.getElementById("demo-decoded");
        decBase = baseField.options[baseField.selectedIndex].value;

        switch (decBase) {
        case "binstr":
            decField.setAttribute("placeholder",
                                  "Decoded (What in tarnation???)");
            decField.setAttribute("type", "text");
            decBin = true;
            break;
        case "bin64":
            decField.setAttribute("placeholder",
                                  "Decoded (V2hhdCBpbiB0YXJuYXRpb24/Pz8=)");
            decField.setAttribute("type", "text");
            decBin = true;
            break;
        case "bin16":
            decField.setAttribute("placeholder",
                                  "Decoded ()");
            decField.setAttribute("type", "text");
            decBin = true;
            break;
        case "16":
            decField.setAttribute("placeholder", "Decoded (1234CAFE)");
            decField.setAttribute("type", "text");
            decBin = false;
            break;
        default:
            decField.setAttribute("placeholder", "Decoded (1234567890)");
            decField.setAttribute("type", "number");
            decBin = false;
        }
    }

    function encode() {
        if (decBin) {
            encodeBin();
        } else {
            encodeNum();
        }
    }

    function encodeBin() {
        console.log("Encoding binary...");
        clearErrors();
        var encField = document.getElementById("demo-encoded");
        var decField = document.getElementById("demo-decoded");

        var decoded = decField.value;
        
        if (decBase == "bin64") {
            decoded = atob(decoded);
        }

        if (decBase == "bin16") {
            decoded = hex2bin(decoded);
        }

        if (decoded.length % 5 > 0) {
            decField.classList.add("is-warning");
            var msg = document.createElement("p");
            msg.id = "demo-decoded-message";
            msg.classList.add("help");
            msg.classList.add("is-warning");
            decField.parentElement.parentElement.appendChild(msg);
            msg.textContent = "The number of bytes in the data you're \
decoding ain't cleanly divisible by 5, so the encoded value includes \
nulls for padding, which will show up if you decode the below encoded \
data.";
        }
        
        encField.value = base32h.encodeBin(decoded);
    }

    function encodeNum() {
        console.log("Encoding number...");
        clearErrors();
        var encField = document.getElementById("demo-encoded");
        var decField = document.getElementById("demo-decoded");

        var decoded = parseInt(decField.value, parseInt(decBase));
        if (isNaN(decoded)) {
            decField.classList.add("is-danger");
            var msg = document.createElement("p");
            msg.id = "demo-decoded-message";
            msg.classList.add("help");
            msg.classList.add("is-danger");
            decField.parentElement.parentElement.appendChild(msg);
            msg.textContent = "Not a valid integer.";
            return;
        }

        if (decoded > Number.MAX_SAFE_INTEGER) {
            decField.classList.add("is-warning");
            var msg = document.createElement("p");
            msg.id = "demo-decoded-message";
            msg.classList.add("help");
            msg.classList.add("is-warning");
            decField.parentElement.parentElement.appendChild(msg);
            msg.textContent = "The number you're encoding is bigger than \
what Javascript can accurately represent, so the below value is probably \
incorrect.";
        }

        encField.value = base32h.encode(decoded);
    }

    function decode() {
        if (decBin) {
            decodeBin();
        } else {
            decodeNum();
        }
    }

    function decodeBin() {
        console.log("Decoding binary...");
        clearErrors();
        var encField = document.getElementById("demo-encoded");
        var decField = document.getElementById("demo-decoded");

        var decoded = base32h.decodeBin(encField.value);
        var encoded = ""
        for (var i = 0; i < decoded.length; i++) {
            encoded += String.fromCharCode(decoded[i]);
        }

        if (decBase == "bin64") {
            encoded = btoa(encoded);
        }

        if (decBase == "bin16") {
            encoded = bin2hex(encoded);
        }

        decField.value = encoded;
    }

    function decodeNum() {
        console.log("Decoding number...");
        clearErrors();
        var encField = document.getElementById("demo-encoded");
        var decField = document.getElementById("demo-decoded");

        var decoded = base32h.decode(encField.value);

        if (decoded > Number.MAX_SAFE_INTEGER) {
            encField.classList.add("is-warning");
            var msg = document.createElement("p");
            msg.id = "demo-encoded-message";
            msg.classList.add("help");
            msg.classList.add("is-warning");
            encField.parentElement.parentElement.appendChild(msg);
            msg.textContent = "The number you're decoding is bigger than \
what Javascript can accurately represent, so the above value is probably \
incorrect.";
        }

        decField.value = decoded.toString(parseInt(decBase));
    }

    function nuke() {
        console.log("Clearing...");
        clearErrors();
        var encField = document.getElementById("demo-encoded");
        var decField = document.getElementById("demo-decoded");

        encField.value = "";
        decField.value = "";
    }

    function clearErrors() {
        var encField = document.getElementById("demo-encoded");
        var decField = document.getElementById("demo-decoded");
        var encWrap = encField.parentElement.parentElement;
        var decWrap = decField.parentElement.parentElement;
        var encMsg = document.getElementById("demo-encoded-message");
        var decMsg = document.getElementById("demo-decoded-message");

        encField.classList.remove("is-danger");
        decField.classList.remove("is-danger");

        encField.classList.remove("is-warning");
        decField.classList.remove("is-warning");

        if (encMsg) {encWrap.removeChild(encMsg);}
        if (decMsg) {decWrap.removeChild(decMsg);}
    }

    function bin2hex(bin) {
        var hex = "";
        for (var i = 0; i < bin.length; i++) {
            var byte = bin.charCodeAt(i).toString(16);
            if (byte.length == 1) {
                byte = "0" + byte;
            }
            hex += byte;
        }
        return hex.toUpperCase();
    }

    function hex2bin(hex) {
        var hexDigits = [
            '0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'
        ]
        hex = hex.toUpperCase();
        hex = hex.split('').filter(h => hexDigits.includes(h)).join('');
        if (hex.length % 2 > 0) {
            hex = "0" + hex;
        }
        var bin = "";
        for (var i = 0; i < hex.length; i += 2) {
            bin += String.fromCharCode(parseInt(hex.substr(i,2), 16));
        }
        return bin;
    }
    // @license-end
</script>

<header>
    <h1>Base32H</h1>
    <p><em>n.</em> a human-friendly duotrigesimal number system</p>
</header>

<main class="tile is-ancestor">
    <div class="tile is-vertical is-parent is-main">
        <section class="tile is-child box">
            <h2 class="title">Try it out!</h2>
            <div class="field has-addons">
                <div class="control is-expanded">
                    <input id="demo-decoded"
                           class="input"
                           type="number"
                           onkeydown="if (event.key == 'Enter') {encode()}"
                           placeholder="Decoded (1234567890)"/>
                </div>
                <div class="control">
                    <div class="select">
                        <select id="demo-base" onchange="switchDecBase()">
                            <option value="10">Decimal</option>
                            <option value="16">Hexadecimal</option>
                            <option value="bin16">Binary (base16)</option>
                            <option value="bin64">Binary (base64)</option>
                            <option value="binstr">Binary (string)</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="field is-grouped is-grouped-centered">
                <div class="control">
                    <a class="button is-primary"
                       onclick="encode()"
                       onkeydown="encode()">
                        {% include feather.html icon="arrow-down" %}
                        Encode
                    </a>
                </div>
                <div class="control">
                    <a class="button is-danger"
                       onclick="nuke()"
                       onkeydown="nuke()">
                        {% include feather.html icon="refresh-cw" %}
                        Clear
                    </a>
                </div>
                <div class="control">
                    <a class="button is-primary"
                       onclick="decode()"
                       onkeydown="decode()">
                        {% include feather.html icon="arrow-up" %}
                        Decode
                    </a>
                </div>
            </div>
            <div class="field">
                <div class="control is-expanded">
                    <input id="demo-encoded"
                           class="input"
                           type="text"
                           onkeydown="if (event.key == 'Enter') {decode()}"
                           placeholder="Encoded (HELL0W0RLD)"/>
                </div>
            </div>
        </section>
        <section class="tile is-child box content">
            <h2 class="title">Human-friendly?  Duotrigesi-what?</h2>
            <p>
                32 digits, picked for the right balance of legibility,
                audibility, and information density.  0 or O?  1 or I?
                5 or S?  Doesn't matter; they're equivalent in
                Base32H.  All the digits can be found on your typical
                keyboard, and are totally safe for URLs, filenames,
                and anything else that might not like special
                characters.
            </p>
        </section>
        <section class="tile is-child box content">
            <h2 class="title">Rationale</h2>
            <p>
                Base32H is handy for <a href="/usecases">all sorts of use
                cases</a>, and <a href="/comparisons">stacks up pretty
                strong</a> against other number systems:
            </p>
            <ul>
                <li>
                    More compact than hexadecimal (a 40-bit number
                    needs only 8 Base32H digits v. 10 hexadecimal
                    digits)
                </li>
                <li>
                    No case-sensitive letters or punctuation like in
                    Base64 (you can use Base32H in filenames without
                    worry)
                </li>
                <li>
                    No un-decodable letters like in other base-32
                    systems (any letter or numeral on a US keyboard
                    will decode to a Base32H digit)
                </li>
                <li>
                    Easier to encode byte-aligned data than with
                    non-power-of-two-radix number systems (no wasted bits)
                </li>
            </ul>
            <p>
                These traits make it an excellent choice for any
                situation where people need to reliably read numeric
                identifiers -- asset tags, product keys, public key
                fingerprints, user IDs, etc. -- and especially if that
                situation entails reading an identifier aloud to
                someone else.
            </p>
        </section>
        <section class="tile is-child box content">
            <h2 class="title">Implementations</h2>
            <p>
                <a href="/implementations">Three official / reference
                implementations</a> and counting (all free software
                under the <a href="/COPYING.txt">ISC License</a>),
                plus multiple community-contributed implementations.
            </p>
        </section>
    </div>
    <div class="tile is-parent">
        <section class="tile is-child box">
            <h2 class="title">Digits</h2>
            {% assign canonical = "0|1|2|3|4|5|6|7|8|9|A|B|C|D|E|F|G|H|J|K|L|M|N|P|Q|R|T|V|W|X|Y|Z" | split: "|" %}
            {% assign aliases = "O o|I i||||S s|||||a|b|c|d|e|f|g|h|j|k|l|m|n|p|q|r|t|v U u|w|x|y|z" | split: "|" %}
            <table class="table">
                <tr>
                    <th>Value</th>
                    <th>Canonical</th>
                    <th>Aliases</th>
                </tr>
                {% for i in (0..31) %}
                <tr>
                    <td>{{i}}</td>
                    <td>{{canonical[i]}}</td>
                    <td>{{aliases[i]}}</td>
                </tr>
                {% endfor %}
            </table>
        </section>
    </div>
</main>