Change red squiggly line

[koiyakiya]

Currently, on example sentences, Jitendex uses a red squiggly line to show where a specific word is in the sentence. I feel like this looks kind of like it's a grammatical mistake, since the same squiggly red line is used in Google Docs and many other platforms.

To me, I would suggest maybe a simple highlight of the word, or just a different text color. Or maybe just change the color of the squiggly line. It sometimes gets me confused. (I have seen others say the same)

[parfait8566]

You can use custom CSS.

To change the color:

[data-sc-content="example-sentence-a"] span {
  text-decoration: underline wavy blue !important;
}

Normal underline:

[data-sc-content="example-sentence-a"] span {
  text-decoration: underline red !important;
}

Personally, I like the default red squiggly line and didn't find it confusing so I don't think it should be changed.

[Morgawr]

Thanks for the custom CSS, that helps. I also am not a fan of the red squiggly line. I frequently share screenshots of yomitan dictionary definitions with people on discord and if I had to guess probably a good 50-70% of the time the conversation gets derailed by people asking "what's wrong with that sentence?" and "why is it marked as a mistake?" because everyone just assumes the squiggly lines are a mistake.

There's basically an implied UI code about certain things and we've been trained for decades now that red squiggly line = mistake. Even changing the color I think it's still a bit confusing (but better than red at least). I'd suggest maybe having just a single flat line and make it a different color (like light blue? green? I don't know, also no idea how it'd work across dark/light modes). Just my two cents.

[stephenmk]

Thank you all for the feedback. I think I'll change it to a double underline in the next version. This should hopefully be equally effective and less contentious.

The default thickness of the underlines will vary between different browsers, so I will need to submit a patch to Yomitan to ensure that it is displayed identically everywhere.

Click to expand image


[koiyakiya]

@stephenmk Thanks. I do have a question, though. Why does the underline have to be red by default? Is it some style youre trying to fit? Even the double underline gives that sense of incorrectness...

[stephenmk]

It needs to be a color that stands out and works well with both light and dark themes. I think it might become visually overwhelming if too many different colors are used at once, so I'd like to stick to one color as much as possible.

[bgs6]

How about highlighting the word red instead of underlining it ? Kind of what the midict addon does when you search for something:

Click to expand image


Or weblio:

Click to expand image


[bgs6]

I find any lines distracting and highlighting is more pleasant for me to look at.

Here is how it looks in red. I used the CSS from above.

[data-sc-content="example-sentence-a"] span {
  color: red; 
  text-decoration: none !important;
}

Click to expand image


[bgs6]

Another suggestion would be to make the text bold + underline it since the red highlight can be too conspicuous.

[data-sc-content="example-sentence-a"] span {
  font-weight: bold;
  text-decoration: underline !important;
}

Click to expand image


[koiyakiya]

I honestly prefer the bold + underline, to be honest.

[stephenmk]

I made a wiki page to explain how to add custom styles to Yomitan.

text-shadow seems like an interesting option. Yomitan would need to be patched to support that style if I want to use it in the dictionary by default.

[stephenmk]

The newest version of Jitendex for Yomitan uses a reddish font instead of the wavy line.

I'm planning to add a small amount of text shadow when Yomitan is updated to support that feature.

[stephenmk]

The current setup has grown on me, actually. Even though I submitted a patch for text-shadow support to Yomitan, I think I'll keep things simple and leave it as it is now.