efficiencysimplicity/katana-text

Katana-text is a small React library meant to protect the text on a website from being scraped, meaning copied automatically by bots or AI tools that read a page's raw content. Instead of relying on a heavier system that blocks bots by making them prove they are human, or a system that traps bots in a maze of fake pages, Katana-text works by disguising the text itself so it is hard to extract cleanly while still looking normal to a human reader. It does this using a library called Pretext, which figures out where each word inside your element needs to be positioned. Katana-text then places each word as an individually positioned piece in the page's underlying structure, shuffles the order of those pieces, and lets some of them overlap. On top of that, it applies a custom font where each character actually displayed maps to a different character underneath, so the raw text that a scraper would see does not match what a human visually reads. To use it, a developer first calls a function called loadAndShuffleFont, passing in the web address of a font file and a name for the resulting font, which returns a font management object. For each block of text to protect, the developer calls createKatanaTextComponent with that font object, the text content, a height in pixels, and a line height that should be larger than the height. This returns a React function component that can then be placed anywhere in a page, and it automatically adjusts its own height based on the text inside it, though setting an explicit width is recommended. The README notes that createKatanaTextComponent itself is not a React component, it returns a function that is one, and it points readers to a demos folder on GitHub for usage examples. Katana-text grew out of a related project called Katana, which protects images on a website named ungenerated.io from AI scraping. That original Katana system is kept private for security reasons, but Katana-text is planned as a free, open React library covering the text side of the same problem.