TextFormatUpdateEvent: getTextFormats() method
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental:This is anexperimental technology
Check theBrowser compatibility table carefully before using this in production.
ThegetTextFormats() method of theTextFormatUpdateEvent interface returns anArray ofTextFormat objects that represent the formats that anInput Method Editor (IME) window wants to apply to the text being composed.
Syntax
js
getTextFormats()Parameters
None.
Return value
AnArray containingTextFormat objects.
Examples
Styling IME-composed text
In the following example, thetextformatupdate event is used to update the formatting of the text in the editable region.
html
<canvas></canvas>js
const TEXT_X = 10;const TEXT_Y = 10;const canvas = document.getElementById("editor-canvas");const ctx = canvas.getContext("2d");const editContext = new EditContext();canvas.editContext = editContext;editContext.addEventListener("textformatupdate", (e) => { // Clear the canvas. ctx.clearRect(0, 0, canvas.width, canvas.height); // Render the text. ctx.fillText(editContext.text, TEXT_X, TEXT_Y); console.log(`Rendering text: ${editContext.text}`); // Get the text formats that the IME window wants to apply. const formats = e.getTextFormats(); // Iterate over the text formats for (const format of formats) { const { rangeStart, rangeEnd, underlineStyle, underlineThickness } = format; console.log( `Applying underline ${underlineThickness} ${underlineStyle} between ${rangeStart} and ${rangeEnd}.`, ); const underlineXStart = ctx.measureText( editContext.text.substring(0, rangeStart), ).width; const underlineXEnd = ctx.measureText( editContext.text.substring(0, rangeEnd), ).width; const underlineY = TEXT_Y + 3; // For brevity, this example only draws a simple underline. // Use underlineStyle and underlineThickness to draw the correct underline. ctx.beginPath(); ctx.moveTo(TEXT_X + underlineXStart, underlineY); ctx.lineTo(TEXT_X + underlineXEnd, underlineY); ctx.stroke(); }});Specifications
| Specification |
|---|
| EditContext API # dom-textformatupdateevent-gettextformats |