{"id":30667285,"url":"https://github.com/zapkub/fontwidthjs","last_synced_at":"2026-03-11T12:52:29.893Z","repository":{"id":297889540,"uuid":"998213059","full_name":"zapkub/fontwidthjs","owner":"zapkub","description":"get the right font size from width in px natively from font file","archived":false,"fork":false,"pushed_at":"2025-06-08T06:00:14.000Z","size":39025,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-06T08:18:55.044Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zapkub.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-08T05:32:38.000Z","updated_at":"2025-06-08T06:00:18.000Z","dependencies_parsed_at":null,"dependency_job_id":"da7f229a-a961-4466-a3c2-c64a7c71bac8","html_url":"https://github.com/zapkub/fontwidthjs","commit_stats":null,"previous_names":["zapkub/fontwidthjs"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/zapkub/fontwidthjs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zapkub%2Ffontwidthjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zapkub%2Ffontwidthjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zapkub%2Ffontwidthjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zapkub%2Ffontwidthjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zapkub","download_url":"https://codeload.github.com/zapkub/fontwidthjs/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zapkub%2Ffontwidthjs/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30381822,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-11T12:49:11.341Z","status":"ssl_error","status_checked_at":"2026-03-11T12:46:41.342Z","response_time":84,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-08-31T22:46:20.808Z","updated_at":"2026-03-11T12:52:29.873Z","avatar_url":"https://github.com/zapkub.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# FontWidth Library\n\n[![CI](https://github.com/YOUR_USERNAME/fontwidth/actions/workflows/ci.yml/badge.svg)](https://github.com/YOUR_USERNAME/fontwidth/actions/workflows/ci.yml)\n[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue.svg)](https://www.typescriptlang.org/)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\n\u003e **⚠️ AI Generated Repository**: This repository is generated by AI\n\nA TypeScript library for precise font size calculation that fits text within specified width constraints. Designed with first-class Thai language support and works in both browser and Node.js environments.\n\n## ✨ Features\n\n- **Precise Font Metrics**: Uses actual font glyph measurements for pixel-perfect width calculations\n- **Thai Language Support**: Special handling for Thai combining characters, tone marks, and ligatures\n- **Universal Compatibility**: Works in both browser and Node.js environments\n- **Multiple Font Formats**: Supports TTF and OTF font files from Buffer, ArrayBuffer, or base64\n- **Binary Search Optimization**: Efficient algorithm for finding optimal font sizes\n- **TypeScript Ready**: Full TypeScript support with comprehensive type definitions\n\n## 🚀 Installation\n\n```bash\nyarn add fontwidth\n# or\nnpm install fontwidth\n```\n\n## 📖 Usage\n\n### Basic Example\n\n```typescript\nimport { calculateFontSize } from 'fontwidth';\nimport fs from 'fs';\n\n// Load a font file\nconst fontBuffer = fs.readFileSync('path/to/your/font.ttf');\n\n// Calculate optimal font size\nconst result = calculateFontSize(\n  'สวัสดีครับ', // Thai text\n  300, // Maximum width in pixels\n  fontBuffer // Font file buffer\n);\n\nconsole.log(`Optimal font size: ${result.fontSize}px`);\nconsole.log(`Actual width: ${result.actualWidth}px`);\n```\n\n### Advanced Options\n\n```typescript\nconst result = calculateFontSize(text, maxWidth, fontBuffer, {\n  minFontSize: 8, // Minimum font size (default: 8)\n  maxFontSize: 100, // Maximum font size (default: 100)\n  precision: 0.1, // Font size precision (default: 0.1)\n});\n```\n\n### Browser Usage\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cscript type=\"module\"\u003e\n      import { calculateFontSize } from './dist/index.esm.js';\n\n      // Load font file from user input or fetch\n      const response = await fetch('fonts/NotoSansThai-Regular.ttf');\n      const fontBuffer = await response.arrayBuffer();\n\n      const result = calculateFontSize('การคำนวณฟอนต์', 250, fontBuffer);\n\n      // Apply to DOM element\n      const element = document.getElementById('text');\n      element.style.fontSize = result.fontSize + 'px';\n      element.textContent = 'การคำนวณฟอนต์';\n    \u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"text\"\u003e\u003c/div\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## 🇹🇭 Thai Language Support\n\nThis library provides comprehensive support for Thai text rendering:\n\n- **Unicode Normalization**: Automatically handles NFD normalization for proper character combining\n- **Tone Marks \u0026 Vowels**: Correctly processes above/below base character positioning\n- **Ligatures**: Accounts for Thai character ligature combinations\n- **Mixed Languages**: Seamlessly handles Thai text mixed with Latin characters\n\n### Thai Examples\n\n```typescript\n// Place names with complex characters\ncalculateFontSize('กรุงเทพมหานคร', 300, fontBuffer);\n\n// Text with tone marks\ncalculateFontSize('เมื่อพรุ่งนี้', 250, fontBuffer);\n\n// Mixed Thai-English\ncalculateFontSize('Hello สวัสดี World', 350, fontBuffer);\n```\n\n## 📋 API Reference\n\n### `calculateFontSize(text, maxWidth, fontInput, options?)`\n\n#### Parameters\n\n- **`text`** (string): The text to measure\n- **`maxWidth`** (number): Maximum width constraint in pixels\n- **`fontInput`** (FontInput): Font file as Buffer, ArrayBuffer, or base64 string\n- **`options`** (CalculateFontSizeOptions, optional): Configuration options\n\n#### Options\n\n```typescript\ninterface CalculateFontSizeOptions {\n  minFontSize?: number; // Minimum font size (default: 8)\n  maxFontSize?: number; // Maximum font size (default: 100)\n  precision?: number; // Font size precision (default: 0.1)\n}\n```\n\n#### Returns\n\n```typescript\ninterface FontSizeResult {\n  fontSize: number; // Optimal font size in pixels\n  actualWidth: number; // Calculated text width in pixels\n  maxWidth: number; // Input maximum width constraint\n}\n```\n\n## 🎮 Demo Application\n\nThe library includes an interactive HTML demo showcasing its capabilities:\n\n```bash\n# Build the library\nyarn build\n\n# Start demo server\nyarn demo\n\n# Open browser to http://localhost:8000\n```\n\nThe demo features:\n\n- Real-time font size calculation\n- Thai font loading (Noto Sans/Serif Thai)\n- Visual preview with accurate width rendering\n- Multiple Thai text examples\n- Interactive controls for all parameters\n\n## 🧪 Testing\n\n```bash\n# Run unit tests\nyarn test\n\n# Run browser integration tests\nyarn test:browser\n\n# Run tests with coverage\nyarn test:coverage\n```\n\n### Browser Testing\n\nThe library includes comprehensive Playwright tests that verify:\n\n- Font loading and rendering accuracy\n- Width calculation precision across diverse Thai texts\n- Visual regression testing with screenshot comparison\n- Cross-browser compatibility\n\n## 🛠️ Development\n\n```bash\n# Install dependencies\nyarn install\n\n# Build library\nyarn build\n\n# Run development server\nyarn dev\n\n# Lint and format code\nyarn quality:fix\n```\n\n### Continuous Integration\n\nThe project uses GitHub Actions for automated testing and quality assurance:\n\n- **Code Quality**: ESLint, Prettier, and TypeScript checks\n- **Testing**: Unit tests and browser integration tests across Node.js 18, 20, 22\n- **Build Verification**: Ensures all distribution files are generated correctly\n- **Demo Validation**: Verifies the demo application works properly\n\nAll checks must pass before code can be merged. The CI pipeline automatically runs on every push and pull request.\n\n### Build Output\n\n- **`dist/index.js`**: CommonJS build for Node.js\n- **`dist/index.esm.js`**: ES modules build for modern browsers\n- **`dist/index.d.ts`**: TypeScript type definitions\n\n## 📦 Font Requirements\n\nThe library works with:\n\n- **TTF (TrueType)** fonts\n- **OTF (OpenType)** fonts\n- Fonts must contain proper metric tables for accurate measurements\n- For Thai text, use fonts with comprehensive Thai Unicode support (recommended: Noto Sans Thai, Noto Serif Thai)\n\n## 🤝 Contributing\n\n1. Fork the repository\n2. Create a feature branch\n3. Add tests for new functionality\n4. Ensure all tests pass\n5. Submit a pull request\n\n## 📄 License\n\nMIT License - see LICENSE file for details.\n\n## ⚠️ Disclaimer\n\nThis library was generated with assistance from Claude (Anthropic's AI assistant). While thoroughly tested and functional, please validate the library meets your specific requirements before using in production environments.\n\n## 🙏 Acknowledgments\n\n- **Google Fonts** for providing high-quality Thai fonts used in testing\n- **opentype.js** for font parsing capabilities\n- **Playwright** for comprehensive browser testing infrastructure\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzapkub%2Ffontwidthjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzapkub%2Ffontwidthjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzapkub%2Ffontwidthjs/lists"}