dir属性 - 文字の方向

公開日: 2017/02/21

dir属性は、要素のテキストの文字の方向について、ユーザーエージェントにヒントを与えるための属性です。

説明

dir属性は、文字の方向をユーザーエージェントに知らせます。列挙属性で、下記のキーワードから指定して下さい。この属性は文字レベルではなく要素レベルで適用されて、表示上はその方向に寄せられるだけです。例えば、rtlを指定したとしても、SYNCERという文字がRECNYSと、反対になって表示されるわけではありません。

lrt: 左から右。
rtl: 右から左。
auto: 言語によって、ブラウザが判断する。

HTML

<p dir="rtl">おはようございます。</p>

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】dir属性 - 文字の方向</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Global_attribute/dir/">
		<style>
			body {
				background-color: #fff ;
			}

			.wrapper {
				border: 1px solid #000 ;
				width: 300px ;
			}
		</style>
	</head>
	<body>

<p>dir属性は、文字の方向について、ブラウザにヒントを与えるための属性です。</p>

<div class="wrapper">
	<h2>dir=auto</h2>
	<p dir="auto">SYNCER</p>

	<h2>dir=ltr</h2>
	<p dir="ltr">SYNCER</p>

	<h2>dir=rtl</h2>
	<p dir="rtl">SYNCER</p>
</div>

	</body>
</html>

デモを開く

</head><body>までを含めて下さい。

<!DOCTYPE html> <html> <head> <base href="/818/"> <meta charset="utf-8"> <title>【デモ】dir属性 - 文字の方向</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Global_attribute/dir/"> </head> <body>

<p>dir属性は、文字の方向について、ブラウザにヒントを与えるための属性です。</p> <div class="wrapper"> <h2>dir=auto</h2> <p dir="auto">SYNCER</p> <h2>dir=ltr</h2> <p dir="ltr">SYNCER</p> <h2>dir=rtl</h2> <p dir="rtl">SYNCER</p> </div>

</div> <script>...</script> </body> </html>

<style>

body { background-color: #fff ; } .wrapper { border: 1px solid #000 ; width: 300px ; }

</style>

</script>