ブラウザ翻訳、便利だけどたまに余計なことする😡
ブラウザの自動翻訳、英語のページ読むときとか助かりますよね。
ただ、翻訳してほしくないところまで変わっちゃうことがある。
translate="no" で防げる
<span translate="no">翻訳しないでね</span>
これだけ。translate="no" を付けた要素の中身は、ブラウザ翻訳の対象外になる。
HTML のグローバル属性なので、どの要素にも使える。
実際に比較してみた
英語の簡単な文章を2つ並べて、片方だけ人名に translate="no" を付けた状態でブラウザの日本語翻訳をかけてみる。
翻訳前
どちらも同じ英語の文章。
翻訳後
上の「translate="no" なし」は人名の Bob や Alice も含めて全部日本語に変わってしまう。
下の「translate="no" あり」は Bob と Alice がそのまま残って、それ以外だけ翻訳されている。
正直、文章全体の翻訳精度が完璧になるわけではない。ただ、固有名詞やコードなど「ここだけは絶対に変えてほしくない」という部分を守れるだけでも、翻訳結果がだいぶマシになるケースはある。
<p>
<span translate="no">Bob</span> is going out by car today.
After that, <span translate="no">Bob</span> plans to visit
his friend <span translate="no">Alice</span>.
</p>
まとめ
- 翻訳されたくないテキストには
translate="no"を付ける - どの HTML 要素にも使える
- 付けて壊れることはないので、迷ったら付けておく
万能ではないけど、翻訳で意図しない変換がされて困った経験がある人は、必要に応じて使ってみるのはありですね☺️