search

stephenmk / Jitendex

A free, offline, and openly licensed Japanese-to-English dictionary. Updates weekly!
https://jitendex.org
Creative Commons Attribution Share Alike 4.0 International
248 stars 2 forks source link

Broken pronunciation button styling (mdict) #100

Closed epistularum closed 2 months ago

epistularum commented 2 months ago

Jitendex v. 2024-06-24 goldendict-ng v 24.05.05

The styling for the pronunciation button is broken in the mdict version.

image

stephenmk commented 2 months ago

The current style I'm using produces a differently shaped oval depending on the font that's being used. I think the problem has something to do with the inherent line height of a given font, but I'm not sure.

I've started using a clip-path: circle(); style instead whenever I need to render circular icons. This style produces a perfect circle regardless of the font. I forgot to fix the audio button here, so thanks for letting me know.

If you want to edit your local copy of the jitendex.css stylesheet, this class should make it look a little nicer. It won't look exactly the same because I'm not sure how to achieve the same appearance as the old style using only CSS. I think I'd probably need to replace it with an embedded SVG image.

.play-button {
    margin-right: 0.5em;
    display: inline-block;
    background: radial-gradient(white, silver);
    padding: 0em 0.15em 0em 0.25em;
    clip-path: circle();
}

button

epistularum commented 2 months ago

It looks much better, thank you very much.