[Userscript] WK Read that if you can

WaniKani API And Third-Party Apps
1

:warning: This is a third-party script/app and is not created by the WaniKani team. By using this, you understand that it can stop working at any time or be discontinued indefinitely.

Features

I’m planning for this extension to handle every possible WK review font modification need that could arise eventually. For now it supports 2 features:

  • Using fonts from Google Fonts in an integrated way
  • Changing the size of the font.

After installing the extension, the menu in the top left corner of the screen will gain an additional button:

image

Clicking this will open up a dialog (if you’ve been following what I was doing in the last couple of weeks, this was a shocker for you):

image
image1080×666 83.2 KB

Under “Google Fonts” you can pick and choose, exactly which fonts should be able to appear during reviews. Attention: Not all fonts work for every single kanji, some fonts are for example just hentaigana fonts. If a specific kanji is not included in a given font, the original wil appear as a fallback.

My personal favourite is the DotGothic16 (2nd from the top).

Below that you can change the minimum and maximum font size. The words will appear with a random size in that range. To give a rough idea, mangas tend to have a font size of around 20, but for example the DotGothic16 should handle font sizes as low as 16.

Example of the script working:

image
image1049×563 10.7 KB

Now, read that if you can.

The script also works in extra study mode and during lessons.

If you are not sure what a given character/word is, hover over it and it will return to its original self. Are you a keyboard warrior? Then just hold down Alt

Planned features ordered roughly by how important they are

  • Save presets: would be great if you could save a preset and bring it to a new computer
  • Use installed fonts and fonts from other sources: google fonts nowadays has a great selection, I would say there is about 20 unique fonts, but would be nice if one could use installed fonts
  • Enable/Disable font changes in the different study modes.
  • Make it possible to have the same font and size for the parts of a pair.

Installation

Visual guide on how to install userscripts
Link to the script itself

Feedback

If you notice something that isn’t working how you think it should or you have a feature idea/request, feel free to include it in a reply, preferably with a screenshot if you can. (if not applicable, favourite cat pic works as well)

17 Likes
2

Very cool!

1 Like
3

@Kumirei seems like it’s not compatible with back to back, it’s messing with the sizing making it always be the mininum

1 Like
4

What’s the difference between this and Jitai?

5

In the long run it should have more features and currently I don’t think jitai is getting updated

2 Likes
6

I am not quite sure how to resolve this in a good way. The way Back To Back works is I create an error and check the trace to see if certain function names are present in order to avoid messing up other scripts. The original back to back function in Reorder Ultimate did not do this, and just returned 0 for all calls to Math.random(). I would like to make it so that it only returns 0 if called directly by those functions (ignoring possible intermediary Math.random wrappers), but I don’t see a good way to do that which works in all browsers. Perhaps adding a check to see if jStorage is also in the trace would be enough, as that would exclude any calls made due to WK updating a key in jStorage.

7

I’ve been using it since it launched and I switched completely from jitai, because I like the fonts better and Jitai is not supported anymore. But I’d like to report couple of issues, very small ones and not really deal breakers, but could maybe improve it

1st one: Even though the font is smaller, it takes more vertical space comparing to the wanikani font

Custom font with this script

vraL9rltZP
vraL9rltZP1333×750 36.1 KB

Hovering the mouse to show the original font

vivaldi_herPCyKIOB
vivaldi_herPCyKIOB1333×750 38.4 KB

2nd one: It takes a split second to load the font, maybe cache all the selected fonts? I don’t know, I don’t really get programming

As I said, the problems are really small and I still use it over Jitai, so that says something about this userscript, overall it works very well

1 Like
8

The vertical space problem just happens with kanji and not with vocabs (I don’t remember happening with radicals, but I’ll keep an eye on it)

1 Like
9

I’m glad to hear that :smile:

Just to give some insight, currently I go through the Google fonts api to get the list of fonts there, and then I download them, which is not smart. I’ll prolly do exactly this and cache them locally.

2 Likes
10

You know you can fork Jitai from Github Gist, right?

Font styles would probably be mainly textbook style vs Mincho, but there are definitely others. I don’t know much about, “would font weight matter?”, though.

Some other fonts that might be considered, might include pixelated fonts; though, of course, it should be done in moderation.

Another thing that might matters, is - you should really wrap you UserScript code in IIFE, as not only that top-level code can be interfered, but also I don’t think anything other than var can be declared twice.

1 Like
11

I don’t want to do a lot of things that jitai is currently doing. A big one is that back then there wasn’t a good way to check for character support and now there is.

There are a ton of font variates out there. Besides the textbook fonts, there are decorative fonts, handwritten fonts, pixel fonts, stylized fonts, and all of these have a ton of variety.

I’ll keep the rest of the changes you mentioned in mind and will implement them in the next version, which should have some kind of support for non Google fonts.

2 Likes
12

This should now be fixed, but large fonts will make the area where the items are significantly bigger.
As a sidenote, fonts now fon’t overflow into two lines, they will be scaled down to just about fit with some wriggleroom if they are too big.

Now it shouldn’t after you run the script at least once, so make sure to reload your review session once and from that point on they should more or less load instantly. Currently the system doesn’t handle font updates, but I’m not sure if I get data for that, I’ll need to check.

Now the whole thing is wrapped, thank you for the suggestion

1 Like
13

Yeah, but “use strict” also; although I don’t think even with it outside will break too many things nowadays.

image
image797×400 39.1 KB

What I really thought about is opinionated font categories; rather than having to scroll a long-long list.

Many of the other fonts might be able to be found on the CDN; otherwise, it is not that tough to host them yourself.

1 Like
14

That was fast lol. I’ve tried it and the vertical space problem seems to be fixed. But I noticed that the Reorder omega preset selector is now centered (it was aligned to the left before). I’ve tried to disable just the “Read that if you can” and it returns to the left position. It doesn’t really matter but just letting you know

2 Likes
15

Let me know if you want me to change any of my css, Gorbit

3 Likes
16

nice, so no need for jitai script and installing fonts on windows anymore?

1 Like
17

I’ll try to look at it and maybe wrap up the review text even more, but I’ll let you know if anything’s needed.

That’s my goal, yes, you should be able to take your config from one computer and transfer it/share it

4 Likes
18

even setting font size to 80, it is really small! Is there a fix?

Also, can you add a button for ‘select all’? Since the fonts are changed randomly right?

I realized the font only changes when I type correct or wrong in anki mode. When the item appears, it is the default font type. I use anki mode all the time in firefox.

1 Like
19

The default wk font size is 200ish I believe, or maybe you have a very high resolution display or something? Please take a screenshot or something with the issue on it

Which script are you using for anki mode? It’s probably a compatibility issue with that script, I’ll see what I can do about it

1 Like
20

I use this anki mode script, the newest one:

as soon as the item appears it is really small, if I hover with mouse pointer on it, it becomes big (default size) and the font changes.