Sling Academy
Home/JavaScript/Customize Underlines and Colors via the CSS Custom Highlight API in JavaScript

Customize Underlines and Colors via the CSS Custom Highlight API in JavaScript

Last updated: December 12, 2024

In recent web development practices, an increasing emphasis is placed on enhancing user interaction and accessibility while maintaining a visually engaging experience. One way to achieve this is by customizing text highlights with unique styles through the CSS Custom Highlight API in conjunction with JavaScript. This API allows developers to define and control how text markings appear, facilitating unique underline styles, colors, and more, which provide an improved reading and use experience.

Understanding the CSS Custom Highlight API

The CSS Custom Highlight API is an exciting addition to modern web capabilities, allowing developers to define custom highlights that extend beyond the limited native browser text selection appearance. Using this API, developers can create named inline styles for text highlights that consistently apply to user interactions like text selection, searches, or annotations.

Setting Up Custom Highlights

To begin using the Custom Highlight API, you'll need to work with both JavaScript to define highlight types and CSS to specify their styles. The following steps guide you through setting custom highlights for underlines and colors using the API:

1. Define Your Highlights in JavaScript

The first step involves defining your custom highlight types in JavaScript using the CSS.highlights interface. Here is an example of how you can set up custom highlights:

// Define a new highlight
const myHighlight = new Highlight();

// Add a range of text - for example, the first word of a paragraph
document.querySelectorAll('p').forEach(p => {
  const range = document.createRange();
  range.setStart(p.firstChild, 0);
  range.setEnd(p.firstChild, 4);
  myHighlight.add(range);
});

// Register the custom highlight
document.getSelection().addHighlight(myHighlight);

2. Style Your Highlights with CSS

Once you have defined your highlight in JavaScript, you'll need to specify how it should be styled using CSS. The following CSS code demonstrates how to alter the style of the text highlight with distinct underline and color properties:

/* Define highlight style using ::highlight pseudo-element */
:highlight(myHighlight) {
  color: white; /* Text color */
  background-color: darkblue; /* Background color of highlight */
  text-decoration: underline dotted red; /* Custom underline style */
}

Applying Custom Highlights Dynamically

Expanding upon the basics, you can apply custom highlights dynamically as a user selects text or searches for terms within a document. This interaction can enhance applications like e-readers or document editors, allowing different semantic meanings or actions for varied highlight appearances. Consider the following example that adjusts text highlight upon a user's selection:

// Listen for text selection
const selection = window.getSelection();
document.addEventListener('selectionchange', () => {
  selection.getRangeAt(0).surroundContents(document.createElement('mark'));
});

CSS for the newfound <mark> element can further customize how it appears with the created CSS classes:

mark {
  background-color: yellow; /* Background of highlighted text when selecting */
  text-decoration: underline wavy green; /* Custom underline when selecting with wavy style */
}

Conclusion

The CSS Custom Highlight API is a valuable tool for developers seeking to enhance web content's visual appeal and usability. By allowing full control over text highlight appearance, this API makes it possible to apply distinctive design contexts where plain selection styles fall short. Whether for web-based readers, interactive documents, or other text-centric applications, leveraging this API can significantly enrich user experience by creating a pleasant visual flow of highlighted text on websites. The paragraph above has demonstrated a base that developers can enrich and adapt to match their application's intent.

Next Article: Add Contextual Emphasis with the CSS Custom Highlight API in JavaScript

Previous Article: Interactive Annotations Using the CSS Custom Highlight API in JavaScript

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