Replace text-decoration with bottom-border in links with ruby text

[stephenmk]

There's an annoying bug in WebKit that causes the text decoration line to split when the link contains ruby text that is wider than the base ruby character. See the link to "慎重" in the image below to see what I mean. The line underneath 重 is not wide enough.

(This bug doesn't affect Firefox.)

I propose replacing the text decoration line with a bottom-border when a hyperlink contains ruby text. You might ask why we should limit it to only the links that contain ruby text. If we use a bottom border style all the time, then the external hyperlink icons (visible in the lower right corner) will also be underlined.

I also suggest adding a small amount of padding (text-underline-offset) to all hyperlinks. This is the same amount of padding (0.2rem) that GitHub uses in its hyperlink styles. It can help prevent 十 from looking like 士, for example.

Here's an image of the same entry with my proposed new styles.

[github-actions]

✔️ No visual differences introduced by this PR.

View Playwright Report (note: open the "playwright-report" artifact)

[stephenmk]

By the way, I don't have my heart set on having the underline thickness set to 2px. I guess it's usually 1px, which might look better.

[stephenmk]

OK, I updated the offset / thickness/ width values to derive from the --font-size-no-units variable as suggested. I also made the underline a little thinner than I had it before, which I think was a little too thick.