2024/10/31 時点の英語版に基づき更新

files/ja/web/css/text-emphasis-position/index.md

@@ -2,27 +2,32 @@
 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) のプロパティで、圏点が描かれる位置を設定します。 [`<ruby>`](/ja/docs/Web/HTML/Element/ruby) 要素で描画されたテキストと同様、圏点のために十分な空間がない場合は、行の高さが広げられます。
 
 {{EmbedInteractiveExample("pages/css/text-emphasis-position.html")}}
 
 ## 構文
 
 ```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;
 
 ## 例
 
+### 圏点の位置を追加
+
+ドロップダウンメニューを使用して、圏点の位置を変更します。この操作により、 `<section>` 要素のクラスが変更され、テキスト上の圏点の位置が更新されます。
+
+#### HTML
+
+```html hidden
+<p class="unsupported">ブラウザーが <code>auto</code> の値に対応していません。</p>
+<label for="position">圏点の位置:</position>
+<select id="position">
+  <option value="auto">auto</option>
+  <option value="over-right">over right</option>
+  <option value="over-left">over left</option>
+  <option value="under-right">under right</option>
+  <option value="under-left">under left</option>
+  <option value="preferred">preferred</option>
+</select>
+```
+
+```html
+<section id="setting" class="auto">
+  <p class="horizontal" lang="zh">你好世界</p>
+  <!-- Hello World in Chinese -->
+  <p class="vertical" lang="ja">世界、こんにちは。</p>
+  <!-- Hello World in Japanese -->
+</section>
+```
+
+#### CSS
+
+```css hidden
+.unsupported {
+  color: red;
+}
+@supports (text-emphasis-position: auto) {
+  .unsupported {
+    display: none;
+  }
+}
+.horizontal {
+  writing-mode: horizontal-tb;
+}
+.vertical {
+  writing-mode: vertical-rl;
+}
+section {
+  display: flex;
+  justify-content: space-around;
+}
+```
+
+```css
+section p {
+  text-emphasis: filled circle tomato;
+  text-emphasis-position: auto;
+}
+.over-right p,
+.preferred p [lang="ja"] {
+  text-emphasis-position: over right;
+}
+.over-left p {
+  text-emphasis-position: over left;
+}
+.under-right p,
+.preferred p [lang="zh"] {
+  text-emphasis-position: under right;
+}
+.under-left p {
+  text-emphasis-position: under left;
+}
+.preferred p [lang="ja"] {
+}
+```
+
+```js hidden
+const position = document.querySelector("#position");
+const setting = document.querySelector("#setting");
+const updateClass = () => {
+  const currentClass = setting.classList;
+  setting.classList.replace(currentClass, position.value);
+};
+position.addEventListener("change", updateClass);
+```
+
+#### 結果
+
+「圏点の位置」のドロップダウンを使用して、強調マークの位置を選べます。ドロップダウンで `preferred` オプションは、[解説](#解説)の節で説明したように、優先位置を使用します。
+
+{{EmbedLiveSample("Emphasis_mark_positions", 450, 250)}}
+
 ### ルビを圏点より優先させる場合
 
-編集者によっては、ルビと競合する場合に圏点を隠すことを好みます。 HTML では、これは次のスタイル規則で実現できます。
+編集者によっては、ルビと競合する場合に圏点を隠すことを好みます。 HTML では、これは次のスタイルルールで実現できます。
 
 ```css
 ruby {
@@ -151,4 +255,8 @@ em rt {
 
 ## 関連情報
 
-- 個別指定プロパティ {{cssxref("text-emphasis-style")}}, {{cssxref("text-emphasis-color")}} および対応する一括指定プロパティ {{cssxref("text-emphasis")}}
+- {{cssxref("text-underline-position")}}
+- {{cssxref("text-emphasis-style")}}
+- {{cssxref("text-emphasis-color")}}
+- {{cssxref("text-emphasis")}} 一括指定プロパティ
+- {{cssxref("writing-mode")}}