Jitai (字体): The font randomizer that fits

Hey! This issue is actually unrelated to Jitai, as you may know – it’s in WaniKani’s own CSS – but here’s the low-down: that part of the page isn’t affected by default fonts. The devs at Tofugu have set that priority list of fonts in the page’s CSS, and if you have Hiragino Kaku Gothic Pro installed under that name, it will be used.

However, that font in your first image isn’t Hiragino Kaku Gothic! “Gothic” is the Japanese equivalent of a sans-serif, and that font there is decidedly a minchō font – MS Mincho, to be precise:

MS Mincho

If you want to use a different default font, either:

  • Install Hiragino Kaku Gothic Pro under that name (my installation uses the name “HGPGothicM” instead), or
  • Apply this as a user style:
    [lang="ja"] {font-family: "YOUR DESIRED FONT HERE";}
    

To summarize, changing the system font doesn’t affect this, and Firefox is respecting the font order properly – the font just isn’t installed (under the same name, at any rate).

1 Like

i have problems detecting these fonts:
Missing font: Makinas-Scrap 5
Missing font: 851Gkktt
Missing font: ZinHenaBokuryu-RCF
Missing font: ZinHenaBokuryu-RDF

i have them installed and i tripple checked the names, but the font recognition algorithm does not detect them

i found my old post above: modified it a bit and by using both font loading techniques, i am able to get all my fonts render correctly

first column is both techniques combined. second load under differnt name technique, third just use fontname

first column: both techniques
second: force load under new name
third: just use font name

1 Like

Did you have to do anything special to get this to work on Mac?

Nope. But I haven’t checked if all fonts I have installed worked. At least a few did.

I haven’t noted if that changed much after I upgraded to latest safari (the version you needed to upgrade to with catalina that changed things) and I haven’t done reviews in quite a while now.

Thanks for setting this up

I noticed that there seems to be an issue where the script may sometimes fail to randomize the first item in the review if currentQuizItem has already been set before DOMContentLoaded fires. Also, even when it does randomize the first item, there can be a brief flicker when it switches the font because DOMContentLoaded can happen after first paint. Below is a short patch that fixes those issues. @obskyr, is there a chance this or a similar fix could be incorporated?

@@ -1,6 +1,6 @@
 // ==UserScript==
 // @name        Jitai
-// @version     1.3.2
+// @version     1.3.3
 // @description Display WaniKani reviews in randomized fonts, for more varied reading training.
 // @author      Samuel (@obskyr)
 // @copyright   2016-2018, obskyr
@@ -227,10 +227,14 @@

             return ret;
         };
+
+        let value = $.jStorage.get('currentItem')
+        if (value)
+            jitai.setToRandomFont(value.kan || value.voc || value.rad);
     }
 };

-$(document).ready(function() {
+(function() {
     jitai.init();

     // Make sure page doesn't jump around on hover.
@@ -247,4 +251,4 @@

     $heightStyle.text(heightCss);
     $('head').append($heightStyle);
-});
+})();

Can someone give me a hint where in the script I can change the default font?

What I am basically trying to do is to setup wanikani for calligraphy practice by using only two fonts: one showing the brush strokes (Yu Mincho) and one showing the stroke order (KanjiStrokeOrders, from another userscript). So it would be ideal to have one of them in the Jitai font list and the other one as default font.

I suspect I need to change the init function, maybe this here:

        this.$characterSpan = $('#character span');
        this.defaultFont = this.$characterSpan.css('font-family');

However, I am unsure of the syntax.

1 Like

I came here with an issue. Basically, the link with the script installation doesn’t open. I tried it with both with and without VPN, but the outcome is the same. Is it only on my side?

SETUP FOR CALLIGRAPHY PRACTICE
Seeing brush stroke types and stroke order in reviews

