Jitai (字体): The font randomizer that fits

Thanks @_josh, it worked for me!

1 Like

Thank you, that works for me too! I’d say put that code snippet in a PR to the main Jitai repo: Pull requests · marciska/Jitai · GitHub

2 Likes

It doesnt work for me… I dont know what i could have done wrong, I literally copy pasted the whole thing not to make mistake. And I would also like to keep all of the font I downloaded and that was working well in the old script, but I don’t even know how to add them in the new script, and when i tried to make everything look good, it said “error”. Can someone help and/or correct just like the old version was so we can keep our original font please ?

Worked for me!

1 Like

Legend! That worked for me! For anyone reading, I did the first copy pasta…not the entire script.

1 Like

I also remember i was using the Jitai V2, that I’ve found in this post
That is why I could not replace the part of the code with the new one that @_josh made
I dont know if people will keep on updating it tho, so if someone can help me I would really appreciate it :smiling_face_with_tear:

1 Like

Note: This post is a fix for Jitai v2 (which is a different version of this script)
See above for the current fix for Jitai v3 managed by marciska.

Found a fix for this. Pretty much the same issue.

Following the same steps above, replace lines 132-160 (most likely different based on what fonts you have) with the following code:

Image for reference

Replace the code under // ----

const ele = document.getElementsByClassName("character-header__characters")[0];
const default_font = getComputedStyle(ele).fontFamily;
let current_font = default_font;

let style = document.createElement("style");
ele.style.fontFamily = current_font;
document.head.appendChild(style);

function applyRandomizedFont() {
    ele.style.fontFamily = current_font;
}

function revertToDefaultFont() {
    ele.style.fontFamily = default_font;
}

ele.addEventListener('mouseenter', revertToDefaultFont);
ele.addEventListener('mouseleave', applyRandomizedFont);

// On Submit
window.addEventListener("didAnswerQuestion", function()
{
    ele.style.fontFamily = default_font;
});

// On Next
window.addEventListener("willShowNextQuestion", function(event)
{
    const characters = event.detail.subject.characters;
    if (typeof(characters) == "string")
    {
        do current_font = existingFonts[Math.floor(Math.random() * existingFonts.length)];
        while (!canRepresentGlyphs(current_font, characters));

        ele.style.fontFamily = current_font;
    }
});

Let me know if that works!

3 Likes

Thanks! This worked for me but I had to comment out the second line inside the “didAnswerQuestion” event listener in order to get the font to revert back to default after answering the question.

1 Like

Based on your code I fixed the Jitai v3 script as well.

Jitai v3 is here: Jitai (字体): The font randomizer that fits - WaniKani / API And Third-Party Apps - WaniKani Community

Here is my diff:

===================================================================
--- Current Version
+++ New Version
@@ -30,9 +30,8 @@
     const example_sentence = '質問:私立探偵 (P.I.) はどんな靴を履いていますか?<br>答え:・・・スニーカー。(笑)';
     
     let font_default = getDefaultFont();
     let font_randomized = font_default;
+    let hovering = false;
 
     // available fonts
     let font_pool = {
         // Default OSX fonts
@@ -347,32 +346,25 @@
         }
 
         // show font
         if (hover_flipped) {
+            item_element.style.fontFamily = hovering ? font_randomized : font_default;
-            item_element.style.setProperty("--font-family-japanese", font_default);
-            item_element.style.setProperty("--font-family-japanese-hover", font_randomized);
         } else {
+            item_element.style.fontFamily = hovering ? font_default : font_randomized;
-            item_element.style.setProperty("--font-family-japanese", font_randomized);
-            item_element.style.setProperty("--font-family-japanese-hover", font_default);
         }
     }
 
     function registerJitaiEvents() {
         // on mouse hovering, show default font
         //  - normal  : randomized font
         //  - hovering: default font
         let style = document.createElement("style");
+        item_element.style.fontFamily = font_default;
-        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);
         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
         global.addEventListener("didAnswerQuestion", function(event) {

Here is the complete updated script on pastebin: Jitai v3 with fixes Feb 2024 - Pastebin.com

4 Likes

This is broken after latest font changes, but I have a small diff to fix it here:

It’s still working well for me.

2 Likes

This is working, thanks! I just found this script and it’s so much fun :star_struck:

Thank you so much it worked perfectly well with my fonts !!

2 Likes

I’m assuming the reason V3 isn’t loading in PC installed fonts is because of the new update? I’ve only just installed it so unfortunately I didn’t get to test the functionality pre-WK update.

If so I think I’m gonna stick to the old one for now. Love the idea behind the new version, making it easier for people to enjoy Jitai without having to find and download a bunch of fonts, but seeing as I already did and I have both more and different fonts I’m happy with, I’ll wait until I can have my cake and eat it too.

Any idea why jitai//tampermonkey always takes a split second to update the font? I can always see the normal font before the randomized one.

2 Likes

@marciska
Unfortunately no.

Most others create a new thread and just link back to the original to give credit.
Thank you for your services! ^ _ ^

1 Like

It likely works like this.

  1. Wanikani loads their own font from their servers
  2. Tampermonkey sees your URL is wanikani.com and runs all scripts associated with this
  3. Jitai runs
  4. Jitai randomly chooses a font (this is not a zero-cost operation)
  5. Jitai applies the font

If you want to minimise the time, the only way to do so is to get a better PC or internet connection :frowning: Or you can request Wanikani themselves to implement Jitai!

1 Like

The only thing that might help could be to go into Tampermonkey and make sure that Jitai is set to run right at the start maybe? That seemed to speed it up ever so slightly for me

In my experience because the whole script framework is such a hack it’s also very common for scripts writers to add various hardcoded delays here and there to have things work correctly.

This is not a criticism of script writers by the way, it’s just the way it is when you graft yourself onto an other codebase that’s not designed for it and won’t even try to make it easy for you.

2 Likes

I’ve attempted a few things, like the ones mentioned above, but also removing any other scripts, etc. Nothing solves it completely so I kinda just have to blink between each confirmation.
My machine and internet are the top end (need it for work), but even so I wouldn’t discard it being chrome/tampermonkey/script/api related. I’ve had extensions freeze my CPU for a split second on loading. Doesn’t matter how powerful your computer is: if someone writes something ridiculous, they can easily tie down your CPU for a bit. Haven’t tried it on firefox, though.

I’m currently only using Anki, Reorder Omega and Jitai. Reorder Omega with Back-to-Back functionality makes it less annoying, at least. Although it sometimes forgets to randomize the font between reading and meaning, but it’s fine.

1 Like

Thanks for the fix! Will you make a pull request on the GitHub?