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

Adding padding below tags #45

Closed parfait8566 closed 8 months ago

parfait8566 commented 8 months ago

I wanted to change the look of the tags using this code:

[data-sc-code] {
  font-weight: normal !important;
  font-size: 1em !important;
  padding-bottom: 1em !important;
}

The first two settings work, but the third only makes the tags bigger instead of adding padding below. Am I missing some CSS option that would work?

parfait8566 commented 8 months ago

I used this code to make entries more compact:

.gloss-content {
  line-height: 1.05;
}

Removing it makes the tags look good even with the lack of padding so I don't really need a workaround anymore.

stephenmk commented 8 months ago

The [data-sc-code] selector works fine in Chromium for me but not in Firefox. I don't know why.

The effect of the padding styles varies from Firefox to Chromium. In Firefox the characters are a little above center, and in Chromium the characters are a little below. I had to compromise to make them look decent enough in both browsers. I'm sure that changing the font would have an effect on where they're displayed too. I might see if I can use the line-height style to get a more consistent appearance between browsers.