From 0d96a30c731f3b93028eff6f77f6fa5e0538045a Mon Sep 17 00:00:00 2001 From: estelle Date: Tue, 15 Jul 2025 15:45:41 +0200 Subject: [PATCH 1/9] updated to text decoration module --- .../web/css/css_text_decoration/index.md | 137 +++++++++++++----- 1 file changed, 99 insertions(+), 38 deletions(-) diff --git a/files/en-us/web/css/css_text_decoration/index.md b/files/en-us/web/css/css_text_decoration/index.md index 8bb4ccf748bb088..a43bbab6577a5b1 100644 --- a/files/en-us/web/css/css_text_decoration/index.md +++ b/files/en-us/web/css/css_text_decoration/index.md @@ -8,32 +8,25 @@ spec-urls: sidebar: cssref --- -The **CSS text decoration** module defines features relating to text decoration, such as underlines, text shadows, and emphasis marks. +{{CSSRef}} -## Reference +The **CSS text decoration** module defines features relating to text decoration, such as underlines, text shadows, and emphasis marks. text decoration features can provide visual cue for spelling errors, grammar issues, and links. These module's features can help improve the usability, accessibility, functionality, and aesthetics of your text. Text decoration features are especially useful for writing in languages like Japanese or Korean, where underline placement may differ from Latin-based text. -### Properties +Varying text decoration colors, styles, and thicknesses based on pseudo-classes and pseudo-elements can help differentiate emphasis without relying on color alone. -- {{cssxref("text-decoration")}} -- {{cssxref("text-decoration-color")}} -- {{cssxref("text-decoration-line")}} -- {{cssxref("text-decoration-skip")}} -- {{cssxref("text-decoration-skip-ink")}} -- {{cssxref("text-decoration-style")}} -- {{cssxref("text-decoration-thickness")}} -- {{cssxref("text-emphasis")}} -- {{cssxref("text-emphasis-color")}} -- {{cssxref("text-emphasis-position")}} -- {{cssxref("text-emphasis-style")}} -- {{cssxref("text-shadow")}} -- {{cssxref("text-underline-offset")}} -- {{cssxref("text-underline-position")}} +Features enable mimicing editorial and localization standards inherited from print media. Overlines or double underlines are commonly used for academic and editorial annotations. In the writing systems of some languages, overlines or underlines carry semantic meaning. CSS lets you adapt styling to cultural norms. -The specification also defines the `text-decoration-skip-box`, `text-decoration-skip-self`, `text-decoration-skip-spaces`, `text-decoration-trim`, and `text-emphasis-skip` properties, which are not yet supported by any browser. +A line-through can be used to indicate content status; informing users that content has been removed, or prices have been halved, enabling you to present both the original and updated content. -## Examples +Features like {{cssxref("text-decoration-skip-ink")}} can increase legibility by skipping descenders, {{cssxref("text-underline-offset")}} enables fine-tuning underline placement to match font metrics or design aesthetics, which can be especially useful for unique [typefaces](/en-US/docs/Web/CSS/CSS_fonts), while {{cssxref("text-shadow")}} colors that contrast with text {{cssxref("color")}} can make text visually pop when placed on a background with insufficient contrast. These features all help improve legibility and therefore accessibility; reducing visual noise and improving text clarity is especially helpful for users with dyslexia or low vision. -```css +## Text decoration in action + +```css hidden +p { + font-family: monospace; + margin: 1em 0; +} .under { text-decoration: underline red; } @@ -57,31 +50,98 @@ The specification also defines the `text-decoration-skip-box`, `text-decoration- .thick { text-decoration: solid underline purple 4px; } - -.blink { - text-decoration: blink; +.offset { + text-underline-offset: -5px; +} +.position { + text-underline-position: under; +} +.shadow { + text-shadow: red 4px 4px 0; +} +.emphasis { + text-emphasis: triangle red; } ``` -```html -

This text has a line underneath it.

-

This text has a line over it.

-

This text has a line going through it.

-

- This link will not be underlined, as links - generally are by default. Be careful when removing the text decoration on - anchors since users often depend on the underline to denote hyperlinks. -

-

This text has lines above and below it.

-