In Jitai, I only include the Yu Mincho font to see the brush stroke types in my reviews. I also added a hotkey that was suggested by another user’s comment to cycle between Yu Mincho and the KanjiStrokeOrders font (supplied here [Userscript] An Unobtrusive Kanji Stroke Order):

init: function() {
        window.addEventListener("keydown", event => {if(event.key == 'Ctrl') jitai.$characterSpan.css('font-family', 'KanjiStrokeOrders');});
        window.addEventListener("keyup", event => {if(event.key == 'Ctrl') jitai.$characterSpan.css('font-family', 'Yu Mincho, YuMincho');});

With that setup, I see the brush strokes in my reviews by default and can hold Ctrl to see the stroke order. I then write out all reviews with a brush pen.

EDIT: For some unknown reason, the hotkey stopped working the other day, so I changed the setup to showing Yu Mincho per default and the KanjiStrokeOrders per mouseover hover. I did a quick&dirty implementation in Jitai, but since there are no complicated functions, it should not cause any errors - just lots of redundant code.

setToDefaultFont: function() {
        jitai.setHoverFont(jitai.currentFont);
        this.$characterSpan.css('font-family', 'Yu Mincho, YuMincho')
    },

setHoverFont: function(fontName) {
        this.$hoverStyle.text("#character span:hover {font-family: KanjiStrokeOrders !important;}");
    },
3 Likes

EDIT: Actually I just had a windows update and it might have fixed it but i’ll keep the body of the post here for now

Suddenly during reviews it seems the default MS fonts are the only being selected. The fonts are still installed and seem fine in Word.

After noticing the problem I was using this below to see what fonts were actually available. Reinstalling the font and restarting the browser seems to make that font available again but upon restarting the computer it’s back to only the MS fonts. The same thing is happening on Firefox and Edge

Has anyone else started having this issue in the last few days or in the past?

If I want it to actually change the font even during lessons as well, what should I do?
(and also not to change into standard font once I give an answer)

I’m trying this mod with KouzanBrushFontGyousyo but even after adding the font to the Jitai code, it doesnt seem to pop in reviews. Is there a way to run it in debug mode or something and see what’s going wrong? I don’t see any errors in the console

e; I took the name from the windows font window, added it under the // Add your fonts here! line , and Jitai is still working just not selecting that font.

you may try to comment all other fonts with // to leave only the font you want to check working, save changes and then try to run reviews. If it’s working, then you just didn’t get lucky with getting it, as it’s random.

Like this, for example:

image

1 Like

I only have 1 other alternate font so it is VERY unlikely I haven’t seen it. I’d like to leave it uncommented because then at least I know the plugin itself is working

E; Do you know if the plugin responds to code changes mid-review, or do i have to reload the page

I added code in the loop that loads the fonts to print out whether a particular font was found or not. Very helpful for diagnosis. Unfortunately, it was a long time ago, and I don’t think I have the code anymore.

oh yeah i guess thats a good idea. I can probably do that if its printing on console

oh you were right, at least in the sense that apparently I have WAY more fonts than i thought I did.

Ok so what ends up happening is that my font fails the “fontExists” check in the code (but passes the canRepresentGlyphs test). And it passes the check of the site mentioned in fontExists() too…

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;

No idea if its a coincidence, but I will override it to specifically give my font a pass.

EDIT: I did, it successfully selected my font, but it didnt actually change the characters. Even though my font actually works on wordpad lol. I think I just dont know enough about fonts…

EDIT2: The lengths i go to avoid actually doing my reviews…

One feature I would love to see would be if hovering over the word / kanji wouldn’t just display it in the regular font, but show the name of the font, so I could more easily single out fonts I don’t like and toss them out.

And one less practical idea I’d love to see would be a side-by-side comparison of regular font vs randomized font, rather than just switching back and forth by hovering.

You can check the current font by right clicking the text and choosing Inspect/Inspect Element. When you do this, a window opens and if you look through it carefully, you will see that somewhere it says font-family: followed by the name of the font.