SVG Font Viewer

Show all defined glyph in font, its name and unicode

by fxi

HTML

Drop all font files here to view all its characters

CSS

body {
  background-color: #5588FF;
  color: rgba(255, 255, 255, .8);
}

a {
  color: inherit;
}

dl,
dt,
dd {
  margin: 0;
}

dl {
  float: left;
  outline: rgba(255, 255, 255, .8) dotted 1px;
  width: 6em;
  height: 5em;
  margin-top: .5em;
  margin-right: .5em;
  padding: .5em;
}

dd {
  overflow: hidden;
  max-height: 100%;
  max-width: 100%;
}

.char {
  display: block;
  margin: 0 auto;
  width: 2em;
  height: 2em;
  padding: .5em;
}

.char svg {
  height: 2em;
}

.char-code {
  display: none;
}

.show-code .char-code {
  display: block;
}

.char-name {
  display: block;
}

.show-code .char-name {
  display: none;
}

.char:link {
  text-decoration: none;
}

JavaScript

var doc = document.documentElement;
var toload = 0;
var loaded = 0;
var target = document.body;

var createSVG = function (charsvg, ex, em) {
    var svgEl = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    var pathEl = document.createElementNS("http://www.w3.org/2000/svg", "path");

    pathEl.setAttribute('d', charsvg);
    pathEl.setAttribute('transform', 'translate(0,' + em + ') scale(1, -1)')
    pathEl.style.fill = 'currentColor';

    svgEl.setAttribute('viewBox', '0 0 ' + (ex*1+256) + ' ' + (em*1+256)); //FIXME
    svgEl.appendChild(pathEl);

    return svgEl;
}

doc.ondragover = function () {
    //this.className = 'hover';
    return false;
};
doc.ondragend = function () {
    //this.className = '';
    return false;
};
doc.ondrop = function (event) {
    event.preventDefault && event.preventDefault();
    this.className = '';

    // now do something with:
    var files = event.dataTransfer.files;

    toload = files.length;
    loaded = 0;
    target.innerHTML = '';

    p = document.createElement('p');

    a = document.createElement('a');
    a.href = "javascript:document.body.setAttribute('class',document.body.getAttribute('class')==='show-code'?'':'show-code');";
    a.innerText = "[code]";
    p.appendChild(a);

    target.appendChild(p);


    for (var x = 0; x < files.length; x++) {
        var file = files[x];
        console.log('Font loading:', file.size, file.name, file.type);
        /*
	If the file is a font and the web browser supports FileReader,
	append css @font-face rule to the page; Change page`s font
*/


        if (typeof FileReader !== "undefined" && (/svg/i).test(file.type)) {
            reader = new FileReader();
            reader.type = file.type;
            reader.onload = (function () {
                return function (evt) {
                    var txt = evt.target.result;
                    if (window.DOMParser) {
                        parser = new DOMParser();
                        xmlDoc =...