- This text has a really thick purple underline in supporting browsers. +```html hidden +

+ text-decoration: initial; (applied to a + Pretty link)

-

- This text might blink for you, depending on the browser you use. +

+ text-underline-offset: -5px; (applied to a + Pretty link) +

+ text-underline-position: under; (applied to a + Pretty link) +

+ text-decoration: none; (applied to a + Pretty link) +

+

text-decoration: underline red;

+

text-decoration: wavy overline lime;

+

text-decoration: line-through;

+

text-decoration: dashed underline overline;

+

text-decoration: solid underline purple 4px;

+

text-shadow: red 4px 4px 0;

+

text-emphasis: triangle red;

+

``` -{{EmbedLiveSample('Examples','auto','320')}} +{{EmbedLiveSample('Text decoration in action','auto','320')}} + +## Reference + +### Properties + +- {{cssxref("text-decoration")}} +- {{cssxref("text-decoration-color")}} +- {{cssxref("text-decoration-line")}} +- {{cssxref("text-decoration-skip")}} +- {{cssxref("text-decoration-skip-ink")}} +- {{cssxref("text-decoration-style")}} +- {{cssxref("text-decoration-thickness")}} +- {{cssxref("text-emphasis")}} +- {{cssxref("text-emphasis-color")}} +- {{cssxref("text-emphasis-position")}} +- {{cssxref("text-emphasis-style")}} +- {{cssxref("text-shadow")}} +- {{cssxref("text-underline-offset")}} +- {{cssxref("text-underline-position")}} + +The specification also defines the `text-decoration-skip-box`, `text-decoration-skip-self`, `text-decoration-skip-spaces`, `text-decoration-trim`, and `text-emphasis-skip` properties, which are not yet supported by any browser. + +### Values + +spelling-error +grammar-error + +## Guides + +## Related concepts + +- {{shadow}} +- line-stype + inline box + inline formatting context + letter spacing + word spacing + ruby annotation + ruby base + ruby container + first-letter + first-line + box fragment + box-decoration-break + ont-size + font-variant-position + ruby ## Specifications @@ -90,6 +150,7 @@ The specification also defines the `text-decoration-skip-box`, `text-decoration- ## See also - [CSS fonts](/en-US/docs/Web/CSS/CSS_fonts) module +- [CSS inline](/en-US/docs/Web/CSS/CSS_inline) module - [CSS ruby layout](/en-US/docs/Web/CSS/CSS_ruby_layout) module - [CSS text](/en-US/docs/Web/CSS/CSS_text) module - [CSS writing modes](/en-US/docs/Web/CSS/CSS_writing_modes) module From 22f3f28f84cedeffbd8361a5553308c2937895cf Mon Sep 17 00:00:00 2001 From: estelle Date: Fri, 18 Jul 2025 17:50:16 +0200 Subject: [PATCH 2/9] New module: CSS custom highlight API --- .../web/api/css/highlights_static/index.md | 1 + .../web/api/css_custom_highlight_api/index.md | 1 + .../web/api/highlight/highlight/index.md | 1 + files/en-us/web/api/highlight/index.md | 1 + files/en-us/web/api/highlight/type/index.md | 1 + .../en-us/web/api/highlightregistry/index.md | 1 + .../web/api/highlightregistry/set/index.md | 1 + files/en-us/web/api/range/range/index.md | 1 + .../web/css/_doublecolon_highlight/index.md | 3 +- .../web/css/css_custom_highlight_api/index.md | 104 ++++++++++++++++++ 10 files changed, 114 insertions(+), 1 deletion(-) create mode 100644 files/en-us/web/css/css_custom_highlight_api/index.md diff --git a/files/en-us/web/api/css/highlights_static/index.md b/files/en-us/web/api/css/highlights_static/index.md index 8d0c51c51d72f68..a5a59619a3a33a2 100644 --- a/files/en-us/web/api/css/highlights_static/index.md +++ b/files/en-us/web/api/css/highlights_static/index.md @@ -52,4 +52,5 @@ CSS.highlights.set("my-custom-highlight", myCustomHighlight); ## See also - {{domxref("css_custom_highlight_api", "The CSS Custom Highlight API", "", "nocode")}} +- [CSS custom highlight API](/en-US/docs/Web/CSS/CSS_custom_highlight_API) module - [CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web](https://css-tricks.com/css-custom-highlight-api-early-look/) diff --git a/files/en-us/web/api/css_custom_highlight_api/index.md b/files/en-us/web/api/css_custom_highlight_api/index.md index 9704cf10571c36f..9f99e9ae77304bd 100644 --- a/files/en-us/web/api/css_custom_highlight_api/index.md +++ b/files/en-us/web/api/css_custom_highlight_api/index.md @@ -237,3 +237,4 @@ The result is shown below. Type text within the search field to highlight matche - [CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web](https://css-tricks.com/css-custom-highlight-api-early-look/) - HTML [`contentEditable`](/en-US/docs/Web/HTML/Reference/Global_attributes/contenteditable) attribute - CSS {{cssxref("pseudo-elements")}} +- [CSS custom highlight API](/en-US/docs/Web/CSS/CSS_custom_highlight_API) module diff --git a/files/en-us/web/api/highlight/highlight/index.md b/files/en-us/web/api/highlight/highlight/index.md index b02fe12b27bed7f..8b80bd80f9cbce9 100644 --- a/files/en-us/web/api/highlight/highlight/index.md +++ b/files/en-us/web/api/highlight/highlight/index.md @@ -55,4 +55,5 @@ const highlight = new Highlight(range1, range2); ## See also - {{domxref("css_custom_highlight_api", "The CSS Custom Highlight API", "", "nocode")}} +- [CSS custom highlight API](/en-US/docs/Web/CSS/CSS_custom_highlight_API) module - [CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web](https://css-tricks.com/css-custom-highlight-api-early-look/) diff --git a/files/en-us/web/api/highlight/index.md b/files/en-us/web/api/highlight/index.md index 433cd4b3a48143b..578ab4c2c51103e 100644 --- a/files/en-us/web/api/highlight/index.md +++ b/files/en-us/web/api/highlight/index.md @@ -107,4 +107,5 @@ The following CSS code snippet demonstrates how to style the registered custom h ## See also - {{domxref("css_custom_highlight_api", "The CSS Custom Highlight API", "", "nocode")}} +- [CSS custom highlight API](/en-US/docs/Web/CSS/CSS_custom_highlight_API) module - [CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web](https://css-tricks.com/css-custom-highlight-api-early-look/) diff --git a/files/en-us/web/api/highlight/type/index.md b/files/en-us/web/api/highlight/type/index.md index 3c2326d4c0f415f..e3de3298e0bb934 100644 --- a/files/en-us/web/api/highlight/type/index.md +++ b/files/en-us/web/api/highlight/type/index.md @@ -46,4 +46,5 @@ spellErrorsHighlight.type = "spelling-error"; ## See also - {{domxref("css_custom_highlight_api", "The CSS Custom Highlight API", "", "nocode")}} +- [CSS custom highlight API](/en-US/docs/Web/CSS/CSS_custom_highlight_API) module - [CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web](https://css-tricks.com/css-custom-highlight-api-early-look/) diff --git a/files/en-us/web/api/highlightregistry/index.md b/files/en-us/web/api/highlightregistry/index.md index 2edd69657e8be9e..61ed6be52c10a7a 100644 --- a/files/en-us/web/api/highlightregistry/index.md +++ b/files/en-us/web/api/highlightregistry/index.md @@ -105,4 +105,5 @@ CSS.highlights.set("my-custom-highlight", highlight); ## See also - {{domxref("css_custom_highlight_api", "The CSS Custom Highlight API", "", "nocode")}} +- [CSS custom highlight API](/en-US/docs/Web/CSS/CSS_custom_highlight_API) module - [CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web](https://css-tricks.com/css-custom-highlight-api-early-look/) diff --git a/files/en-us/web/api/highlightregistry/set/index.md b/files/en-us/web/api/highlightregistry/set/index.md index 07caef0fac71583..a0c7cabc2a79007 100644 --- a/files/en-us/web/api/highlightregistry/set/index.md +++ b/files/en-us/web/api/highlightregistry/set/index.md @@ -65,4 +65,5 @@ CSS.highlights ## See also - {{domxref("css_custom_highlight_api", "The CSS Custom Highlight API", "", "nocode")}} +- [CSS custom highlight API](/en-US/docs/Web/CSS/CSS_custom_highlight_API) module - [CSS Custom Highlight API: The Future of Highlighting Text Ranges on the Web](https://css-tricks.com/css-custom-highlight-api-early-look/) diff --git a/files/en-us/web/api/range/range/index.md b/files/en-us/web/api/range/range/index.md index d84fb39c89bba70..8567b76d9bd7c0d 100644 --- a/files/en-us/web/api/range/range/index.md +++ b/files/en-us/web/api/range/range/index.md @@ -75,3 +75,4 @@ selection.addRange(range); - [The DOM interfaces index](/en-US/docs/Web/API/Document_Object_Model) - {{domxref("Document.createRange()")}} +- [CSS custom highlight API](/en-US/docs/Web/CSS/CSS_custom_highlight_API) module diff --git a/files/en-us/web/css/_doublecolon_highlight/index.md b/files/en-us/web/css/_doublecolon_highlight/index.md index a1dcd6d87ac5b30..411e6c589e3d690 100644 --- a/files/en-us/web/css/_doublecolon_highlight/index.md +++ b/files/en-us/web/css/_doublecolon_highlight/index.md @@ -124,5 +124,6 @@ for (let i = 0; i < textNode.textContent.length; i++) { ## See also -- [CSS custom highlight API](/en-US/docs/Web/API/CSS_Custom_Highlight_API) +- [CSS custom highlight API](/en-US/docs/Web/CSS/CSS_custom_highlight_API) module +- [CSS custom highlight](/en-US/docs/Web/API/CSS_Custom_Highlight_API) API - [CSS pseudo-elements](/en-US/docs/Web/CSS/CSS_pseudo-elements) module diff --git a/files/en-us/web/css/css_custom_highlight_api/index.md b/files/en-us/web/css/css_custom_highlight_api/index.md new file mode 100644 index 000000000000000..cc92e89c4df9b6d --- /dev/null +++ b/files/en-us/web/css/css_custom_highlight_api/index.md @@ -0,0 +1,104 @@ +--- +title: CSS custom highlight API +slug: Web/CSS/CSS_custom_highlight_API +page-type: css-module +spec-urls: https://drafts.csswg.org/css-highlight-api-1/ +sidebar: cssref +--- + +The **CSS custom highlight API** module provides a programmatic way of adding and removing highlights by applying styles to text based on range objects, accessed via the `::highlight()` pseudo element, without effect the underlying DOM structure. The features of this module enable styling text ranges on a webpage, such as text editing web apps highlight spelling or grammar errors, and code editors highlight syntax errors, enabling you to programmatically create text ranges and highlight them without affecting the DOM structure in the page. + +The CSS Custom Highlight API extends the concept of other highlight pseudo-elements such as {{cssxref('::selection')}}, {{cssxref('::spelling-error')}}, {{cssxref('::grammar-error')}}, and {{cssxref('::target-text')}} by providing a way to create and style arbitrary {{domxref('Range')}} objects, rather than being limited to browser-defined ranges. In other words, the CSS custom hightlight API makes it possible to apply CSS styles to arbitrary text ranges selected from JavaScript. + +## Custom highlight API in action + +To enable styling text ranges on a webpage using the CSS Custom Highlight API, you create a {{domxref("Range")}} object, then a {{domxref("Highlight")}} object for the range. After registering the highlight using the {{domxref("HighlightRegistry.set()")}} method, you can then select the range using the {{cssxref("::highlight", "::highlight()")}} pseudo-element. The name defined in the `set()` method is used as the parameter of the `::highlight()` pseudo-element selector to select that range.The range selected by the `::highlight()` pseudo-element can be styled using a limited number of properties. + +```html hidden +

