Building a zero-dependency Unicode text engine in the browser (and why clipboard APIs are still a pain)

#javascript #webdev #unicode #css

This works perfectly for sequential blocks. However, Unicode has some historical quirks (like the cursive "g" or "h" sometimes pointing to different ranges in the Letterlike Symbols block), which required custom fallback exceptions.

The Glitch (Zalgo) Generator and Diacritics

For the glitch and strikethrough generators, I had to work with Combining Diacritical Marks. These are characters designed to be rendered on top of, below, or through the preceding character.

For the strikethrough tool, it's as simple as appending \u0336 after every character. For the glitch tool, I wrote a randomizer that stacks up to 15 different random combining marks (like \u030d or \u0311) on top of a single base letter. This forces the browser to render symbols that physically overflow the CSS line-height boundaries.

The iOS Clipboard Struggle

Since the main user interaction is "one-click copy," I needed clipboard copying to be bulletproof. Modern browsers support navigator.clipboard.writeText(), but iOS Safari is notoriously strict. If the copy action isn't directly inside a synchronous user-initiated call stack, iOS blocks it.

To solve this, I built a reliable fallback:

async function copyToClipboard(text) {
  try {
    await navigator.clipboard.writeText(text);
  } catch (err) {
    const textArea = document.createElement("textarea");
    textArea.value = text;
    textArea.style.position = "fixed"; 
    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();
    document.execCommand('copy');
    document.body.removeChild(textArea);
  }
}