Jitai (字体): The font randomizer that fits

WaniKani API And Third-Party Apps
338

To see what font is being used for the current review (before you answer), you can open the console and type:
$('#character span').css('font-family')

If you want to see what the nagayama_kai font looks like during reviews (to double check that you haven’t seen it), you can do:
$('#character span').css('font-family', 'nagayama_kai')

Seeing all your fonts that Jitai thinks exists is a little tougher but shouldn’t be too hard. If you open the Jitai script in your script manager, you should copy the lines from var fonts = [ also the way to the closing } for the method function fontExists(fontName) {. Paste that in the console and press enter. And then type existingFonts and press enter again. This will then show the list of fonts you can supposedly render, and you can check if nagayama_kai is included in the list.

For example, for my version of the code (my selected fonts) I’d copy:

Sample Code To Copy 
var fonts = [
    // Default Windows fonts
    "Meiryo, メイリオ",
    "MS PGothic, ＭＳ Ｐゴシック, MS Gothic, ＭＳ ゴック",
    "MS PMincho, ＭＳ Ｐ明朝, MS Mincho, ＭＳ 明朝",
    "Yu Gothic, YuGothic",
    "Yu Mincho, YuMincho",

    // Other fonts
    "EPSON 行書体Ｍ",
    "EPSON 正楷書体Ｍ",
    "EPSON 教科書体Ｍ",
    //"EPSON 太明朝体Ｂ",
    //"EPSON 太行書体Ｂ",
    //"EPSON 丸ゴシック体Ｍ",
    "nagayama_kai"
];

var existingFonts = [];
for (var i = 0; i < fonts.length; i++) {
    var fontName = fonts[i];
    if (fontExists(fontName)) {
        existingFonts.push(fontName);
    }
}

function fontExists(fontName) {
    // Approach from kirupa.com/html5/detect_whether_font_is_installed.htm - thanks!
    // Will return false for the browser's default monospace font, sadly.
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    var text = "wim-—l~ツ亻".repeat(100); // Characters with widths that often vary between fonts.

    context.font = "72px monospace";
    var defaultWidth = context.measureText(text).width;

    // Microsoft Edge raises an error when a context's font is set to a string
    // containing certain special characters... so that needs to be handled.
    try {
        context.font = "72px " + fontName + ", monospace";
    } catch (e) {
        return false;
    }
    var testWidth = context.measureText(text).width;

    return testWidth != defaultWidth;
}

Now that doesn’t guarantee that Jitai can render the script because there’s a secondary check later on, but that should give you a good place to look.

5 Likes