Directions

+

Lincoln Memorial to Martin Luther King, Jr. Memorial

+
  1. + Head south on Lincoln Memorial Circle
  2. + Turn right toward Independence Ave
  3. + Turn left onto Independence Ave
  4. + Turn right onto West Basin Dr
  5. + Look up when you reach 64 Independence Ave! +
+
+ +``` + +This example uses the {{cssxref("text-decoration")}} property to cross out the `steps` highligh range defined by our JavaScript: + +```css +::highlight(steps) { + text-decoration: line-through; + color: blue; +} +``` + +We create a `Range`, with a start and end point (which is the same point in this case). We then set this range as the `Highlight` using the `set()` method of the CSS `highlights` interface extension. + +```js +let rangeToHighlight = new Range(); +const list = document.querySelector("ol"); +rangeToHighlight.setStart(list, 0); +rangeToHighlight.setEnd(list, 0); + +CSS.highlights.set("steps", new Highlight(rangeToHighlight)); +``` + +An event listener updates the end of the highlighted range when the number of completed steps changes: + +```js +const currentPositionSlider = document.querySelector("input"); +currentPositionSlider.addEventListener("change", function (e) { + rangeToHighlight.setEnd(list, e.target.value); +}); +``` + +{{ EmbedLiveSample('Custom highlight API in action', 700, 300) }} + +## Reference + +### Pseudo-elements + +- {{CSSXref("::highlight()")}} + +### Interfaces + +- {{domxref("Highlight")}} +- {{domxref("HighlightRegistry")}} + +### Interface extensions + +This module adds properties and methods to interfaces defined in other specifications. + +- {{domxref("CSS")}} + - {{domxref("CSS.highlights")}} + +## Guides + +- [CSS custom highlight API](/en-US/docs/Web/API/CSS_Custom_Highlight_API#concepts_and_usage) + - : The concepts and usage of the CSS custom highlight API, including creating `Range` and `Highlight` objects, registering the highlights using the `HighlightRegistry`, and styling the highlights using the `::highlight()` pseudo-element. + +## Related concepts + +- {{CSSXref("::grammar-error")}} +- {{CSSXref("::selection")}} +- {{CSSXref("::spelling-error")}} +- {{CSSXref("::target-text")}} +- {{domxref("Range")}} Interface and {{domxref("Range.range", "Range()")}} constructor +- [Text fragments](/en-US/docs/Web/URI/Reference/Fragment/Text_fragments) +- {{domxref("FragmentDirective")}} Interface + +## Specifications + +{{Specifications}} + +## See also + +- [CSS pseudo-element module](/en-US/docs/Web/CSS/CSS_pseudo-elements) +- [CSS Object Model (CSSOM)](/en-US/docs/Web/API/CSS_Object_Model) APIs From c42b9a321009be00d9613e68a7944a31f1a7536f Mon Sep 17 00:00:00 2001 From: estelle Date: Fri, 18 Jul 2025 17:53:24 +0200 Subject: [PATCH 3/9] revert from rebase --- .../web/css/css_text_decoration/index.md | 137 +++++------------- 1 file changed, 38 insertions(+), 99 deletions(-) diff --git a/files/en-us/web/css/css_text_decoration/index.md b/files/en-us/web/css/css_text_decoration/index.md index a43bbab6577a5b1..8bb4ccf748bb088 100644 --- a/files/en-us/web/css/css_text_decoration/index.md +++ b/files/en-us/web/css/css_text_decoration/index.md @@ -8,25 +8,32 @@ spec-urls: sidebar: cssref --- -{{CSSRef}} +The **CSS text decoration** module defines features relating to text decoration, such as underlines, text shadows, and emphasis marks. -The **CSS text decoration** module defines features relating to text decoration, such as underlines, text shadows, and emphasis marks. text decoration features can provide visual cue for spelling errors, grammar issues, and links. These module's features can help improve the usability, accessibility, functionality, and aesthetics of your text. Text decoration features are especially useful for writing in languages like Japanese or Korean, where underline placement may differ from Latin-based text. - -Varying text decoration colors, styles, and thicknesses based on pseudo-classes and pseudo-elements can help differentiate emphasis without relying on color alone. +## Reference -Features enable mimicing editorial and localization standards inherited from print media. Overlines or double underlines are commonly used for academic and editorial annotations. In the writing systems of some languages, overlines or underlines carry semantic meaning. CSS lets you adapt styling to cultural norms. +### Properties -A line-through can be used to indicate content status; informing users that content has been removed, or prices have been halved, enabling you to present both the original and updated content. +- {{cssxref("text-decoration")}} +- {{cssxref("text-decoration-color")}} +- {{cssxref("text-decoration-line")}} +- {{cssxref("text-decoration-skip")}} +- {{cssxref("text-decoration-skip-ink")}} +- {{cssxref("text-decoration-style")}} +- {{cssxref("text-decoration-thickness")}} +- {{cssxref("text-emphasis")}} +- {{cssxref("text-emphasis-color")}} +- {{cssxref("text-emphasis-position")}} +- {{cssxref("text-emphasis-style")}} +- {{cssxref("text-shadow")}} +- {{cssxref("text-underline-offset")}} +- {{cssxref("text-underline-position")}} -Features like {{cssxref("text-decoration-skip-ink")}} can increase legibility by skipping descenders, {{cssxref("text-underline-offset")}} enables fine-tuning underline placement to match font metrics or design aesthetics, which can be especially useful for unique [typefaces](/en-US/docs/Web/CSS/CSS_fonts), while {{cssxref("text-shadow")}} colors that contrast with text {{cssxref("color")}} can make text visually pop when placed on a background with insufficient contrast. These features all help improve legibility and therefore accessibility; reducing visual noise and improving text clarity is especially helpful for users with dyslexia or low vision. +The specification also defines the `text-decoration-skip-box`, `text-decoration-skip-self`, `text-decoration-skip-spaces`, `text-decoration-trim`, and `text-emphasis-skip` properties, which are not yet supported by any browser. -## Text decoration in action +## Examples -```css hidden -p { - font-family: monospace; - margin: 1em 0; -} +```css .under { text-decoration: underline red; } @@ -50,98 +57,31 @@ p { .thick { text-decoration: solid underline purple 4px; } -.offset { - text-underline-offset: -5px; -} -.position { - text-underline-position: under; -} -.shadow { - text-shadow: red 4px 4px 0; -} -.emphasis { - text-emphasis: triangle red; + +.blink { + text-decoration: blink; } ``` -```html hidden -

- text-decoration: initial; (applied to a - Pretty link) -

+```html +

