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

dir属性 - 文字の方向

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

概要

要素
bdi要素
bdo要素
DOM Interface
HTMLElement.dir
仕様書
https://html.spec.whatwg.org/multipage/dom.html#the-dir-attribute

文字の方向を表すキーワードを下記から指定する。欠損値は存在しません。

lrt
左から右。
rtl
右から左。
auto
ユーザーエージェントが文字を解析して判断する。解析方法は要素内の最初のキーワードを参照するだけで精度が粗いため、この値は最終的に使用するべき。
<p dir="rtl">おはようございます。</p>

デモ

dir属性のデモです。

<!-- このコードは編集できます。 -->

<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>

サポート状況

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

FeaturesChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
dir属性
ltr××
rtl××
auto 20+××
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年9月23日 (土)
コンテンツを公開しました。