pretty-letters
Advanced tools
PrettyLetters is a Javascript plugin highly inspired by Lettering.js, why do not use the other one? because that one it is only available for jQuery and it is not registered in npm.
Basically what this plugin does is to give you the ability and freedom to style any HTML tag that has some text.
You will only need prettyLetters.min.js.
You can grab them on unpkg CDN and use it like this:
<!-- Only if using it with jQuery -->
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://unpkg.com/pretty-letters@check_latest_version/dist/prettyLetters.min.js"></script>
or find it under /dist/** folder and use it like this:
<!-- Only if using it with jQuery -->
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="prettyLetters.min.js"></script>
or use npm to install the plugin and require the module within your project.
const prerttyLetters = require( 'pretty-letters' );
prettyLetters( 'h2.title', {options});
When you pass any CSS selector to the function prettyLetters('.myClass') it will split the text in letters and wrap each one of those with another HTML tag so you have absolute control over the text.
<!-- Let's say you have this markup -->
<h2 class="foo">Foo</h2>
<script>
prettyLetters('.foo');
// the jQuery version would be
$( '.foo' ).prettyLetters();
</script>
<!-- After the method is called the result would be -->
<h2 class="foo">
<span class="char-0">F</span>
<span class="char-1">o</span>
<span class="char-2">o</span>
</h2>
<!-- What about a text with spaces? -->
<h2 class="fooBar">Foo Bar</h2>
<script>
prettyLetters('.fooBar');
// the jQuery version would be
$( '.fooBar' ).prettyLetters();
</script>
<!-- After the method is called the result would be -->
<h2 class="fooBar">
<span class="group-0">
<span class="char-0">F</span>
<span class="char-1">o</span>
<span class="char-2">o</span>
</span>
<span class="group-1">
<span class="char-0">B</span>
<span class="char-1">a</span>
<span class="char-2">r</span>
</span>
</h2>
<!-- Handles a couple of errors if something goes wrong. -->
<h2 class="fooBar">Foo Bar</h2>
<script>
prettyLetters('.barFoo');
// Will throw Error => 'WrongSelectorError, prettyLetters was called with a mismatched CSS selector'
prettyLetters();
// Will throw Error => 'EmptySelectorError, prettyLetters was called without any CSS selector'
</script>
const prettyLetter = require( 'pretty-letters' );
class App extends Component {
componentDidMount() {
var options = {
groupClass: 'lol-',
groupTag: 'div'
};
prettyLetter( 'h1', options );
}
render() {
return(
<div>
<h1>Helllo World</h1>
</div>
);
}
}
<body ng-app="playground">
<section ng-controller="angularCtrl">
<h1 class="selector" pretty-letter=".selector">
{{title}}
</h1>
</section>
</body>
const prettyLetter = require( 'pretty-letters' );
angular.module('playground', [])
.directive('prettyLetter', function ($timeout) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
// attrs['prettyLetter'] === '.selector'
$timeout(function() {
prettyLetter(
attrs['prettyLetter'],
scope.prettyLetterOpts
);
})
}
};
})
.controller('angularCtrl', function ( $scope ) {
$scope.title = 'prettyForm in Angular';
$scope.prettyLetterOpts = {
groupClass: 'lol-',
groupTag: 'div'
};
});
The plugin is set with some default options that can be overwritten by passing an object as second argument to the function.
The possible options are for the CSS classes and HTML wrapper elements that will generate the function.
// default values
var options = {
charClass: 'char-',
groupClass: 'group-',
charTag: 'span',
groupTag: 'span',
};
prettyLetters( 'selector', options);
// the jQuery version would be
$( 'selector' ).prettyLetters( options );
That is pretty much what this plugin can do.
FAQs
A Javascript and jQuery versionish of Lettering.js :)
We found that pretty-letters demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.
Security News
The Axios compromise shows how time-dependent dependency resolution makes exposure harder to detect and contain.