skip to Main Content

Chrome for iOS is detecting a number immediately followed by the letter “m” as a metres length unit, and it adds a dotted underline to it which when tapped offers a unit conversion feature.

Ideally I would like to disable this feature for certain parts of text. If that is not possible, disabling it for the whole document would be an OK compromise. A HTML or CSS solution is requested.

The solution must be A11y friendly (so no replacement characters) and not use JS. I am unable to edit the text, or change the “m“ at the end of the number, so no suggestions that require a change in markup of the text itself. A change in markup to tags around the text would be acceptable.

See images attached for further details of the UI of the feature, you’ll notice the auto-generated dotted underlines on numbers followed by a letter "m". Tapping any of those numbers results in seeing the unit conversion feature appear.

Chrome iOS auto-detecting numbers followed by the letter M as a unit of length in metres Chrome iOS's auto-detected unit conversion feature UI

I can’t find any documentation about this feature, I can’t even find the feature name. Searching Chrome’s dev blog yielded no useful results for me either, so if anyone can provide links to any articles about this feature or official documentation for it, that would be very appreciated too.

Here’s the raw HTML:

<div class="cell-text">
  <h5>5m tpy</h5>
  <p>Direct reduced iron production capacity</p>
  <hr>
  <h5>8,000+</h5>
  <p>Steel Professionals</p>
  <hr>
  <h5>$5.9bn</h5>
  <p>Total investments</p>
  <hr>
  <h5>450+</h5>
  <p>Steel grades</p>
  <hr>
  <h5>$100m</h5>
  <p>Invested in CSR projects</p>
</div>


UPDATE: I’ve added an image below of the UI displayed when tapping the "Report an issue" link at the bottom of the feature. It shows a feedback submission page which references Google, not Apple, which makes me think this is a Chrome feature, not an iOS one.

Unit conversion feature feedback link UI

2

Answers


  1. You can disable it in settings/Contents settings/Detect Units.

    The web site can also disable it using the meta

    <meta name="chrome" content="nointentdetection">
    
    Login or Signup to reply.
  2. I just spent several days banging my head on the computer over this new "feature". It appears to be, in some fashion, causing a removeNode error upon re-renders in MUI (react). I had a <Typography> component with child text containing the words "25 miles" that kept crapping out my application if the component re-rendered. I solved by replacing the child of my <Typography> component with a template literal.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search