direction

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.

direction 属性は、<text> または <tspan> 要素のインラインベース方向を指定します。これは、text-anchor および inline-size プロパティで使用されるテキスト行の先頭と末尾の位置を定義します。また、unicode-bidi プロパティの値が embed または bidi-override のどちらかである場合、文字が配置される方向にも影響を与える可能性があります。

これは、インラインベース方向に対して垂直に配置された文字にのみ適用されます。これには、一般的な横書きのラテン文字やアラビア文字の場合、およびインラインベース方向に対して時計回りに 90 度回転させた狭幅セルの縦書きのラテン文字やアラビア文字の場合が含まれます。

多くの場合、双方向 Unicode アルゴリズムが自動的に望ましい結果を生成するため、そのような場合ではこの属性を指定する必要はありません。右書き言語を使用する場合など、その他の場合は、direction 属性を最外層の <svg> 要素に追加し、その方向をすべてのテキスト要素に継承することができることで十分である場合があります。

メモ: プレゼンテーション属性であるため、 direction には対応する CSS プロパティ direction もあります。両方が指定された場合、 CSS プロパティが優先されます。

この属性は次の SVG 要素に使用することができます。

例

html,
body,
svg {
  height: 100%;
}

html

<svg
  viewBox="0 0 600 72"
  xmlns="http://www.w3.org/2000/svg"
  direction="rtl"
  lang="fa">
  <text x="300" y="50" text-anchor="middle" font-size="36">
    داستان SVG 1.1 SE طولا ني است.
  </text>
</svg>