Typography

Typography toolkit featuring Unicode confusables detection, OCR capabilities, and font glyph manipulation

Packages

This is a monorepo that contains the following packages:

• unconfusables - Unicode confusables detection and string normalization library
• unocr - Unified OCR library with multi-driver support for Tesseract.js and AI models
• unglyph - Unified font glyph manipulation library with simple API for parsing, creating, and modifying fonts

Quick Start

Installation

# Clone the repository
git clone https://github.com/bysages/typography.git
cd typography

# Install dependencies
pnpm install

Basic Usage

// Unicode confusables detection with unconfusables
import { getConfusables, normalizeString, areConfusable } from "unconfusables";

console.log(getConfusables("0")); // { source: "0", target: ["O"], type: "MA" }
console.log(normalizeString("paypa1")); // "paypal"
console.log(areConfusable("0l", "Ol")); // true

// OCR with unocr
import { createOCRManager } from "unocr";
import tesseractDriver from "unocr/drivers/tesseract";
import { toString } from "hast-util-to-string";

const ocr = createOCRManager({
  driver: tesseractDriver({ langs: "eng" }),
});

const result = await ocr.recognize(imageBuffer);
const text = toString(result);
console.log(text); // Extracted text

// Font manipulation with unglyph
import {
  parseFont,
  createFont,
  generateFont,
  createGlyphManager,
  renderGlyph,
} from "unglyph";

// Parse existing font
const font = parseFont(fontBuffer);
console.log(`Font: ${font.familyName}, ${font.glyphs.length} glyphs`);

// Create custom font
const manager = createGlyphManager();
manager.add({
  index: 1,
  unicode: 65, // 'A'
  name: "A",
  advanceWidth: 600,
  path: {
    commands: [
      { type: "move", x: 300, y: 0 },
      { type: "line", x: 100, y: 700 },
      { type: "line", x: 500, y: 700 },
      { type: "line", x: 300, y: 0 },
    ],
  },
});

const fontData = createFont(manager.list(), {
  familyName: "MyFont",
  styleName: "Regular",
  unitsPerEm: 1000,
});

// Generate font file
const fontBytes = generateFont(fontData, { format: "otf" });

// Render glyph to SVG
const svg = renderGlyph(manager.findByUnicode(65), {
  size: 100,
  color: "#2563eb",
  padding: 20,
});

Development

# Development mode
pnpm dev

# Build the project
pnpm build

# Run linting
pnpm lint

# Test unconfusables functionality
node playground/unconfusables.ts

# Test unocr functionality
node playground/unocr/tesseract.ts

# Test unglyph functionality
node playground/unglyph.ts

Contributing

We welcome contributions! Here's how to get started:

Quick Setup

1. Fork the repository on GitHub

2. Clone your fork:

   git clone https://github.com/YOUR_USERNAME/typography.git
   cd typography

3. Add upstream remote:

   git remote add upstream https://github.com/bysages/typography.git

4. Install dependencies:

   pnpm install

5. Development mode:

   pnpm dev

Development Workflow

1. Code: Follow our project standards
2. Test: pnpm build
3. Commit: Use conventional commits (feat:, fix:, etc.)
4. Push: Push to your fork
5. Submit: Create a Pull Request to upstream repository

Support & Community

• 📫 Report Issues

License

This project is licensed under the MIT License - see the LICENSE file for details.

---

Built with ❤️ by By Sages