diff --git a/files/ja/web/css/text-emphasis-position/index.md b/files/ja/web/css/text-emphasis-position/index.md index e115cb9dbe4a12..98f23d463c1818 100644 --- a/files/ja/web/css/text-emphasis-position/index.md +++ b/files/ja/web/css/text-emphasis-position/index.md @@ -2,12 +2,12 @@ title: text-emphasis-position slug: Web/CSS/text-emphasis-position l10n: - sourceCommit: b82ff59aab7883b7bb2222cf9f9f9b6eed818e08 + sourceCommit: a7482281c4570bb7f932dce381f510d87ddf9924 --- {{CSSRef}} -**`text-emphasis-position`** は [CSS](/ja/docs/Web/CSS) のプロパティで、圏点が描かれる位置を設定します。ルビのテキストと同様、圏点のために十分な空間がない場合は、行の高さが広げられます。 +**`text-emphasis-position`** は [CSS](/ja/docs/Web/CSS) のプロパティで、圏点が描かれる位置を設定します。 [``](/ja/docs/Web/HTML/Element/ruby) 要素で描画されたテキストと同様、圏点のために十分な空間がない場合は、行の高さが広げられます。 {{EmbedInteractiveExample("pages/css/text-emphasis-position.html")}} @@ -15,14 +15,19 @@ l10n: ```css /* 初期値 */ -text-emphasis-position: over right; +text-emphasis-position: auto; /* キーワード値 */ +text-emphasis-position: over; +text-emphasis-position: under; + +text-emphasis-position: over right; text-emphasis-position: over left; text-emphasis-position: under right; text-emphasis-position: under left; text-emphasis-position: left over; +text-emphasis-position: right over; text-emphasis-position: right under; text-emphasis-position: left under; @@ -36,6 +41,15 @@ text-emphasis-position: unset; ### 値 +このプロパティは 1 つまたは 2 つの値を受け入れます。 + +- 指定された値が 1 つだけの場合、`auto`、`over`、`under` のいずれかになります。`over` または `under` のみが使用される場合、 `right` が既定位置として想定されます。 +- 2 つの値が指定された場合、 `over` か `under` のどちらかと `right` か `left` のどちらかが含まれていなければなりません。その順序は重要ではありません。 + +値には次のようなものがあります。 + +- `auto` + - : 横書きモードではテキストの上に、縦書きモードではテキストの右に圏点を描きます。 - `over` - : 横書きモードでテキストの上に圏点を描きます。 - `under` @@ -117,9 +131,99 @@ text-emphasis-position: unset; ## 例 +### 圏点の位置を追加 + +ドロップダウンメニューを使用して、圏点の位置を変更します。この操作により、 `
` 要素のクラスが変更され、テキスト上の圏点の位置が更新されます。 + +#### HTML + +```html hidden +

ブラウザーが auto の値に対応していません。

+