KanKan: kanji-component-aware online Japanese dictionary

[Akashelia]

So I found something to complain about have a feature request

Can you highlight the part of the search result that contains the searched string?
So for example when I type 動, instead of seeing this:

I would like to see this:

Second feature request, can there be an option for a light theme? Never thought that I would ask for that, but right now that I am reading a paper book near my computer, and living in Denmark and all where it’s dark at 16 in the winter, it is nice if the screen can emit some light

[simias]

Good ideas, I pushed a (very untested) change. There’s a button at the bottom of the page to toggle between light and dark themes. Normally by default the chosen theme should be selected based on device preference, or dark if no preference is found. The setting is then stored in the browser’s local storage, so it should be preserved across visits.

I also “muted” the extra part of matches to make the actual selection stand out:

EDIT: oh and I absolutely suck at graphic design so don’t hesitate to propose color changes. I put everything in CSS variables at the top of the file so it should be easy to experiment:

:root {
    --fg-color: white;
    --fg-color-secondary: lightgrey;
    --bg-color: #1f3f3f;
    --match-bg: #103030;
    --match-bg-visited: #203030;
    --match-bg-hover: #143444;
    --help-bg: #333333;
    --link-color: #aaaaff;
    --radical-bg: #173c0c;
    --radical-title: lightblue;
    --radical-stroke: black;
    --match-extra-color: #9999aa;
}

:root[data-theme='light'] {
    --fg-color: black;
    --fg-color-secondary: #111111;
    --bg-color: #fdf6e3;
    --match-bg: #99ee99;
    --match-bg-visited: #aaffaa;
    --match-bg-hover: #77aa77;
    --help-bg: #cccccc;
    --link-color: #0000aa;
    --radical-bg: #aaddaa;
    --radical-title: #111155;
    --radical-stroke: white;
    --match-extra-color: #557777;
}

[Akashelia]

I love it!! Thank you and thank you for doing so fast too

[simias]

I started implementing conjugation handling:

• 上手かった
• 面白くない
• 見た
• 帰りませんでした
• かまわない
• 死んでる
• 書かない

I haven’t handled volitional/potential/causative/etc… yet, only basic stuff like negatives and た・て forms.

It’s also a very simplistic approach using regex which can’t handle the virtually infinite combinations of Japanese agglutination grammar. So 見ている is handled but 見ていなかった isn’t. I could just add more regex to handle more cases but the total combinatorial of all possible verb forms is extremely large.

const deconjugation_table = [
    // Verb ます forms
    [/(い(ます|ません(でした)?|ました))$/, '($1|いる|う)$'],
    [/(き(ます|ません(でした)?|ました))$/, '($1|きる|く|くる)$'],
    [/(ぎ(ます|ません(でした)?|ました))$/, '($1|ぎる|ぐ)$'],
    [/(し(ます|ません(でした)?|ました))$/, '($1|しる|す|する)$'],
    [/(ち(ます|ません(でした)?|ました))$/, '($1|ちる|つ)$'],
    [/(に(ます|ません(でした)?|ました))$/, '($1|にる|ぬ)$'],
    [/(び(ます|ません(でした)?|ました))$/, '($1|びる|ぶ)$'],
    [/(み(ます|ません(でした)?|ました))$/, '($1|みる|む)$'],
    [/(り(ます|ません(でした)?|ました))$/, '($1|り?る)$'],
    [/(ます|ません(でした)?|ました)$/, '($1|る)$'],

    // Godan verb negative
    [/(わない)$/, '($1|う|わる)$'],
    [/(かない)$/, '($1|く|かる)$'],
    [/(がない)$/, '($1|ぐ|がる)$'],
    [/(さない)$/, '($1|す|さる)$'],
    [/(なない)$/, '($1|ぬ|なる)$'],
    [/(ばない)$/, '($1|ぶ|ばる)$'],
    [/(まない)$/, '($1|む|まる)$'],
    [/(らない)$/, '($1|る|らる)$'],
    // する special case
    [/(しない)$/, '($1|する|しる)$'],

    // Adjectives た・て + negative
    [/(くない|かった|くなかった)$/, '($1|い)$'],
    [/(くて|くなくて)$/, '($1|い)$'],

    // Verb た・て forms
    [/(って(い?る)?)$/, '($1|る|う|つ)$'],
    [/(った)$/, '($1|る|う|つ)$'],
    [/(いて(い?る)?)$/, '($1|く|いる)$'],
    [/(いた)$/, '($1|く|いる)$'],
    [/(いで(い?る)?)$/, '($1|ぐ)$'],
    [/(いだ)$/, '($1|ぐ)$'],
    [/(んで(い?る)?)$/, '($1|む|ぶ|ぬ)$'],
    [/(んだ)$/, '($1|む|ぶ|ぬ)$'],
    [/(して(い?る)?)$/, '($1|する?|しる)$'],
    [/(した)$/, '($1|する?|しる)$'],
    [/(て(い?る)?)$/, '($1|る)$'],
    [/(た)$/, '($1|る)$'],

    // Ichidan verb negative (needs to come last not to match against godan and
    // adjectives)
    [/(ない)$/, '($1|る)$'],
]

