Jitai (字体): The font randomizer that fits

I think this would be cool if it only used alternative fonts for items of Guru level and higher. The thing is with freshly new items, especially radicals and kanji, I prefer to familiarize myself with the vanilla font to get a better idea on how the item is typically made up / constructed. Only when I become used to that then I can explore how different fonts alternate its style.

4 Likes

At least you can hover over the item to show the original font as a workaround.

2 Likes

Thank you, this script is fantastic!

Ever since I discovered the whole API thing a few days ago it feels like I’m using up more of my time downloading cool stuff than actually studying Japanese :joy:

5 Likes

Is there a way to quickly/easily display which font you’re looking at during reviews?

I installed this script ages ago, but noticed a wallpaper using the nagayama_kai font. It doesn’t look familiar, despite being included in my Jitai load list (and it displays just fine in MS Word), and after some few hundred reviews I don’t believe it’s ever popped up even once. Any ideas why I’m not seeing it?

1 Like

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 Pゴシック, MS Gothic, MS ゴック",
    "MS PMincho, MS P明朝, MS Mincho, MS 明朝",
    "Yu Gothic, YuGothic",
    "Yu Mincho, YuMincho",

    // Other fonts
    "EPSON 行書体M",
    "EPSON 正楷書体M",
    "EPSON 教科書体M",
    //"EPSON 太明朝体B",
    //"EPSON 太行書体B",
    //"EPSON 丸ゴシック体M",
    "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

Thanks for the help!

The font does get listed when I go through those steps. I’m still not convinced that I see it showing up in the rotation, but for the time being I’ve just appended (a copy of) it to the end of the list to give it another chance to appear.

Also, grats on 50!! You’re not far off at all now :slight_smile:

2 Likes

Hey all, I recently started using WK, and I mainly do my studying on a Chromebook. Does anyone know if this can work on Chrome OS? I was able to get Tampermonkey and install Jitai no problem, but installing fonts for Jitai to use seems to be an issue. Was wondering if there were any other Chrome OS users who have found a work around for this.

Thanks!

i uninstalled the script but it keeps randomizing. what’s up with that?

1 Like

@Iyaonas It seems that it’s possible to install fonts on Chrome OS, but that it’s very involved and requires developer mode. Chromebooks really are pretty darn closed, huh…

@OmukaiAndi Well that shouldn’t be possible! If you’ve properly uninstalled it (and perhaps restarted your browser), that sounds like a bug in your userscript manager. What’s your OS, browser, and userscript manager?

win10, chrome, tampermonkey. i’ll try reinstalling and removing it once more when i’m home.

@obskyr thanks for the link I appreciate it! not sure I feel confident enough to give that a go though, I don’t want to brick my chromebook ><

just tried this and I love it! It is making me think about the kanji a bit more so that’s a good thing!

2 Likes

This is really slick, nice work.

i got rid of it successfully. wasn’t uninstalled for whatever reason - but now it is.
it’s a nice script, but i think i’ll go with default for the time being.

I really like this. Thank you! I want to be prepared for when I see kanji in the wild!

@obskyr I’ve also bothered you on Twitter, but I’ll ask here too.

I have two requests. The first is, I’d like to show the name of the font in the top left of the screen. That way I can easily remove the fonts I don’t like.

But my other request is a bit more important - do you think we can get a better randomizing function? The current one is just not random enough because I get some fonts WAY more often than other fonts. Especially during my font selection process (filtering out the boring fonts), it gets annoying :stuck_out_tongue:

Gosh and now that I’m here anyway. Why not ask… can we get the font to be replaced in the input field as well? Just for fun… cause that’s what we’re here for aren’t we. :slight_smile:

1 Like

Ehmm… you know that actually means it is more random? True random does not show everything equally in a small sample size. It probably will in the thousands, ten thousands, millions of data points, etc. So if you are seeing some fonts more often than others it means the function is working as intended, aka randomly. If you want it to more equally use each font but maybe vary up the pattern a bit, that would not be random anymore. But that is details. (I thought I’d share because the first time someone pointed this out to me? Mind blown. ^^ )

Also if your second/third (the input field font change) suggestion is implemented, I’d prefer an option to turn it off. Because while I want to learn to recognize kanji in different fonts, I have no desire to have a good portion of the page change font regularly, that would be distracting to me. :slight_smile:

2 Likes

I think the point there is that many fonts have missing glyphs, I guess especially the wilder/hand-written ones may only cover the school grades 1–6 kanji, so you will see the fonts with wider coverage more often.

2 Likes

Thank you very much for this script!