Color Headword by Pitch Accent

[neilord]

It would be awesome to have the word colored based on the pitch accent group! Here is how it might look:

As a convention, color can be taken from the JP Mining Note:

https://arbyste.github.io/jp-mining-note/autopa/

[briana-brady]

I do this through custom css I added in settings. Would be nice to have this built in so it could work with exporting to anki somehow.

.headword[data-pronunciation-categories="heiban"]{
    --headword-text-color: blue;
    --headword-current-kanji-text-color:blue;
}

.headword[data-pronunciation-categories="kifuku"]{
   --headword-text-color: goldenrod;
    --headword-current-kanji-text-color: goldenrod;
}

.headword[data-pronunciation-categories="nakadaka"]{
   --headword-text-color: orange;
   --headword-current-kanji-text-color: orange;
}

.headword[data-pronunciation-categories="atamadaka"]{
   --headword-text-color: red;
    --headword-current-kanji-text-color: red;
}

.headword[data-pronunciation-categories="odaka"]{
    --headword-text-color: green;
    --headword-current-kanji-text-color: green;
}

[parfait8566]

I do this through custom css I added in settings. Would be nice to have this built in so it could work with exporting to anki somehow.

.headword[data-pronunciation-categories="heiban"]{
    --headword-text-color: blue;
    --headword-current-kanji-text-color:blue;
}

.headword[data-pronunciation-categories="kifuku"]{
   --headword-text-color: goldenrod;
    --headword-current-kanji-text-color: goldenrod;
}

.headword[data-pronunciation-categories="nakadaka"]{
   --headword-text-color: orange;
   --headword-current-kanji-text-color: orange;
}

.headword[data-pronunciation-categories="atamadaka"]{
   --headword-text-color: red;
    --headword-current-kanji-text-color: red;
}

.headword[data-pronunciation-categories="odaka"]{
    --headword-text-color: green;
    --headword-current-kanji-text-color: green;
}

For some reason this doesn't work on certain entries like 佐官

[neilord]

For some reason this doesn't work on certain entries like 佐官

That's right, unfortunately, same for me.

[briana-brady]

Unfortunately I can't diagnose, I don't run into the issue.

Two things to note, I am using Firefox, as well as using only one pronunciation dictionary for the entries.

Perhaps the html attributes aren't consistent between platforms? I had to search for a while in the inspector to find the data-pronunciation-categories attribute.

It also won't color if there is more than one pronunciation listed for the word, like 受け取る (which for me is listed as data-pronunciation-categories="heiban kifuku" in the inspector based on the dictionary I'm using) since the css is looking for exact matches.

[Kuuuube]

You can make the selectors like this .headword[data-pronunciation-categories^="kifuku"] to select whichever one shows first. ^= instead of =.

There shouldn't be any difference between browsers. They likely just have multiple conflicting pitch dicts installed and need to make the selector looser as mentioned above.

[parfait8566]

Yup, conflicting pitch dics are the issue. Using ^= instead fixes it.

[briana-brady]

@Kuuuube Cool! I didn't know you could do that in css!

Here's the css updated with looser selectors:

.headword[data-pronunciation-categories^="heiban"]{
    --headword-text-color: blue;
    --headword-current-kanji-text-color:blue;
}

.headword[data-pronunciation-categories^="kifuku"]{
   --headword-text-color: goldenrod;
   --headword-current-kanji-text-color: goldenrod;
}

.headword[data-pronunciation-categories^="nakadaka"]{
   --headword-text-color: orange;
   --headword-current-kanji-text-color: orange;
}

.headword[data-pronunciation-categories^="atamadaka"]{
   --headword-text-color: red;
   --headword-current-kanji-text-color: red;
}

.headword[data-pronunciation-categories^="odaka"]{
    --headword-text-color: green;
    --headword-current-kanji-text-color: green;
}

[neilord]

Here is what I use (colors from JP Mining Note):

.headword[data-pronunciation-categories^="heiban"]{
    --headword-text-color: #59b2ff;
    --headword-current-kanji-text-color: #59b2ff;
    --headword-current-furigana-text-color: #59b2ff;
    --headword-current-kanji-border-color: #59b2ff;
}

.headword[data-pronunciation-categories^="kifuku"]{
    --headword-text-color: #af85f4;
    --headword-current-kanji-text-color: #af85f4;
    --headword-current-furigana-text-color: #af85f4;
    --headword-current-kanji-border-color: #af85f4;
}

.headword[data-pronunciation-categories^="nakadaka"]{
    --headword-text-color: #ff9b54;
    --headword-current-kanji-text-color: #ff9b54;
    --headword-current-furigana-text-color: #ff9b54;
    --headword-current-kanji-border-color: #ff9b54;
}

.headword[data-pronunciation-categories^="atamadaka"]{
    --headword-text-color: #ff6666;
    --headword-current-kanji-text-color: #ff6666;
    --headword-current-furigana-text-color: #ff6666;
    --headword-current-kanji-border-color: #ff6666;
}

.headword[data-pronunciation-categories^="odaka"]{
    --headword-text-color: #67e47d;
    --headword-current-kanji-text-color: #67e47d;
    --headword-current-furigana-text-color: #67e47d;
    --headword-current-kanji-border-color: #67e47d;
}

[Casheeew]

I do this through custom css I added in settings. Would be nice to have this built in so it could work with exporting to anki somehow.

I don't believe that it's good to send down color information since it's a bit redundant. You can have an addon in Anki such as AJT Japanese that colors your pitch accent and then set the colors to match JPMN.