# optical-aligned-text

> React.js component to align first letters of a new line visually to its left «text box side» (optical alignment)

Latest version **0.6.5** (published 2020-06-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install optical-aligned-text
pnpm add optical-aligned-text
yarn add optical-aligned-text
bun add optical-aligned-text
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.6.5 |
| Published | 2020-06-05 |
| First published | 2020-03-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 156.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 7 |
| Author | Coderwelsch, Joseph Ribbe |
| Maintainers | coderwelsch |

## Links

- npm: https://www.npmjs.com/package/optical-aligned-text
- Repository: https://github.com/Coderwelsch/react-optical-aligned-text
- Homepage: https://github.com/Coderwelsch/react-optical-aligned-text#readme
- Issues: https://github.com/Coderwelsch/react-optical-aligned-text/issues
- npm.io page: https://npm.io/package/optical-aligned-text

## Recent versions

- 0.6.5 (latest) — 2020-06-05
- 0.6.4 — 2020-06-04
- 0.6.3 — 2020-06-04
- 0.6.2 — 2020-06-04
- 0.6.1 — 2020-03-13
- 0.6.0 — 2020-03-10
- 0.5.0 — 2020-03-09

## README

![Optical Aligned Text Teaser](doc/readme/teaser-image/teaser-image.jpg)

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

[![Edit optical-aligned-text-example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/broken-waterfall-7bqi0?fontsize=14&hidenavigation=1&theme=dark)

## Install

```shell
yarn add optical-aligned-text
# or
npm install optical-aligned-text
```

## Usage

Just use the component like this:
```jsx harmony
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: -0.25 // `ch` (character) units
    }, {
        name: "Quotes",
        test: /^\n?([»«„“])/,
        offset: -0.9
    }
];

export default () => 
  <OpticalAlignedText rules={ rules }>
    <section className="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 above (left text box side)?
      </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:
```javascript
{
  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: -0.9 // 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 `&shy;` html entities
- [ ] Fix component rerenders. Currently it’s not supported to rerender the children of `<OpticalAlignedText>` component
- [x] Main functionality

---
_Source: https://npm.io/package/optical-aligned-text · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._