Jitai (字体): The font randomizer that fits

For @chiaracoetzee’s benefit if you do so: your patch didn’t apply cleanly for me, the hunking was off for some reason. Below is a version that cleanly applies to the Git repo:

new Jitai.user.js patch

diff --git a/Jitai.user.js b/Jitai.user.js
index 5dff781..e54e649 100644
--- a/Jitai.user.js
+++ b/Jitai.user.js
@@ -31,6 +31,7 @@
     
     let font_default = getDefaultFont();
     let font_randomized = font_default;
+    let hovering = false;
 
     // available fonts
     let font_pool = {
@@ -347,11 +348,9 @@
 
         // show font
         if (hover_flipped) {
-            item_element.style.setProperty("--font-family-japanese", font_default);
-            item_element.style.setProperty("--font-family-japanese-hover", font_randomized);
+            item_element.style.fontFamily = hovering ? font_randomized : font_default;
         } else {
-            item_element.style.setProperty("--font-family-japanese", font_randomized);
-            item_element.style.setProperty("--font-family-japanese-hover", font_default);
+            item_element.style.fontFamily = hovering ? font_default : font_randomized;
         }
     }
 
@@ -360,10 +359,19 @@
         //  - normal  : randomized font
         //  - hovering: default font
         let style = document.createElement("style");
-        style.appendChild(document.createTextNode(".character-header__characters:hover { font-family: var(--font-family-japanese-hover); }"));
-        item_element.style.setProperty("--font-family-japanese-hover", font_default);
+        item_element.style.fontFamily = font_default;
         document.head.appendChild(style);
-        
+
+        item_element.addEventListener("mouseenter", function() {
+            hovering = true;
+            updateRandomFont(false);
+        });
+
+        item_element.addEventListener("mouseleave", function() {
+            hovering = false;
+            updateRandomFont(false);
+        });
+
         // on answer submission, invert hovering event
         //  - normal  : default font
         //  - hovering: randomized font
1 Like

Because of font fingerprinting attacks¹, browsers are moving to no longer allow websites to use locally-installed fonts. This process is ongoing and different browsers are taking different tacks as to migration, but it seems very possible that the old version was grandfathered into your browser’s whitelist because you’d used it before the security change.

I’m surprised the old one is working for you at all after WK’s font switch last week—if you can look at the Jitai.user.js file, what does the // @version line in the prelude of the file say?


Footnote

¹ A font fingerprinting attack is a way to help malicious (or snoopy) websites to get around do-not-track restrictions, by building a profile of what fonts (and versions of fonts) you have installed. This is pretty useless for tracking people who never install fonts, but for people that do, their selection can be remarkably unique, especially when paired with other profiling info the browser can access.

After almost a decade of trying various ways to thwart them while still allowing users to use locally-installed fonts—only for attackers to find yet another way—a few years ago they gave up and declared that standard built-in OS fonts and webfonts would be the only fonts allowed going forward. Since this is potentially disruptive for people who are unlikely to have any idea what’s going wrong, different browsers have been rolling this change out in different ways.

Never heard of font fingerprinting before, that’s very interesting! Mind you the old one did break for me after the update, but there was a user above who wrote a patch that I copied in, so it works now. I don’t think the @version is going to be relevant since that’s why.

Certainly I like the idea of going web-only with fonts, especially if it could mean not having to download and install the fonts when I use a new computer with WaniKani. But I don’t like the lack of freedom to pick and choose. The choices in the v3 script aren’t bad, I like most of them. But is there a way to add more as a user, or are we at the mercy of what the dev chooses to offer in the settings?

2 Likes

To have a setting where you could add a webfont from Google Fonts Jitai doesn’t use? Yes. To add a font from another webfont server by URL? I think so, but I’m not sure about the security measures there. But to allow you to add your own fonts either on your disk or by somehow uploading them? No, that’s specifically disallowed.

1 Like

Hey! I have a custom Windows font I want to add.

is it a case of adding it to the JSON object? let font_pool = { ? Like one of these?

    // Default Windows fonts
    "Meiryo" : {full_font_name: "Meiryo, メイリオ", display_name: "Meiryo", url: 'local', recommended: false},
1 Like

Another question for the font experts, I presume some fonts won’t have all the characters, right? How do I know this? Currently I am guessing if the font is >5 mb it likely will…

1 Like

Good idea, I made a pull request here:

Fix for recent WaniKani font changes by chiaracoetzee · Pull Request #4 · marciska/Jitai (github.com)

Remains to see if somebody will notice and merge it.

2 Likes

Hey everyone, I tried the latest patches for this problem but Jitai doesn’t work. I don’t get any font change, but the script appears on Tampermonkey plugin correctly when I attempt self-study or reviews.

I tried modifying lines as well as mentioned above, directly modifying the script. Use whole Pastebin copypasta as well - no luck.

Anyone know if this it was recently re-broken?

1 Like

Have you turned it on? Before first use, you need to select all the fonts you want to use on the settings(?) tab on your Wanikani dashboard. Not sure what the button is called exactly, but it’s on the top left side.

For me this is the only userscript that doesn’t appear on the settings. Idk if I’m doing something wrong (?)
P.S. thank you, didn’t know until now that all the scripts have settings :')

1 Like

This is where the settings are for me, I only see them while in review mode

I have the same problem, Jitai doesn’t work for me anymore. I selected the fonts in the settings and all, but a few days ago it just stop working (well before, it only showed me the other fonts after I had typed my reply in the reviews, if my cursor was on the kanjis :laughing:).

1 Like

Did you apply the fixes in the pull request mentioned above?

Start with the most recent version and then modify it with the TamperMonkey editor per the diff in the linked pull request. Make sure you save it and then refresh the site. It’s working for me.

1 Like

Tbh, I have no idea of how using this :sweat_smile:
Do I have to copy it somewhere ?

I created a pastebin of the latest version along with the needed patch applied as follows:

How to update:

  1. Go to the Tampermonkey dashboard
  2. Find Jitai in the “Installed Userscripts” tab and click the edit icon over to the right (page with a pencil icon)
  3. Replace the script contents in the Tampermonkey editor for Jitai with the modified v3.1.2 code
  4. Save the contents (File->Save)
  5. Refresh the WaniKani reviews/lessons page and make sure modify the Jitai settings to select which fonts you want to enable if you haven’t already done that previously
28 Likes

Thank you so much! It worked perfectly!!

2 Likes

Thanks ! Indeed, it works ^^

3 Likes

Did you install Wanikani Open Framework first? I had a similar problem about a month ago and installing WKOF fixed it.

3 Likes

My first time using this – fyi I had to both install Wanikani Open Framework per Shaonia and make the manual changes the script per MikeyDC65

Edit: having used this for my last couple of review sessions now, I can confirm that it’s amazing! I think this will REALLY help kanji recognition in many different scenarios.

3 Likes

Hi all,

My Chrome updated and I’ve had to reinstall all of my scripts for some reason… unfortunately Jitai was also affected.

I can get Jitai to work, but the settings menu doesn’t appear so I can’t choose my own fonts. Is that related to the recent WK icon changes or a different problem entirely? I followed the steps that @MikeyDC65 laid out in this post for reference.

1 Like