Hi, the Ohm’s Law page on my website is being detected as Italian. When I click translate, it breaks some of the units in the options by changing them to nonsense.
I tracked the offending code to line 149:
<div translate="no">Power (P)</div>
For some reason, several browsers detect this string as Italian but not the units that the translation actually changes. When I remove this line, the browser doesn’t offer to translate and everything looks fine.
What’s going on here?
Ohm’s Law Calculator
Hi,
I was about to recommend setting a lang
attribute on your <html>
element, but I see that you have done that.
None of the browsers I tried are offering to translate this page. Which browser/OS combo are you using to get this behaviour?
1 Like
The issue occurs with Edge and Brave browsers on both Android and Windows OS.
Thanks. I could reproduce in Edge.
I started removing parts of your page to make a minimum reproducible example, but for me, it was very hit or miss if the browser offered to translate.
This was the minimum I could boil it down to. If I remove anything else, then the translation popup doesn’t appear.
<!DOCTYPE html>
<html lang="en">
<head>
<base href="https://webapps.software/calculators/electrical/" />
<meta charset="UTF-8">
<title>Ohm's Law Calculator</title>
</head>
<body>
<div>Resistance (R)</div>
<div class="calculatorInput">
<label for="resistance"></label>
<input type="number" id="resistance" step="any" required oninput="calculate()">
<label for="resistancePrefix"></label>
<select id="resistancePrefix" onchange="calculate()">
<option value="1e24">YΩ</option>
<option value="1e21">ZΩ</option>
<option value="1e18">EΩ</option>
<option value="1e15">PΩ</option>
<option value="1e12">TΩ</option>
<option value="1e9">GΩ</option>
<option value="1e6">MΩ</option>
<option value="1e3">kΩ</option>
<option value="1" selected>Ω</option>
<option value="1e-3">mΩ</option>
<option value="1e-6">µΩ</option>
<option value="1e-9">nΩ</option>
<option value="1e-12">pΩ</option>
<option value="1e-15">fΩ</option>
<option value="1e-18">aΩ</option>
<option value="1e-21">zΩ</option>
<option value="1e-24">yΩ</option>
</select>
</div>
<div>Current (I)</div>
<div class="calculatorInput">
<label for="current"></label>
<input type="number" id="current" step="any" required oninput="calculate()">
<label for="currentPrefix"></label>
<select id="currentPrefix" onchange="calculate()">
<option value="1e24">YA</option>
<option value="1e21">ZA</option>
<option value="1e18">EA</option>
<option value="1e15">PA</option>
<option value="1e12">TA</option>
<option value="1e9">GA</option>
<option value="1e6">MA</option>
<option value="1e3">kA</option>
<option value="1" selected>A</option>
<option value="1e-3">mA</option>
<option value="1e-6">µA</option>
<option value="1e-9">nA</option>
<option value="1e-12">pA</option>
<option value="1e-15">fA</option>
<option value="1e-18">aA</option>
<option value="1e-21">zA</option>
<option value="1e-24">yA</option>
</select>
</div>
<div>Power (P)</div>
<div class="calculatorInput">
<label for="power"></label>
<input type="number" id="power" step="any" required oninput="calculate()">
<label for="powerPrefix"></label>
<select id="powerPrefix" onchange="calculate()">
<option value="1e24">YW</option>
<option value="1e21">ZW</option>
<option value="1e18">EW</option>
<option value="1e15">PW</option>
<option value="1e12">TW</option>
<option value="1e9">GW</option>
<option value="1e6">MW</option>
<option value="1e3">kW</option>
<option value="1" selected>W</option>
<option value="1e-3">mW</option>
<option value="1e-6">µW</option>
<option value="1e-9">nW</option>
<option value="1e-12">pW</option>
<option value="1e-15">fW</option>
<option value="1e-18">aW</option>
<option value="1e-21">zW</option>
<option value="1e-24">yW</option>
</select>
</div>
<div>
<label for="unitPrefix">Result Prefix:</label>
<select id="unitPrefix" onchange="calculate()">
<option value="1e24">Y (Yotta) (10^24)</option>
<option value="1e21">Z (Zetta) (10^21)</option>
<option value="1e18">E (Exa) (10^18)</option>
<option value="1e15">P (Peta) (10^15)</option>
<option value="1e12">T (Tera) (10^12)</option>
<option value="1e9">G (Giga) (10^9)</option>
<option value="1e6">M (Mega) (10^6)</option>
<option value="1e3">k (Kilo) (10^3)</option>
<option value="1" selected></option>
<option value="1e-3">m (Milli) (10^-3)</option>
<option value="1e-6">µ (Micro) (10^-6)</option>
<option value="1e-9">n (Nano) (10^-9)</option>
<option value="1e-12">p (Pico) (10^-12)</option>
<option value="1e-15">f (Femto) (10^-15)</option>
<option value="1e-18">a (Atto) (10^-18)</option>
<option value="1e-21">z (Zepto) (10^-21)</option>
<option value="1e-24">y (Yocto) (10^-24)</option>
</select>
</div>
</body>
</html>
I have no idea why this is happening. There is some combination of words in that page that is causing Edge to behave like it does.
You can however stop the browser offering to translate anything by adding the following line to the head of the document.
<meta name="google" content="notranslate">
Is that good enough for your use case?
2 Likes
The meta tag you provided is an acceptable workaround. It has something to do with the power units in watts because this is the only page that has these units.
ChatGPT suggested it was because of the prefix and suffix each being one letter (nW, mW, etc.) and said I should change it to the word like nanowatt. The abbreviated notation is standard so I’ll keep looking for a fix. The odd part is removing only the words “Power (W)” doesn’t trigger a translate.
Thanks for the help.
1 Like