Typography matters – even on the web. This typescript react component will align words visually and replaces typical misspellings every typographer hates. This is a react component for all who needs more control over copy texts in their apps.

⚠️ This plugin is not production-ready! Support highly appreciated ❤️️

---

Current State of this Project

This plugin is currently under construction and not production-ready.

Figma Design

I’ve created a figma design for the config editor. The design isn’t fully implemented yet. If you want I can grant you access to the figma files to work together on the design 🥳!

Figma Prototype →

Font Config Editor

To run the editor, install the npm modules in both of the root and editor directories:

# install npm deps under both dirs:
yarn # npm i
yarn --cwd editor

Then run from within the root directory:

# start
yarn start # npm run start

---

Install

yarn add react-awesome-typography
# or
npm install react-awesome-typography

---

Run tests

yarn test # npm run test

# or in watch mode:
yarn test:watch # npm run test:watch

Feel free to contribute!

It would be an honor working with you!

ToDos

• Write Tests
• Add Feature: Optical Alignment (alignmentRules)
• Add Feature: Preserve Orphans
• Add Feature: Rules for optical letter spacing
• Add Feature: Grammar / Misspelling Rules (grammarRules)
• Prevent Word Line Jumps on active Optical Alignment Rules
• Fix multiline word breaks when using special html entities in word
• Add Feature: Find syllables and softwrap them (using ­)
• Add Feature: support for rtl text