Script Architecture: Structural Visual Anchors for PressReader

Problem

The script is intended as an English reading aid rather than a grammar checker. During reading, I frequently skip over short function words (articles and prepositions), especially in long sentences. This often weakens sentence parsing even though the vocabulary itself is understood.

PressReader presents the same article in two different layouts:

• Full article view (root-container)
• Popup article view (pop-in)

The original script only searched fixed container IDs, so highlighting failed whenever PressReader rendered the article inside a different layout.

Goal

Highlight structural function words without affecting readability.

The highlights should:

• remain visually subtle;
• survive dynamic article loading;
• work identically in both popup and full-page readers;
• automatically adapt if PressReader changes container IDs.

Design

Instead of targeting specific container IDs, the script searches for actual article paragraphs:

p.article-text

Or

.article-text

These elements exist in both rendering modes, making them a stable semantic target instead of a fragile layout-dependent one.

For each paragraph:

1. Traverse all text nodes.
2. Match predefined function words using a regular expression.
3. Create Range objects for every match.
4. Register the ranges with the CSS Highlight API.
5. Apply a light dotted underline so the text remains completely readable.

A MutationObserver rescans the document after dynamic content updates, ensuring newly opened articles are highlighted automatically.

Rationale

This approach intentionally depends on content semantics rather than page structure.

PressReader frequently changes wrapper elements (root-container, pop-in, dialogs, panels, etc.), but article paragraphs consistently retain the article-text class. Anchoring the scan to the text itself makes the script significantly more robust while reducing maintenance whenever the site’s UI changes.