[Userscript] WaniKani Context

As a side note, having the verbs conjugated in context has been great practice for me so far! :nerd_face:

As a side side note, I figured out how to link the gist directly with a link that doesn’t change (i.e. auto update will actually work when it pings the download url). Please use the new link to install the script if you’ve installed already!

1 Like

Hey, I really like this idea, I’ll definitely use this. Idk if someone mentioned it already, but I ran into a compatibility issue of sorts with the pitch info script (see image below). Is there a way to fix this? Thanks!

image

2 Likes

I have encountered a problem while reviewing Suffixes such as ~氏、~付…
the vocab box appears blank :

1 Like

I reckon I know what the problem is, but could you link me to the script? I’d like to test my solution.

Oof… yeah, I’ll get that one fixed for sure. I’m surprised I hadn’t ran into that.

Check back lata for some patches. :stuck_out_tongue:

2 Likes

Here you go. :slight_smile:

@Chopped @flybot I believe I’ve fixed both of your issues in 0.1.6!

Side note, I’ve also removed the ‘experimental conjugation’ popup as things seem pretty stable. Still if you notice that a verb conjugation has been highlighted incorrectly please let me know the vocab/sentence combo and I can investigate.

3 Likes

Thank you! :+1:

1 Like

Pushed a change with a minor fix.

0.1.7

  • Fixed issue where context div wasn’t being hidden during kanji and radical reviews.
2 Likes

Hey, I wanted to let you know that I’ve had a few issues with the styling after the latest updates. This is how the review box appeared on my screen (I’m using Google Chrome) :

I have fiddled with the code for a while and found that the styling settings on line 69 and 70 are in cause.
I don’t know why but the position : absolute for context and the padding : 0% 2% for context span, mess things up on my screen.

After some trial and error I found settings that work well for me :

createStyle('.context { display: table; position : relative; width: 100%; height: 100%; font-size: 0.4em; line-height: 1.4; }');
createStyle('.context span { display: table-cell; vertical-align: middle; padding: 10% }');

I set the position to relative, a padding of 10% and a line height of 1.4 (so that the highlighted vocab box does not touch other characters with the default font).

This is how it looks now :

2 Likes

Hey, @flybot, thanks for letting me know!

The ‘.context { position: relative; }’ change looks good, but I’m less of a fan of the padding and line height changes as I think it could be space constricting for larger example sentences. Instead I ended up changing the context mark’s display property to ‘.context mark { display: inline-block; }’. That seems to get the highlight looking proper with WK’s default font. I probably didn’t catch it cause I’ve been using a font randomizer, haha.

Could you try out these styles and see if they work for you? I wanna make sure I’d actually be fixing the problem before pushing.

createStyle('.context { display: table; position: relative; width: 100%; height: 100%; font-size: 0.4em; line-height: 1; }');
createStyle('.context span { display: table-cell; vertical-align: middle; padding: 2% }');
createStyle('.context mark { display: inline-block; font-size: 150%; color: unset; background-color: rgba(0, 255, 255, 0.5); }');
2 Likes

ナイス! you fixed the highlight, it no longer overlaps with the default font.
It’s purely subjective, however the padding of 2% doesn’t work for me,
I don’t like how the sentences look squished to the top of the screen.
I have experimented with a few values, and I think I like a padding of 5% the most.
Regarding the line height a tiny bit more space looks better 1.1 seems to breathe a little more.
What do you think?

Here are some screens :

Default settings Padding 2% :


Default settings Padding 3% :

Default settings Padding 4% :

Default settings Padding 5% :

Padding 5% with Line Height 1.1 :

Hmmmm… That’s odd. I can see your issue with it now. Thing is, on my PC on chrome, the sentences have a fixed height no matter what the padding is set to. I’ve only been using padding to add space between the sides of the webpage and the text. See below.

So it seems like it may be something specific to your machine/browser combo. What OS and browser are you using. Oh, also do you have any other plugins installed?

1 Like

I see… it’s looking good on your end.
I’m using Windows 10 Pro 64bit and Google Chrome here are my scripts and plugins :


I have no reviews for the next 3 hours so I can’t test things out atm.
But I’ll try to desactive some scripts later in the day, if nothing works I’ll try with Firefox.

Okay so I did some tests and unfortunately I have the same behavior on both browsers.
What I did was desactivate external plugins and scripts,
reinstall the 0.1.7 version of Wanikani Context, then edit it with
the bit of code you shared with me above.

Here is the result :
Firefox is on the left, Google Chrome on the right.

So I don’t know… what result do you get when you disable your scripts? maybe you have a script installed that is interfering with the padding or position?
If not then I have no idea.

Edited
Whoops, I had written a bunch of stuff here without completely understanding the problem. When you disable all plugins, does everything appear normally?

Oooooh, actually I can repro the issue when only the WK Context plugin is enabled. I’ll check it out.

1 Like

Hi!

I just tested this userscript again and I won’t disable it for now :slight_smile: The conjugation! I noticed that! Here’s what I think: I think it’s good to remind myself about the dictionary form and the conjugated form in my mind.

2 Likes

I’m sure someone said it, but I’m not sure where. Where do the sentences come from?

Surprisingly, I don’t think anyone has said it, haha. All of the sentences come from WaniKani. They’re the same ones you’d find on the lessons page.