text-anchor

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

text-anchor は CSS のプロパティで、 inline-size プロパティから決定される折り返し領域にテキストの文字列を含むボックスを配置し、テキストを要素のアンカーポイントに対して相対的に配置します。アンカーポイントは、 x および y （または dx および dy）属性を使用して定義されます。 CSS プロパティの値が存在する場合、その値は要素の text-anchor 属性の値を上書きします。

要素内の個々のテキスト断片はそれぞれ独立して配置されます。したがって、複数行の <text> 要素では、 text-anchor の値に従ってテキストの各行が配置されます。 text-anchor の値は、 SVG の <text>、<textPath>、<tref>、<tspan> の各要素にのみ効果を持ちます。 text-anchor は自動的に折り返されたテキストには適用されません。その場合は、 text-align を参照してください。

構文

css
text-anchor: start;
text-anchor: middle;
text-anchor: end;

/* グローバル値 */
text-anchor: inherit;
text-anchor: initial;
text-anchor: revert;
text-anchor: revert-layer;
text-anchor: unset;

値

start

テキスト文字列のインライン方向の先頭位置がアンカーポイントと一致するようにテキストを配置します。この配置はテキストの書き出し方向に関連するものです。例えば、右から左へ、上から下へ書く言語では、テキストはアンカーポイントの左側に配置されます。多くのアジア言語のように、テキストのインライン方向が縦書きの場合、テキストの上端がアンカーポイントと一致します。

middle

テキスト文字列のインラインボックスの中央（中間）がアンカーポイントと揃うようにテキストを配置します。

end

テキスト文字列のインライン方向の末尾位置がアンカーポイントと一致するようにテキストを配置します。この配置はテキストの書き出し方向と相対的なものです。例えば、右から左へ、上から下へ書く言語では、テキストはアンカーポイントの右側に配置されます。多くのアジア言語のように、テキストのインライン方向が縦書きの場合、テキストの下端がアンカーポイントと一致します。

公式定義

初期値start
適用対象<text>, <textPath>, and <tspan> elements in <svg>
継承あり
計算値指定通り
アニメーションの種類離散値

形式文法

text-anchor = 
  start   |
  middle  |
  end

例

3 つの <text> 要素には同じ x 位置が指定されていますが、text-anchor の値はそれぞれ異なります。 3 つのアンカーポイントのすべてについて、 x 軸の位置を示す破線の赤い行が含まれます。

html
<svg
  viewBox="0 0 200 150"
  height="150"
  width="200"
  xmlns="http://www.w3.org/2000/svg">
  <line
    x1="100"
    y1="0"
    x2="100"
    y2="150"
    stroke="red"
    stroke-dasharray="10,5" />
  <text x="100" y="40">アンカーに配置</text>
  <text x="100" y="80">アンカーに配置</text>
  <text x="100" y="120">アンカーに配置</text>
</svg>
css
text:nth-of-type(1) {
  text-anchor: start;
}
text:nth-of-type(2) {
  text-anchor: middle;
}
text:nth-of-type(3) {
  text-anchor: end;
}

仕様書

Specification
Scalable Vector Graphics (SVG) 2
# TextAnchoringProperties

ブラウザーの互換性

BCD tables only load in the browser

関連情報