[simias]

By the way the reason I wanted this is because naturally it can be tricky to guess the dictionary form of an unknown conjugated verb. So if you encounter, say, 翔って and you don’t know the word or kanji, it can be tricky to search for because what’s the correct form of this? Is it 翔る, 翔う or 翔つ?

Now you don’t have to worry about this, you can just search for 「羊羽」って and it finds the right word for you.

[Akashelia]

@simias

So if you encounter, say, 翔って and you don’t know the word or kanji, it can be tricky to search for because what’s the correct form of this? Is it 翔る, 翔う or 翔つ?

Hm when that happens I just search for 翔 and see what the results are

[simias]

That does work in this case but it assumes that you have a way to input the kanji. If you start searching by component there will potentially be a ton of matches for a single character.

[Akashelia]

Hmm I see your thinking, but not sure that I have seen a use case for it myself yet

[simias]

It’s part of my world dominion plan to get to a point where I can use this as my main dictionary and being able to just write random forms without worrying about grammar and still get results.

I also intend to eventually change the result list to have some kind of “fold” that would let you access extra data for the vocab similar to a jisho page (kanji composition, examples, etc…) but that will take more work because I need some sort of backend to do this instead of doing everything in the browser.

[Akashelia]

As long as you don’t change the order of the radicals, you can go ahead and take over the world, fine by me

[Kazzeon]

Can’t you program the conjugation rules themselves?

Like 見る > 見て + いる > 見ている - る + ない/た > 見ていない - い + かった > 見ていなかった

[simias]

The issue is that I’m trying to do the opposite: I start with the conjugated form in the query string and I need to “deconjugate” it back to the dictionary form. That’s trickier to do algorithmically especially if I’m given a fuzzy search like, say 「貝」「長」ります that’s supposed to find 頑張る. In this case my algorithm would need to guess that the ending is really る but how can I know that?

I could use your solution and pre-compute all reasonable conjugations for all existing Japanese verbs and adjectives and match against that, but that seems really brutal computing-wise.

[simias]

I added the remaining “basic” conjugations: imperative, causative, passive, causative-passive, potential and volitional: 休ませられる

[catwithcookies]

This is great!! Thanks so much for sharing. I bookmarked it for later use.

[eagleflo]

Thanks for the cool tool! Previously I’ve used https://kanji.club in a separate tab to hunt for these kanji, but it makes a lot of sense to just integrate that functionality into the dictionary prompt itself.

There’s something funny going on with the back button, almost as if navigating to an entry uses history.pushState to create a duplicate entry in the history after loading the result page (instead of history.replaceState).

[simias]

@eagleflo

There’s something funny going on with the back button, almost as if navigating to an entry uses history.pushState to create a duplicate entry in the history after loading the result page (instead of history.replaceState).

Yeah that part is very shoddy, I’ve already fixed a few bugs but it definitely doesn’t work perfectly still. I’ll have a look at replaceState.

[simias]

I got a domain name! kankan.pt

At this point it should behave identically to the current page at svkt.eu/kankan/ but it’s actually a big rewrite: there’s now python Flask running in the backend (for now doing basically nothing) and I ported the Javascript to TypeScript because why not.

Also, new favicon made with love to replace the AI-generated one I used until now:

Behold my mad c4ll1gr4phy skillz.

[RebBlue]

This thing you made is awesome. Thank you!

[Belthazar]

@simias

Nani?

[simias]

お前はもう教えられてる