This text has a line underneath it.

+

This text has a line over it.

+

This text has a line going through it.

- text-underline-offset: -5px; (applied to a - Pretty link) -

- text-underline-position: under; (applied to a - Pretty link) -

- text-decoration: none; (applied to a - Pretty link) -

-

text-decoration: underline red;

-

text-decoration: wavy overline lime;

-

text-decoration: line-through;

-

text-decoration: dashed underline overline;

-

text-decoration: solid underline purple 4px;

-

text-shadow: red 4px 4px 0;

-

text-emphasis: triangle red;

-

+ This link will not be underlined, as links + generally are by default. Be careful when removing the text decoration on + anchors since users often depend on the underline to denote hyperlinks. +

+

This text has lines above and below it.

+

+ This text has a really thick purple underline in supporting browsers. +

+

+ This text might blink for you, depending on the browser you use.

``` -{{EmbedLiveSample('Text decoration in action','auto','320')}} - -## Reference - -### Properties - -- {{cssxref("text-decoration")}} -- {{cssxref("text-decoration-color")}} -- {{cssxref("text-decoration-line")}} -- {{cssxref("text-decoration-skip")}} -- {{cssxref("text-decoration-skip-ink")}} -- {{cssxref("text-decoration-style")}} -- {{cssxref("text-decoration-thickness")}} -- {{cssxref("text-emphasis")}} -- {{cssxref("text-emphasis-color")}} -- {{cssxref("text-emphasis-position")}} -- {{cssxref("text-emphasis-style")}} -- {{cssxref("text-shadow")}} -- {{cssxref("text-underline-offset")}} -- {{cssxref("text-underline-position")}} - -The specification also defines the `text-decoration-skip-box`, `text-decoration-skip-self`, `text-decoration-skip-spaces`, `text-decoration-trim`, and `text-emphasis-skip` properties, which are not yet supported by any browser. - -### Values - -spelling-error -grammar-error - -## Guides - -## Related concepts - -- {{shadow}} -- line-stype - inline box - inline formatting context - letter spacing - word spacing - ruby annotation - ruby base - ruby container - first-letter - first-line - box fragment - box-decoration-break - ont-size - font-variant-position - ruby +{{EmbedLiveSample('Examples','auto','320')}} ## Specifications @@ -150,7 +90,6 @@ grammar-error ## See also - [CSS fonts](/en-US/docs/Web/CSS/CSS_fonts) module -- [CSS inline](/en-US/docs/Web/CSS/CSS_inline) module - [CSS ruby layout](/en-US/docs/Web/CSS/CSS_ruby_layout) module - [CSS text](/en-US/docs/Web/CSS/CSS_text) module - [CSS writing modes](/en-US/docs/Web/CSS/CSS_writing_modes) module From 74f0eb20467eb37194a9f1ba8933b960fc09551a Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Mon, 21 Jul 2025 10:08:59 +0200 Subject: [PATCH 4/9] Update files/en-us/web/css/css_custom_highlight_api/index.md Co-authored-by: Chris Mills --- files/en-us/web/css/css_custom_highlight_api/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/css_custom_highlight_api/index.md b/files/en-us/web/css/css_custom_highlight_api/index.md index cc92e89c4df9b6d..8378699b5df80c1 100644 --- a/files/en-us/web/css/css_custom_highlight_api/index.md +++ b/files/en-us/web/css/css_custom_highlight_api/index.md @@ -6,7 +6,7 @@ spec-urls: https://drafts.csswg.org/css-highlight-api-1/ sidebar: cssref --- -The **CSS custom highlight API** module provides a programmatic way of adding and removing highlights by applying styles to text based on range objects, accessed via the `::highlight()` pseudo element, without effect the underlying DOM structure. The features of this module enable styling text ranges on a webpage, such as text editing web apps highlight spelling or grammar errors, and code editors highlight syntax errors, enabling you to programmatically create text ranges and highlight them without affecting the DOM structure in the page. +The **CSS custom highlight API** module provides a programmatic way to target specific ranges of text defined by range objects, without affecting the underlying DOM structure. The range objects can then be selected via `::highlight()` pseudo-elements, and have highlight styles added and removed. The features of this module can create highlight effects similar to how text editors highlight spelling or grammar errors, and code editors highlight syntax errors. The CSS Custom Highlight API extends the concept of other highlight pseudo-elements such as {{cssxref('::selection')}}, {{cssxref('::spelling-error')}}, {{cssxref('::grammar-error')}}, and {{cssxref('::target-text')}} by providing a way to create and style arbitrary {{domxref('Range')}} objects, rather than being limited to browser-defined ranges. In other words, the CSS custom hightlight API makes it possible to apply CSS styles to arbitrary text ranges selected from JavaScript. From 2256f7ef9895c1a6021cc72b2f6f9e59abf58ded Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Mon, 21 Jul 2025 10:09:15 +0200 Subject: [PATCH 5/9] Update files/en-us/web/css/css_custom_highlight_api/index.md Co-authored-by: Chris Mills --- files/en-us/web/css/css_custom_highlight_api/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/css_custom_highlight_api/index.md b/files/en-us/web/css/css_custom_highlight_api/index.md index 8378699b5df80c1..8ea63050567fbdf 100644 --- a/files/en-us/web/css/css_custom_highlight_api/index.md +++ b/files/en-us/web/css/css_custom_highlight_api/index.md @@ -8,7 +8,7 @@ sidebar: cssref The **CSS custom highlight API** module provides a programmatic way to target specific ranges of text defined by range objects, without affecting the underlying DOM structure. The range objects can then be selected via `::highlight()` pseudo-elements, and have highlight styles added and removed. The features of this module can create highlight effects similar to how text editors highlight spelling or grammar errors, and code editors highlight syntax errors. -The CSS Custom Highlight API extends the concept of other highlight pseudo-elements such as {{cssxref('::selection')}}, {{cssxref('::spelling-error')}}, {{cssxref('::grammar-error')}}, and {{cssxref('::target-text')}} by providing a way to create and style arbitrary {{domxref('Range')}} objects, rather than being limited to browser-defined ranges. In other words, the CSS custom hightlight API makes it possible to apply CSS styles to arbitrary text ranges selected from JavaScript. +The CSS Custom Highlight API extends the concept of other highlight pseudo-elements such as {{cssxref('::selection')}}, {{cssxref('::spelling-error')}}, {{cssxref('::grammar-error')}}, and {{cssxref('::target-text')}} by providing a way to create arbitrary text ranges (defined as {{domxref('Range')}} objects in JavaScript) and style them via CSS, rather than being limited to browser-defined ranges. ## Custom highlight API in action From ba05af83697609ebd0bd675c135fd6918c848143 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Mon, 21 Jul 2025 10:14:13 +0200 Subject: [PATCH 6/9] Apply suggestions from code review Co-authored-by: Chris Mills --- files/en-us/web/css/css_custom_highlight_api/index.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/files/en-us/web/css/css_custom_highlight_api/index.md b/files/en-us/web/css/css_custom_highlight_api/index.md index 8ea63050567fbdf..8c5d34f6cb1c2d2 100644 --- a/files/en-us/web/css/css_custom_highlight_api/index.md +++ b/files/en-us/web/css/css_custom_highlight_api/index.md @@ -12,11 +12,11 @@ The CSS Custom Highlight API extends the concept of other highlight pseudo-eleme ## Custom highlight API in action -To enable styling text ranges on a webpage using the CSS Custom Highlight API, you create a {{domxref("Range")}} object, then a {{domxref("Highlight")}} object for the range. After registering the highlight using the {{domxref("HighlightRegistry.set()")}} method, you can then select the range using the {{cssxref("::highlight", "::highlight()")}} pseudo-element. The name defined in the `set()` method is used as the parameter of the `::highlight()` pseudo-element selector to select that range.The range selected by the `::highlight()` pseudo-element can be styled using a limited number of properties. +To enable styling text ranges on a webpage using the CSS Custom Highlight API, you create a {{domxref("Range")}} object, then a {{domxref("Highlight")}} object for the range. After registering the highlight using the {{domxref("HighlightRegistry.set()")}} method, you can then select the range using the {{cssxref("::highlight", "::highlight()")}} pseudo-element. The name defined in the `set()` method is used as the parameter of the `::highlight()` pseudo-element selector to select that range.The range selected by the `::highlight()` pseudo-element can be styled using a [limited number of properties](/en-US/docs/Web/CSS/::highlight#allowable_properties). ```html hidden

