Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yuanqing/charming
:tophat: Lettering.js in vanilla JavaScript
https://github.com/yuanqing/charming
dom javascript typography
Last synced: 25 days ago
JSON representation
:tophat: Lettering.js in vanilla JavaScript
- Host: GitHub
- URL: https://github.com/yuanqing/charming
- Owner: yuanqing
- License: mit
- Created: 2014-07-30T07:07:14.000Z (over 10 years ago)
- Default Branch: main
- Last Pushed: 2021-01-30T07:39:35.000Z (almost 4 years ago)
- Last Synced: 2024-10-01T16:42:28.529Z (about 1 month ago)
- Topics: dom, javascript, typography
- Language: JavaScript
- Homepage: https://codepen.io/lyuanqing/pen/YeYdrm
- Size: 470 KB
- Stars: 1,005
- Watchers: 18
- Forks: 60
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# charming [](https://www.npmjs.org/package/charming) [](https://travis-ci.org/yuanqing/charming) [](https://coveralls.io/r/yuanqing/charming) [](https://bundlephobia.com/result?p=charming)
> [Lettering.js](https://github.com/davatron5000/Lettering.js) in vanilla JavaScript
- Supports changing the tag name or class name of the inserted DOM elements
- Supports controlling how the contents of the element are wrapped
## Usage
> [**Editable demo (CodePen)**](https://codepen.io/lyuanqing/pen/YeYdrm)
HTML:
```html
foo
```
JavaScript:
```js
const charming = require('charming')
const element = document.querySelector('h1')
charming(element)
```
Boom:
```html
f
o
o
```
- Charming also works when the given element contains other (possibly nested) DOM elements; any character that is inside a [text node](https://developer.mozilla.org/en-US/docs/Web/API/Text) in the given element will be wrapped.
- For accessibility, Charming adds an `aria-label` attribute on the given element and `aria-hidden` attributes on each of the inserted DOM elements.
## API
```js
const charming = require('charming')
```
### charming(element [, options])
- `element` is a DOM element
- `options` is an optional configuration object
Use `options.tagName` to change the tag name of the wrapper element:
```js
charming(element, {
tagName: 'b'
})
```
Use `options.setClassName` to change the class name on each wrapper element:
```js
charming(element, {
setClassName: function (index, letter) {
return `index-${index} letter-${letter}`
}
})
```
Use `options.split` to control how the contents of the element are wrapped:
```js
charming(element, {
split: function (string) {
return string.split(/(\s+)/)
},
setClassName: function (index) {
return `word-${index}`
}
})
```
## Installation
```sh
$ yarn add charming
```
## License
[MIT](LICENSE.md)