JSFiddle - React, Tailwind, and code Playground

by adamschwartz

HTML

<a style="font-size: 20px" href>Link with gj descenders.</a>

JavaScript

(function() {
  var PHI, backgroundPositionYCache, calculateBaselineYRatio, calculateTextHighestY, calculateTypeMetrics, clearCanvas, containerIdAttrName, containsAnyNonInlineElements, containsInvalidElements, countParentContainers, destroy, fontAvailable, getBackgroundColor, getBackgroundColorNode, getFirstAvailableFont, getLinkColor, getUnderlineBackgroundPositionY, hasValidLinkContent, init, initLink, initLinkOnHover, isTransparent, linkAlwysAttrName, linkBgPosAttrName, linkColorAttrName, linkContainers, linkHoverAttrName, linkLargeAttrName, linkSmallAttrName, performanceTimes, renderStyles, selectionColor, sortContainersForCSSPrecendence, styleNode, time, uniqueLinkContainerID;

  window.SmartUnderline = {
    init: function() {},
    destroy: function() {}
  };

  if (!(window['getComputedStyle'] && document.documentElement.getAttribute)) {
    return;
  }

  PHI = 1.618034;

  selectionColor = '#b4d5fe';

  linkColorAttrName = 'data-smart-underline-link-color';

  linkSmallAttrName = 'data-smart-underline-link-small';

  linkLargeAttrName = 'data-smart-underline-link-large';

  linkAlwysAttrName = 'data-smart-underline-link-always';

  linkBgPosAttrName = 'data-smart-underline-link-background-position';

  linkHoverAttrName = 'data-smart-underline-link-hover';

  containerIdAttrName = 'data-smart-underline-container-id';

  performanceTimes = [];

  time = function() {
    console.log('time()', arguments);
    return +(new Date);
  };

  linkContainers = {};

  uniqueLinkContainerID = (function() {
    var id;
    id = 0;
    return function() {
      return id += 1;
    };
  })();

  clearCanvas = function(canvas, context) {
    console.log('clearCanvas()', arguments);
    return context.clearRect(0, 0, canvas.width, canvas.height);
  };

  calculateTextHighestY = function(text, canvas, context) {
    console.log('calculateTextHighestY()', arguments);
    var alpha, highestY, i, j, pixelData, r, ref, ref1, textWidth, x, y;
    clearCanvas(canvas,...