Directions

-

Lincoln Memorial to Martin Luther King, Jr. Memorial

+

Lincoln Memorial to Martin Luther King, Jr. Memorial

  1. Head south on Lincoln Memorial Circle
  2. Turn right toward Independence Ave
  3. @@ -30,7 +30,7 @@ To enable styling text ranges on a webpage using the CSS Custom Highlight API, y ``` -This example uses the {{cssxref("text-decoration")}} property to cross out the `steps` highligh range defined by our JavaScript: +This example uses the {{cssxref("text-decoration")}} property to strike throgh the `steps` highlight range defined by our JavaScript: ```css ::highlight(steps) { @@ -39,7 +39,7 @@ This example uses the {{cssxref("text-decoration")}} property to cross out the ` } ``` -We create a `Range`, with a start and end point (which is the same point in this case). We then set this range as the `Highlight` using the `set()` method of the CSS `highlights` interface extension. +We create a `Range` with a start and end node (which is the same node in this case). We then set this range as the `Highlight` using the `set()` method of the CSS `HighlightRegistry` interface. ```js let rangeToHighlight = new Range(); From da4a051506da71f34bbca4b2b58adc2bf9a02282 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Mon, 21 Jul 2025 10:20:48 +0200 Subject: [PATCH 7/9] Update files/en-us/web/css/css_custom_highlight_api/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> --- .../web/css/css_custom_highlight_api/index.md | 21 ++++++++++--------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/files/en-us/web/css/css_custom_highlight_api/index.md b/files/en-us/web/css/css_custom_highlight_api/index.md index 8c5d34f6cb1c2d2..e1cead89199a380 100644 --- a/files/en-us/web/css/css_custom_highlight_api/index.md +++ b/files/en-us/web/css/css_custom_highlight_api/index.md @@ -17,16 +17,17 @@ To enable styling text ranges on a webpage using the CSS Custom Highlight API, y ```html hidden

    Directions

    Lincoln Memorial to Martin Luther King, Jr. Memorial

    -
    1. - Head south on Lincoln Memorial Circle
    2. - Turn right toward Independence Ave
    3. - Turn left onto Independence Ave
    4. - Turn right onto West Basin Dr
    5. - Look up when you reach 64 Independence Ave! -
    -
    -