Skip to content
master
Go to file
Code

Latest commit

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
Mar 7, 2020
Mar 7, 2020
Jun 26, 2019
Mar 7, 2020
Jun 25, 2019

README.md

charming npm Version Build Status Coverage Status Bundle Size

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)

HTML:

<h1>foo</h1>

JavaScript:

const charming = require('charming')

const element = document.querySelector('h1')
charming(element)

Boom:

<h1 aria-label="foo">
  <span class="char1" aria-hidden="true">f</span>
  <span class="char2" aria-hidden="true">o</span>
  <span class="char3" aria-hidden="true">o</span>
</h1>
  • Charming also works when the given element contains other (possibly nested) DOM elements; any character that is inside a text node 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

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:

charming(element, {
  tagName: 'b'
})

Use options.setClassName to change the class name on each wrapper element:

charming(element, {
  setClassName: function (index, letter) {
    return `index-${index} letter-${letter}`
  }
})

Use options.split to control how the contents of the element are wrapped:

charming(element, {
  split: function (string) {
    return string.split(/(\s+)/)
  },
  setClassName: function (index) {
    return `word-${index}`
  }
})

Installation

$ yarn add charming

License

MIT

You can’t perform that action at this time.