JSFiddle - React, Tailwind, and code Playground

by Jon-Carlos Rivera

HTML

<script id="font">
STARTFONT 2.1
COMMENT "$ucs-fonts: 5x7.bdf,v 1.37 2002-11-10 19:12:30+00 mgk25 Rel $"
COMMENT "Send bug reports to Markus Kuhn http://www.cl.cam.ac.uk/~mgk25/"
FONT -Misc-Fixed-Medium-R-Normal--7-70-75-75-C-50-ISO10646-1
SIZE 7 75 75
FONTBOUNDINGBOX 5 7 0 -1
STARTPROPERTIES 23
FONTNAME_REGISTRY ""
FOUNDRY "Misc"
FAMILY_NAME "Fixed"
WEIGHT_NAME "Medium"
SLANT "R"
SETWIDTH_NAME "Normal"
ADD_STYLE_NAME ""
PIXEL_SIZE 7
POINT_SIZE 70
RESOLUTION_X 75
RESOLUTION_Y 75
SPACING "C"
AVERAGE_WIDTH 50
CHARSET_REGISTRY "ISO10646"
CHARSET_ENCODING "1"
FONT_ASCENT 6
FONT_DESCENT 1
DESTINATION 1
DEFAULT_CHAR 0
COPYRIGHT "Public domain font.  Share and enjoy."
_XMBDFED_INFO "Edited with xmbdfed 4.5."
CAP_HEIGHT 6
X_HEIGHT 4
ENDPROPERTIES
CHARS 1848
STARTCHAR char0
ENCODING 0
SWIDTH 685 0
DWIDTH 5 0
BBX 5 7 0 -1
BITMAP
00
A8
00
88
00
A8
00
ENDCHAR
STARTCHAR space
ENCODING 32
SWIDTH 685 0
DWIDTH 5 0
BBX 5 7 0 -1
BITMAP
00
00
00
00
00
00
00
ENDCHAR
STARTCHAR exclam
ENCODING 33
SWIDTH 685 0
DWIDTH 5 0
BBX 5 7 0 -1
BITMAP
20
20
20
20
00
20
00
ENDCHAR
STARTCHAR quotedbl
ENCODING 34
SWIDTH 685 0
DWIDTH 5 0
BBX 5 7 0 -1
BITMAP
50
50
50
00
00
00
00
ENDCHAR
STARTCHAR numbersign
ENCODING 35
SWIDTH 685 0
DWIDTH 5 0
BBX 5 7 0 -1
BITMAP
00
50
F8
50
F8
50
00
ENDCHAR
STARTCHAR dollar
ENCODING 36
SWIDTH 685 0
DWIDTH 5 0
BBX 5 7 0 -1
BITMAP
00
70
A0
70
28
70
00
ENDCHAR
STARTCHAR percent
ENCODING 37
SWIDTH 685 0
DWIDTH 5 0
BBX 5 7 0 -1
BITMAP
80
90
20
40
90
10
00
ENDCHAR
STARTCHAR ampersand
ENCODING 38
SWIDTH 685 0
DWIDTH 5 0
BBX 5 7 0 -1
BITMAP
00
40
A0
40
A0
50
00
ENDCHAR
STARTCHAR quotesingle
ENCODING 39
SWIDTH 685 0
DWIDTH 5 0
BBX 5 7 0 -1
BITMAP
20
20
20
00
00
00
00
ENDCHAR
STARTCHAR parenleft
ENCODING 40
SWIDTH 685 0
DWIDTH 5 0
BBX 5 7 0 -1
BITMAP
20
40
40
40
40
20
00
ENDCHAR
STARTCHAR parenright
ENCODING 41
SWIDTH 685 0
DWIDTH 5 0
BBX 5 7 0 -1
BITMAP
40
20
20
20
20
40
00
ENDCHAR
STARTCHAR asterisk
ENCODING 42
SWIDTH 685 0
DWIDTH 5 0
BBX 5 7 0...

JavaScript

function Character (lines) {
    this.meta = {};
    this.bits = [];
    this._parseChar(lines);
}

Character.prototype._parseChar = function (lines) {
    var bitmap = false;

    while (lines.length) {
        var line = lines.shift();

        if (!bitmap) {
            if (/^BITMAP/.test(line)) {
                bitmap = true;
            } else {
                var parts = line.split(' ');
                this.meta[parts.shift()] = parts;
            }
            continue;
        } else {
            if (/^ENDCHAR/.test(line)) {
                return;
            }
        }
        
        var padding = Math.ceil(this.meta.DWIDTH[0] / 8) * 8 - this.meta.DWIDTH[0];
        var len = 0;
        var numBytes = line.length / 2;
        var a = [];

        while (numBytes--) {
            var byte = line.slice(0, 2);
            line = line.slice(2);

            var binary = parseInt(byte, 16);
    
            if (numBytes === 0) {
                for (var i = 8; i > padding; i--) {
                    a[i] = (binary & (1 << i)) >> i;
                }
            } else {
                for (var i = 8; i > 0; i--) {
                    a[i] = (binary & (1 << i)) >> i;
                }
           }
        }
        
        if(this.meta.STARTCHAR[0] === "exclam") {
            console.log(line, binary, a, padding);
            this.bits.push(a);
        }
    }    
}

function Font (txt) {
    this.chars = [];
    this._parseFontFile(txt);
}

Font.prototype._parseFontFile = function (txt) {
    var lines = txt.split(/\n+/);

    while (lines.length) {
        var line = lines.shift();

        if (/^STARTCHAR/.test(line)) {
            var charLines = [line];

            while (!/^ENDCHAR/.test(line)) {
                line = lines.shift();
                charLines.push(line);
            }

            this.chars.push(new Character(charLines));
        }
    }
}

var font = document.getElementById("font").innerHTML;

console.log(new Font(font));