How to properly do stroked text with a wipe fill effect

Question

I'm trying to create a React component that renders a stroked text with a progressive fill color based on a prop that works with any font.

Because of a bug with -webkit-text-stroke with certain type of fonts (see this), I went for a solution that overlays two spans on top of each other. One for the stroke and another for the background fill (based on this answer)

This is the component code I have so far:

type StrokeFillWipeTextProps = {
  text: string;
  color: string;
  wipeColor: string;
  progress: number;
  className: string;
};

export const StrokeFillWipeText = ({
  text,
  color,
  wipeColor,
  progress,
  className,
}: StrokeFillWipeTextProps) => {
  const wrapperStyle: React.CSSProperties = {
    position: 'relative',
    WebkitTextStroke: '10px black',
  };

  const innerStyle: React.CSSProperties = {
    position: 'absolute',
    left: 0,
    pointerEvents: 'none',
    backgroundClip: 'text',
    backgroundSize: '200% 100%',
    transition: 'background-position',
    WebkitTextStroke: 0,
    WebkitBackgroundClip: 'text',
    WebkitTextFillColor: 'transparent',
    whiteSpace: 'pre',
    color: color,
    backgroundPositionX: `${100 - progress}%`,
    backgroundImage: `linear-gradient(to right, ${wipeColor}, ${wipeColor} 50%, ${color} 50%)`,
  };

  return (
    <div className={className}>
      <span style={wrapperStyle}>
        {text}
        <span style={innerStyle} aria-hidden>
          {text}
        </span>
      </span>
    </div>
  );
};

So when progress is 0 the font color should be color. When progress is 50, the first half of the text should be colored with wipeColor and the second half with color and so on.

Here's a screenshot of this component rendered three times with progress 10, 50 and 90 respectively.

As you can see, with certain fonts and letters the first letter (also the last) is cropped. The actual text is overflowing the wrapper span as shown here:

Here's a repro StackBlitz:

https://stackblitz.com/edit/vitejs-vite-tjgpxk?file=src%2FStrokeFillWipeText.tsx

How can I get this to work with all font families, characters and font sizes?

Also, I need the progress prop to be exact. 0 meaning no wipe fill at all, 100 meaning full wipe fill and all in betweens.

Answer 1

I'm afraid you're out of luck when using HTML elements with text-stroke applied. The main problem, we can't get the visual bounding box as defined by the glyph rendering (unless you're parsing and retrieving the actual bounding boxes via a library like opentype.js).

However, you may achieve the desired effect using SVG <text> as it has more advanced stroke options. In particular paint-order comes in handy as it allows you to add a stroke behind the fill.
Besides you can apply a gradient fill directly to the text.

progress.addEventListener('input', e => {
  let val = +e.currentTarget.value
  stopProg1.setAttribute('offset', val + '%')
  stopProg2.setAttribute('offset', val + '%')

})

body {
  padding-top: 1em;
}

svg {
  font-family: "Playwrite NO", cursive;
  margin-top: 2em;
  border: 1px solid #ccc;
  overflow: visible;
  user-select: none
}

<link href="https://fonts.googleapis.com/css2?family=Playwrite+NO:[email protected]&display=swap" rel="stylesheet">

<label>Progress <input id="progress" type="range" step="1" min="0" max="100" value="50"></label>


<svg viewBox="0 0 250 200">
  <defs>
    <linearGradient id="grad">
      <stop class="stop" offset="0%" stop-color="red" />
      <stop id="stopProg1" class="stop" offset="50%" stop-color="red" />
      <stop id="stopProg2" class="stop" offset="50%" stop-color="white" />
      <stop class="stop" offset="100%" stop-color="white" />
    </linearGradient>
  </defs>
  <text id="txt" x="50%" y="50%" fill="url(#grad)" text-anchor="middle" dominant-baseline="middle" font-size="75" stroke="#000" stroke-width="5" stroke-linejoin="round" paint-order="stroke"><tspan class="tspan">&thinsp;</tspan>Just<tspan class="tspan">&thinsp;</tspan></text>
</svg>

Unfortunately webkit/safari also struggles with the gradient fill but I found out adding a   before and after the actual text seems to fix this issue.

Another caveat to this approach is that SVG lacks line-wrapping and width adjustment to shrink and grow the parent SVG to fit the current content.

Applying overflow:visible prevents the text from being cropped but depending on the amount of text, you need to recalculate the SVG viewBox to avoid overlapping elements.