Translate CharacterBoundsUpdateEvent

files/ja/web/api/characterboundsupdateevent/characterboundsupdateevent/index.md

@@ -0,0 +1,40 @@
+---
+title: "CharacterBoundsUpdateEvent: CharacterBoundsUpdateEvent() コンストラクター"
+slug: Web/API/CharacterBoundsUpdateEvent/CharacterBoundsUpdateEvent
+l10n:
+  sourceCommit: a6f2a5b313727d983c369dec91c4c7418b1b4f74
+---
+
+{{APIRef("CharacterBoundsUpdateEvent API")}}{{SeeCompatTable}}
+
+**`CharacterBoundsUpdateEvent()`** コンストラクターは、新しい {{DOMxRef("CharacterBoundsUpdateEvent")}} オブジェクトを返します。
+
+## 構文
+
+```js-nolint
+new CharacterBoundsUpdateEvent(type)
+new CharacterBoundsUpdateEvent(type, options)
+```
+
+### 引数
+
+- `type`
+  - : イベントの種類を表す文字列です。とりうる値は `"characterboundsupdate"` です。
+- `options` {{optional_inline}}
+  - : 省略可能なオブジェクトで、以下のプロパティを持ちます。
+    - `rangeStart`
+      - : 編集可能なテキスト領域内のこのイベントが関係する始点の文字のオフセットを設定する数値です。
+    - `rangeEnd`
+      - : 編集可能なテキスト領域内のこのイベントが関係する終点の文字のオフセットを設定する数値です。
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}
+
+## 関連情報
+
+- 属する {{DOMxRef("CharacterBoundsUpdateEvent")}} インターフェイス

files/ja/web/api/characterboundsupdateevent/index.md

