The Palos Publishing Company

Follow Us On The X Platform @PalosPublishing
Categories We Write About

Create a PDF highlighter tool

Written by

Bernardo Palos

in

Creating a PDF highlighter tool involves building functionality that allows users to open a PDF file, select text, and highlight it in a different color. Depending on your target platform (web, desktop, mobile), the implementation varies significantly.

Here’s a simplified overview and example of how you could create a web-based PDF highlighter tool using JavaScript with the popular PDF.js library and HTML5 canvas or SVG for rendering highlights.

Key Features of a PDF Highlighter Tool:

  • Load and render PDF pages.

  • Allow text selection.

  • Add highlight overlays on selected text.

  • Save and restore highlights.

Basic Approach (Web):

  1. Use PDF.js to render the PDF pages.

  2. Use textLayer from PDF.js to get selectable text.

  3. Capture user text selections.

  4. Overlay highlights using CSS or SVG rectangles.

  5. Store highlights in a data structure to persist them.

Minimal Example Code Outline:

html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>PDF Highlighter Tool</title>
<style>
  #pdf-container { position: relative; width: 600px; margin: auto; }
  .highlight {
    position: absolute;
    background-color: yellow;
    opacity: 0.5;
    pointer-events: none;
  }
  #pdf-canvas {
    border: 1px solid #000;
  }
  #text-layer {
    position: absolute;
    top: 0; left: 0;
    pointer-events: none;
    user-select: text;
    width: 600px;
  }
</style>
</head>
<body>
<div id="pdf-container">
  <canvas id="pdf-canvas"></canvas>
  <div id="text-layer"></div>
</div>
<button id="highlight-btn">Highlight Selection</button>

<script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
<script>
  const url = 'https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf'; // example PDF
  const container = document.getElementById('pdf-container');
  const canvas = document.getElementById('pdf-canvas');
  const ctx = canvas.getContext('2d');
  const textLayerDiv = document.getElementById('text-layer');
  const highlightBtn = document.getElementById('highlight-btn');

  let pdfDoc = null;
  let pageNum = 1;
  let scale = 1.5;

  // Load PDF document
  pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
    pdfDoc = pdfDoc_;
    renderPage(pageNum);
  });

  function renderPage(num) {
    pdfDoc.getPage(num).then(function(page) {
      const viewport = page.getViewport({ scale: scale });
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      textLayerDiv.style.height = viewport.height + 'px';
      textLayerDiv.style.width = viewport.width + 'px';

      // Render PDF page into canvas context
      const renderContext = {
        canvasContext: ctx,
        viewport: viewport
      };
      page.render(renderContext);

      // Render text layer for selection
      page.getTextContent().then(function(textContent) {
        pdfjsLib.renderTextLayer({
          textContent: textContent,
          container: textLayerDiv,
          viewport: viewport,
          textDivs: []
        });
      });
    });
  }

  // Highlight functionality
  highlightBtn.addEventListener('click', () => {
    const selection = window.getSelection();
    if (selection.rangeCount === 0) return;

    const range = selection.getRangeAt(0);
    if (!container.contains(range.commonAncestorContainer)) {
      alert('Select text inside the PDF');
      return;
    }

    const rects = range.getClientRects();
    for (let rect of rects) {
      const highlight = document.createElement('div');
      highlight.className = 'highlight';
      // Position relative to pdf container
      const containerRect = container.getBoundingClientRect();
      highlight.style.top = (rect.top - containerRect.top) + 'px';
      highlight.style.left = (rect.left - containerRect.left) + 'px';
      highlight.style.width = rect.width + 'px';
      highlight.style.height = rect.height + 'px';

      container.appendChild(highlight);
    }
    selection.removeAllRanges();
  });
</script>
</body>
</html>

How this works:

  • PDF.js renders the PDF page on a canvas.

  • The text layer renders selectable text on top of the canvas.

  • When you select text and click “Highlight Selection,” it calculates the bounding rectangles of the selection and overlays semi-transparent yellow divs on those positions.

  • These highlight overlays give the visual effect of highlighted text.

Considerations for a Full Tool:

  • Store highlight data (page, text positions) in local storage or backend for persistence.

  • Support multiple pages and navigation.

  • Add color picker and other annotation tools.

  • Allow removing highlights.

  • Export the highlighted PDF or save annotations.

If you want, I can also help you create a desktop app version (e.g., using Python with PyPDF2 and PyQt) or a mobile app version. Let me know!

Share this Page your favorite way: Click any app below to share.
See all the ways to share this page

Enter your email below to join The Palos Publishing Company Email List

We respect your email privacy

Check Out Our Newest Posts we wrote about

Categories We Write About