CharacterBoundsUpdateEvent
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The CharacterBoundsUpdateEvent
interface is a DOM event
that represents a request from the operating system to know the bounds of certain characters within an editable region that's attached to an EditContext
instance.
This interface inherits properties from Event
.
Constructor
CharacterBoundsUpdateEvent()
Experimental-
Creates a new
CharacterBoundsUpdateEvent
object.
Instance properties
CharacterBoundsUpdateEvent.rangeStart
Read only Experimental-
The offset of the first character within the editable region text for which the operating system needs the bounds.
CharacterBoundsUpdateEvent.rangeEnd
Read only Experimental-
The offset of the last character within the editable region text for which the operating system needs the bounds.
Examples
Updating the character bounds when needed
This example shows how to use the characterboundsupdate
event and the updateCharacterBounds
method to inform the operating system of the character bounds it requires. Note that the event listener callback is only called when using an IME window, or other platform-specific editing UI surfaces, to compose text.
<canvas id="editor-canvas"></canvas>
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) {
// Measure the width from the start of the text to the character.
const widthBeforeChar = ctx.measureText(
editContext.text.substring(0, offset),
).width;
// Measure the character width.
const charWidth = ctx.measureText(editContext.text[offset]).width;
const charX = canvas.offsetLeft + widthBeforeChar;
const charY = canvas.offsetTop;
// Return a DOMRect representing the character bounds.
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));
}
// Update the character bounds in the EditContext instance.
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
Specification |
---|
EditContext API # dom-characterboundsupdateevent |
Browser compatibility
BCD tables only load in the browser