Sling Academy
Home/JavaScript/Highlight Text Selections with the CSS Custom Highlight API in JavaScript

Highlight Text Selections with the CSS Custom Highlight API in JavaScript

Last updated: December 12, 2024

The CSS Custom Highlight API is a powerful feature that allows developers to customize the appearance of text selections, making it easier to differentiate between various types of highlights within web applications. This article will guide you through the process of using the Custom Highlight API in combination with JavaScript to create stunning text highlights for your web content.

Understanding the CSS Custom Highlight API

The CSS Custom Highlight API, part of the Editing Content Categories in CSS, allows developers to highlight text selections using CSS in a more nuanced way than the standard ::selection pseudo-element. It introduces a new concept, the <highlight> element type, which lets you assign multiple highlights to text and style them differently.

Basic Setup and Requirements

To get started with the CSS Custom Highlight API, ensure that your development environment supports it. As of writing, support for this API is present in modern browsers like Chrome, Edge (starting from version 81), and future versions of Firefox. Keep your browsers updated to the latest versions for full support.

Implementing CSS Custom Highlight in JavaScript

Here's how you can implement custom highlights in JavaScript:


// First, ensure the browser supports the highlight API
if ('highlight' in document) {
  // Define a custom highlight CSS style
  const customHighlightColor = document.createElement('style');
  customHighlightColor.innerHTML = `
    ::highlight(your-custom-highlight) {
      background-color: yellow;
      color: black;
    }
  `;
  document.head.appendChild(customHighlightColor);

  // Access the highlight object to add highlights
  let highlight = window.getSelection().modifyHighlight();

  // Dummy text node and range
  const textNode = document.createTextNode('Highlight this text using JavaScript!');
  document.body.appendChild(textNode);
  const range = new Range();
  range.setStart(textNode, 0);
  range.setEnd(textNode, textNode.length);

  // Create a new highlight registry and add the custom highlight
  const highlightRegistry = new HighlightRegistry();
  highlightRegistry.add('myHighlight', { range });

  // Apply the highlight
  highlight.apply(range, 'myHighlight');
}

Step-by-Step Breakdown

1. Feature Detection: Start by checking if the browser supports this feature by verifying 'highlight' in document. Feature detection is crucial to prevent errors in unsupported environments.

2. Define Custom Styles: Use the <style> element to define a new CSS rule block named ::highlight(your-custom-highlight). This is similar to how pseudo-elements are used, defining a special selector for your highlights.

3. Setup and Apply Highlights: Create a Range object associated with the text you want to highlight. Then, use the HighlightRegistry to manage these styles globally, applying the particular highlight style to the targeted text using modifyHighlight and apply methods.

Advantages of Using the Custom Highlight API

  • Enhanced control over text selection looks and feels in web applications.
  • Support for multiple concurrent text selections within a document.
  • Consistency and clarity in web content presentation, particularly for applications involving reading, editing, or interactive learning.

Styling Options with CSS

The Custom Highlight API allows nearly all standard CSS properties, making it a versatile choice for developers looking to leverage modern web styling techniques. Consider dynamically altering background-color, font-weight, or text-shadow for even greater visual effectiveness.

Conclusion

The CSS Custom Highlight API brings new possibilities to web developers, allowing for visually dynamic and contextually relevant text annotations within the browser. By following the examples and guidance provided, you can enhance your application today with custom highlights tailored to your users' needs.

Next Article: Define Custom Highlights with the CSS Custom Highlight API in JavaScript

Previous Article: Orchestrating a Polyglot Web App with Combined Background APIs

Series: Web APIs – JavaScript Tutorials

JavaScript

You May Also Like

  • Handle Zoom and Scroll with the Visual Viewport API in JavaScript
  • Improve Security Posture Using JavaScript Trusted Types
  • Allow Seamless Device Switching Using JavaScript Remote Playback
  • Update Content Proactively with the JavaScript Push API
  • Simplify Tooltip and Dropdown Creation via JavaScript Popover API
  • Improve User Experience Through Performance Metrics in JavaScript
  • Coordinate Workers Using Channel Messaging in JavaScript
  • Exchange Data Between Iframes Using Channel Messaging in JavaScript
  • Manipulating Time Zones in JavaScript Without Libraries
  • Solving Simple Algebraic Equations Using JavaScript Math Functions
  • Emulating Traditional OOP Constructs with JavaScript Classes
  • Smoothing Out User Flows: Focus Management Techniques in JavaScript
  • Creating Dynamic Timers and Counters with JavaScript
  • Implement Old-School Data Fetching Using JavaScript XMLHttpRequest
  • Load Dynamic Content Without Reloading via XMLHttpRequest in JavaScript
  • Manage Error Handling and Timeouts Using XMLHttpRequest in JavaScript
  • Handle XML and JSON Responses via JavaScript XMLHttpRequest
  • Make AJAX Requests with XMLHttpRequest in JavaScript
  • Customize Subtitle Styling Using JavaScript WebVTT Integration