SYNCERのロゴ
アイキャッチ画像

translate属性 - 翻訳のヒント

translate属性は、要素の内容を翻訳するべきか否か、ユーザーエージェントにヒントを与えるための属性です。翻訳アプリケーションによっては、ヒントに従って翻訳をしてくれるでしょう。

概要

DOM Interface
HTMLElement.translate
仕様書
https://html.spec.whatwg.org/multipage/dom.html#the-translate-attribute

属性には3つのstate(状態)が存在します。

yes
翻訳の対象になる。
no
翻訳の対象にならない。
inherit
デフォルトの状態。祖先要素の値を継承する。

指定した値によって、stateが決定されます。

state
"yes"yes
"no"no
"" (空の値)yes
欠損値inherit
属性なしinherit
<p translate>Good Morning!</p>
<p translate="yes">Good Morning!</p>
<p translate="no">Good Morning!</p>

デモ

translate属性のデモを用意しました。このデモページをGoogle翻訳にかけた結果を確認しておきましょう。

<!DOCTYPE html>
<html>
<head>
	<title>translate属性のデモ</title>
</head>
<body>
<h2>translate</h2>
<p translate>Good Morning!</p>

<h2>translate=yes</h2>
<p translate="yes">Good Morning!</p>

<h2>translate=no</h2>
<p translate="no">Good Morning!</p>
</body>
</html>

サポート状況

クリックすると、バージョンごとの対応状況を確認できます。

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
19+× 6.0+×× 15+ 6.0+ 4.4+
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年9月23日 (土)
コンテンツを公開しました。