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.
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.
2
Answers
You can disable it in settings/Contents settings/Detect Units.
The web site can also disable it using the meta
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.