@@ -0,0 +1,96 @@
+---
+title: CharacterBoundsUpdateEvent
+slug: Web/API/CharacterBoundsUpdateEvent
+l10n:
+  sourceCommit: a4675b9077ae32f989c7ecac94f454db2653c4fc
+---
+
+{{APIRef("EditContext API")}}{{SeeCompatTable}}
+
+**`CharacterBoundsUpdateEvent`** インターフェイスは [DOM イベント](/ja/docs/Web/API/Event)で、{{domxref("EditContext")}} のインスタンスに関連付けられた編集可能な領域内の特定の各文字の境界を知るためのオペレーティングシステムからの要求を表します。
+
+このインターフェイスは、{{domxref("Event")}} からプロパティを継承しています。
+
+{{InheritanceDiagram}}
+
+## コンストラクター
+
+- {{domxref("CharacterBoundsUpdateEvent.CharacterBoundsUpdateEvent", "CharacterBoundsUpdateEvent()")}} {{experimental_inline}}
+  - : 新しい `CharacterBoundsUpdateEvent` オブジェクトを生成します。
+
+## インスタンスプロパティ
+
+- {{domxref('CharacterBoundsUpdateEvent.rangeStart')}} {{readonlyinline}} {{experimental_inline}}
+  - : 編集可能な領域内のテキストのうち、オペレーティングシステムが境界を要求している部分の始点となる文字のオフセットです。
+- {{domxref('CharacterBoundsUpdateEvent.rangeEnd')}} {{readonlyinline}} {{experimental_inline}}
+  - : 編集可能な領域内のテキストのうち、オペレーティングシステムが境界を要求している部分の終点となる文字のオフセットです。
+
+## 例
+
+### 必要に応じて各文字の境界を更新する
+
+この例では、`characterboundsupdate` イベントと `updateCharacterBounds` メソッドを用いて、オペレーティングシステムに要求された各文字の境界を知らせる方法を示しています。このイベントリスナーコールバックは、IME ウィンドウやその他のプラットフォーム固有の編集 UI を用いてテキストを変換しているときのみ呼ばれることに注意してください。
+
+```html
+<canvas id="editor-canvas"></canvas>
+```
+
+```js
+const FONT_SIZE = 40;
+const FONT = `${FONT_SIZE}px Arial`;
+
+const canvas = document.getElementById("editor-canvas");
+const ctx = canvas.getContext("2d");
+ctx.font = FONT;
+
+const editContext = new EditContext();
+canvas.editContext = editContext;
+
+function computeCharacterBound(offset) {
+  // テキストの頭から対象の文字までの幅を測定します。
+  const widthBeforeChar = ctx.measureText(
+    editContext.text.substring(0, offset),
+  ).width;
+
+  // 対象の文字の幅を測定します。
+  const charWidth = ctx.measureText(editContext.text[offset]).width;
+
+  const charX = canvas.offsetLeft + widthBeforeChar;
+  const charY = canvas.offsetTop;
+
+  // 文字の境界を表す DOMRect を返します。
+  return DOMRect.fromRect({
+    x: charX,
+    y: charY - FONT_SIZE,
+    width: charWidth,
+    height: FONT_SIZE,
+  });
+}
+
+editContext.addEventListener("characterboundsupdate", (e) => {
+  const charBounds = [];
+  for (let offset = e.rangeStart; offset < e.rangeEnd; offset++) {
+    charBounds.push(computeCharacterBound(offset));
+  }
+
+  // EditContext インスタンス内の各文字の境界を更新します。
+  editContext.updateCharacterBounds(e.rangeStart, charBounds);
+
+  console.log(
+    "The required character bounds are",
+    charBounds
+      .map((bound) => {
+        return `(x: ${bound.x}, y: ${bound.y}, width: ${bound.width}, height: ${bound.height})`;
+      })
+      .join(", "),
+  );
+});
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}

files/ja/web/api/characterboundsupdateevent/rangeend/index.md

@@ -0,0 +1,39 @@
+---
+title: "CharacterBoundsUpdateEvent: rangeEnd プロパティ"
+slug: Web/API/CharacterBoundsUpdateEvent/rangeEnd
+l10n:
+  sourceCommit: c9fe79713a9323e8f1492c3c5b802fc8776a5f6a
+---
+
+{{APIRef("EditContext API")}}{{SeeCompatTable}}
+
+読み取り専用プロパティ **`CharacterBoundsUpdateEvent.rangeEnd`** は、編集可能な領域内のテキストのうち、オペレーティングシステムが境界を要求している部分の終点となる文字のオフセットを表します。
+
+## 値
+
+{{jsxref("Number")}} です。
+
+## 例
+
+### `rangeEnd` の値を読み取る
+
+この例では、`characterboundsupdate` イベントを用いて `rangeStart` および `rangeEnd` プロパティの値を読み取る方法を示します。
+
+```js
+const editContext = new EditContext();
+editorElement.editContext = editContext;
+
+editContext.addEventListener("characterboundsupdate", (e) => {
+  console.log(
+    `The OS needs the bounds of the chars at ${e.rangeStart} - ${e.rangeEnd}.`,
+  );
+});
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}

files/ja/web/api/characterboundsupdateevent/rangestart/index.md

@@ -0,0 +1,39 @@
+---
+title: "CharacterBoundsUpdateEvent: rangeStart プロパティ"
+slug: Web/API/CharacterBoundsUpdateEvent/rangeStart
+l10n:
+  sourceCommit: c9fe79713a9323e8f1492c3c5b802fc8776a5f6a
+---
+
+{{APIRef("EditContext API")}}{{SeeCompatTable}}
+
+読み取り専用プロパティ **`CharacterBoundsUpdateEvent.rangeStart`** は、編集可能な領域内のテキストのうち、オペレーティングシステムが境界を要求している部分の始点となる文字のオフセットを表します。
+
+## 値
+
+{{jsxref("Number")}} です。
+
+## 例
+
+### `rangeStart` の値を読み取る
+
+この例では、`characterboundsupdate` イベントを用いて `rangeStart` および `rangeEnd` プロパティの値を読み取る方法を示します。
+
+```js
+const editContext = new EditContext();
+editorElement.editContext = editContext;
+
+editContext.addEventListener("characterboundsupdate", (e) => {
+  console.log(
+    `The OS needs the bounds of the chars at ${e.rangeStart} - ${e.rangeEnd}.`,
+  );
+});
+```
+
+## 仕様書
+
+{{Specifications}}
+
+## ブラウザーの互換性
+
+{{Compat}}