-1

Here's a sample page:

    html,
    body {
      margin: 0;
      padding: 0;
    }

    header {
      padding: 16px 0;
      text-align: center;
      background: black;
    }

    header img {
      width: 234px;
      height: 222px;
      vertical-align: bottom;
    }

    li {
      background: url('images/WhatsApp.png') no-repeat right;
      padding: 30px 50px;
      list-style: none;
    }

    a {
      font: bold 32px Calibri;
      color: black;
      text-underline-position: under;
    }
<html dir="rtl" lang="fa">
<header>
    <img src="logo.png" alt="Logo">
  </header>
  <main>
    <ul>
      <li><a href="https://chat.whatsapp.com/LyXl3gwellfIiB2V9JJXRy" title="گروه اطّلاع‌رسانی">گروه اطّلاع‌رسانی</a></li>
      <li><a href="https://wa.me/message/ZDX7YVUP6NBCJ1" title="ارسال تکالیف">ارسال تکالیف</a></li>
    </ul>
  </main>

It doesn't look good on Android Chrome, i.e. the underline is cut and crosses some descenders.

Here's the final result, which I tested on the latest version of Chrome, 93:

enter image description here

Mori
  • 8,137
  • 19
  • 63
  • 91

1 Answers1

1

I see that the text is cut on the letters that tend to intersect with the underline; so you can increase the offset between the line and the text using text-underline-offset property in CSS:

text-underline-offset = 2px

/* or */
text-underline-offset: 0.1em;

If you used the pixel version, you probably need to manipulate the 2px a bit, but make sure to test that on different devices.

Make sure that if you increase this offset much, then you'd get them intersected with the text in case you have a multi-lined text. I recommend to use it on a single line of text, and that is already your case.

This issue also might be solved if you change the font type, as the height of fonts differs from one typeface to another, so you can check this as well.

For further research check the documentation, and this SO question.

Zain
  • 37,492
  • 7
  • 60
  • 84
  • Thanks for your suggestions, but I don't understand why it doesn't work properly on Chrome for Android while the [browser compatibility table](https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-position#browser_compatibility) says it's well supported. I would call it a bug. – Mori Sep 22 '21 at 09:14