yuanqing / Charming
Licence: mit
π Lettering.js in vanilla JavaScript
Stars: β 954
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Charming
Lining.js
An easy to use javascript plugin offers you complete DOWN-TO-THE-LINE control for radical web typography.
Stars: β 907 (-4.93%)
Mutual labels: typography
Preact
βοΈ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.
Stars: β 30,527 (+3099.9%)
Mutual labels: dom
Dompurify
DOMPurify - a DOM-only, super-fast, uber-tolerant XSS sanitizer for HTML, MathML and SVG. DOMPurify works with a secure default, but offers a lot of configurability and hooks. Demo:
Stars: β 8,177 (+757.13%)
Mutual labels: dom
Typographie
Web service for preparation of Russian texts for the web publication
Stars: β 12 (-98.74%)
Mutual labels: typography
Awesome Typography
βοΈ Curated list about digital typography π₯
Stars: β 947 (-0.73%)
Mutual labels: typography
Postcss Interpolate
PostCSS plugin for values interpolation between breakpoints.
Stars: β 9 (-99.06%)
Mutual labels: typography
Remark Textr
plugin to make your typography better with Textr
Stars: β 26 (-97.27%)
Mutual labels: typography
Crab
JavaScript library for building user interfaces with Custom Elements, Shadow DOM and React like API
Stars: β 22 (-97.69%)
Mutual labels: dom
Multicaptchabot
The best bot for collecting cryptocurrency from freebitco.in, freedoge.co.in and freenem.com ππ
Stars: β 27 (-97.17%)
Mutual labels: dom
Typi
A sass mixin to make responsive typography easy
Stars: β 862 (-9.64%)
Mutual labels: typography
Radi
πTiny (in size) front-end framework with no extra browser re-flows
Stars: β 946 (-0.84%)
Mutual labels: dom
charming
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
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 andaria-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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].