Typography matters. Even on the web. This is a react component
for all typography nerds, who wants to have more control over texts on websites and web apps.
Example
Install
yarn add optical-aligned-text# or npm install optical-aligned-text
Usage
Just use the component like this:
import React from "react";import OpticalAlignedText from "optical-aligned-text"; const rules = name: "W" // just to find rules faster test: /^\n?W/ // regex to test if a word starts with `W` offset: -025 // `ch` (character) units name: "Quotes" test: /^\n?/ offset: -09 ; <OpticalAlignedText => <section ="container"> <h1>Willy Wonka!</h1> <p>«What the hell is going on here?»</p> <p> This is a normal aligned text Can you see <br/> the difference to the paragraph ? </p> </section> </OpticalAlignedText>;
Documentation
Properties
The OpticalAlignedText component offers the following properties:
rules
• required
Description: Array of objects to define the optical alignment behaviours of each word.
Each rule object should be structured like this:
name: "W" // optional – the name of that rule. Believe me, you will need it in bigger projects! test: /^\n?W/ // required – regex to test on every found word in the text offset: -09 // required – «margin-left» adjustment value, unit: "ch" (x-character width)
affectedTags
• optional
Default: ["h1", "h2", "h3", "h4", "h5", "h6", "p", "em"]
Description: Html tags that should be checked.
debug
• optional
Default: false
Description: Renders the affected words with a background-color. Aligned words are colored red, idle words are colored blue.
debugAlignedWordBackground
• optional
Default: "#ff9169"
Description: Color for the affected words background in debug mode.
debugIdleWordBackground
• optional
Default: "#d0f4ff"
Description: Color for the idle words background in debug mode.
Feel free to contribute!
Please feel free to develop this plugin together 🥳!
ToDos
- Write tests
- Add support for rtl text
- Improve performance. It isn’t that bad, but it could be better!
- Fix multiline word breaks when using
­
html entities - Fix component rerenders. Currently it’s not supported to rerender the children of
<OpticalAlignedText>
component - Main functionality