Skip to content

yuanqing/charming

main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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