The feature "text-underline-position: under" is not functioning properly in Android Chrome

Take a look at this example 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>

The presentation on Android Chrome is not ideal, particularly the underline being cut off and intersecting with some descenders.

Check out the final outcome, which has been tested on Chrome version 93:

https://i.sstatic.net/7KWMZ.jpg

androidhtmlcssgoogle-chromemobile

Answer №1

It appears that the text is being cut off by the underline, so to adjust this, consider increasing the distance between the line and the text using the text-underline-offset property in CSS:

text-underline-offset = 2px

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

If you opt for the pixel version, you may need to fine-tune the 2px value, ensuring compatibility across various devices.

Note that a significant increase in offset could cause overlap with multi-lined text, so it's recommended to utilize this on single lines only, which seems to be the current scenario.

Switching the font type might also resolve the issue, as different fonts have varying heights that can affect spacing. It's worth exploring this option too.

For more information, refer to the documentation, as well as this helpful Stack Overflow question.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating responsive CSS layouts for various device sizes

My webpage features a form with a prompt for the input box, followed by the input box itself. I want to implement two different layouts based on the device accessing the page. For cell phones, I want everything stacked vertically. However, for computers, ...

htmlcssmedia-queries

What is the best way to ensure my image adjusts its width and height responsively?

How can I make my image responsive to the size of the container, adjusting not just the width but also the height to fit in a container with a max-width of 1300px? I have created a test image with dimensions of 400px height and 1300px width. Take a look a ...

css

Changing the color of the timePicker clock in material-ui: a step-by-step guide

I have been attempting to update the color of the time clock in my timeInput component (material-ui-time-picker) for material-ui, but unfortunately, it is not reflecting the change. Here is the code I am using: <TimeInput style ={heure} ...

javascriptcssreactjsmaterial-ui

Using jQuery to update the CSS class for all li icons except for the one that is currently selected

Utilizing Font Awesome Icons within the li elements of a ul Challenge When a user clicks on the user icon, the color changes from black to yellow. If the user clicks on another icon, that one also turns yellow. Is there a way to remove the existing yell ...

jquerycssfont-awesome

What is the process of sending a variable from PHP to HTML?

I am trying to pass a PHP variable to HTML. Here is the code I have created: <?php $neal = "mynema"; ?> Now, I want to pass this variable into my HTML like so: <html> <audio src="http://tts-api.com/tts.mp3?q=<?php echo $neal; ?>" ...

phphtml

Using the $.get() method within a loop of .each(), retrieve the specific $(this) value within the $.get function

Apologies for the poorly worded question, but I'm struggling to find a better way to phrase it. I'm currently working with a .each() loop where I need to update a specific css() parameter of each item in the loop. However, I can't seem to g ...

jqueryhtmlcssajax

What is the process of implementing a tree view hierarchy in PHP using CodeIgniter?

I have an array structured like this: Array ( [0] => Array ( [id] => 1 [child_name] => "Emma" [parent_name] => "Mr Brown" ) [1] => Array ( [id] => 2 ...

phphtmlarrayscodeigniter

Looking to recreate this style of table using HTML and CSS?

https://i.sstatic.net/nDrxq.png Trying to replicate the layout from this image for my blog, but struggling with the source code. Any suggestions on how to achieve a similar design without using divs within table rows? Looking for a cleaner solution. ...

htmlcssjekyllblogs

Looking to minimize the amount of HTML code in Angularjs by utilizing ng-repeat

Working with some HTML <tr class="matrix_row" ng-repeat="process in matrixCtrl.processes | filter : { park: parentIndex } track by $index"> <td class="properties" ng-click="dashboardCtrl.currParam=0; dashboardCtrl.currentProcess=process"> ...

javascripthtmlangularjsangularjs-ng-repeat

Utilizing a nested div structure for web design

Forgive my lack of expertise in web programming, as my knowledge is limited and I struggle with finding the right terms even through online searches. With that said, my question (which may be worded oddly due to my lack of familiarity with the topic) is: ...

htmlcssweb

rectifying file extension hyperlinks

While designing a webpage on my MacBook's local server, I unintentionally omitted the ".css" file extension in the href attribute of a link to my locally stored stylesheet. The mistake went unnoticed until I transferred my files to an externally hoste ...

htmlhostingwebserver

Using jQuery, Ajax, and HTML together can create dynamic

Is there a way to run JavaScript functions in an HTML file that is loaded using AJAX? The HTML file contains both text and JavaScript, but only the inline JavaScript seems to work (like onclick="dosomething();return false"). The pre-defined functions wra ...

javascriptjqueryhtmlajax

Having trouble parsing the JSON response from the server using Android Gson

While the Json is technically valid, when attempting to parse it with Gson, an error occurs: com.google.gson.JsonSyntaxException: java.lang.IllegalStateException: Expected BEGIN_OBJECT but encountered BEGIN_ARRAY at line 1 column 439 To view the enti ...

androidjsongsonandroid-json

problem with arranging photos and captions

When viewing this page in a narrow browser window, an issue arises with how the photo captions are displayed at the bottom of the page. It's evident that the caption extends past the right edge of the photo. My preference would be for the photo and c ...

htmlcss

Update the chosen option of the <select> element that was generated through PHP if there is a parameter value present in the URL

I'm currently working on a code snippet like this: <select name="id" id="id"> <OPTION VALUE="null">Select<OPTION> <? foreach ($genres as $row){ ?> <OPTION VALUE="<? echo $row->id; ?>"><? echo ...

phpcss

Convert incoming JSON with dynamically changing fields into a serialized format

I am facing an issue with fields in the JSON response that keep changing dynamically. While a portion of the response structure remains constant, allowing me to define a POJO for those fields, I am struggling to serialize the remainder of the response (co ...

androidjsonserializationdynamicgson

Attempting to locate an element using Selenium IDE proves to be challenging unless each command is executed individually

Currently, I am utilizing selenium ide for automating my tests. Once I click on a link, a popup window appears with a div containing text. Strangely, I am unable to retrieve the text within the div tag without either double-clicking on it or executing the ...

htmlseleniumtestingautomated-testsselenium-ide

Create a container div with a set width and height, and use

When wrapping a div, I typically rely on the overflow:hidden method. However, I am wondering if there are alternative methods to wrap divs that do not involve using hidden overflow. This is because I have some specific concerns that prevent me from utili ...

htmlcssoverflow

Looking for solutions to manage mouseenter, mouseleave events and ensuring content dropdowns stay visible in Vue.js 2?

Hey there, I'm trying to figure out how to keep dropdown content from disappearing when using @mouseenter and @mouseleave. Here's what I have so far: <div class="wrapper"> <div class="link" @mouseenter="show = ...

javascriptcssvue.jsvuejs2

Tips for effectively showcasing a span class field

Can someone help me with an issue I am having in Chrome browser where I am trying to display two "text text-pass" from HTML to my print console but it is not working? Any advice would be appreciated. Here is my browser HTML code: <a href="/abc/123" ...

javahtmlseleniumselenium-webdriverxpath