A lightweight, easy to use Javascript injector for radical Web Typography

Overview

Lettering.js, a jQuery plugin for radical Web Typography

CDNJS

We developed a lightweight, easy to use Javascript span injector for radical Web Typography, we're calling it "lettering-jay-ess", and we're releasing it today for free over on Github. Let me demo it for you: </stevejobs>

Individual Letter Control with Lettering.js

We'll start with some really basic markup:

<h1 class="fancy_title">Some Title</h1>

After including jQuery 1.6.2+, download and include the minified version of Lettering.js, then a script block with the magical .lettering() method:

<script>
	  $(document).ready(function() {
	    $(".fancy_title").lettering();
	  });
</script>

The resulting code will churn your .fancy_title and output the following:

<h1 class="fancy_title">
  <span class="char1">S</span>
  <span class="char2">o</span>
  <span class="char3">m</span>
  <span class="char4">e</span>
  <span class="char5"></span>
  <span class="char6">T</span>
  <span class="char7">i</span>
  <span class="char8">t</span>
  <span class="char9">l</span>
  <span class="char10">e</span>
</h1>

Magical. Now the text is easy to manipulate in your CSS using an ordinal .char# pattern. This plugin assumes basic counting skills, but it's a pretty fast and easy way to get control over every letter.

Letters, words, lines, and more!

There you have it, but Lettering.js does even more! Lettering.js has the ability to split words and lines as well. If you want more information on how you can get radical with text, read the Lettering.js Wiki:

https://github.com/davatron5000/Lettering.js/wiki

Best Practices

We've found this to be a pretty quick and elegant solution to create typographical CSS3 posters. It's also a great solution for really custom type headings, while keeping the text selectable. Be smart and use sparingly. You'll probably break your browser if you try to wrap every letter on your page in a span tag, so don't do that. Look to use this in your Headings, Blockquotes, Asides, etc.

Kern Well

If you're going through the trouble to load a fancy font and that word or phrase is the largest on the site, then it's important for it to be kerned well. With Lettering.js, kerning is a breeze. You can simply use $("#id-of-what-i-want-to-kern").lettering(); and then on each .char#, you can set relative position or left/right margin. Works like a charm.

Accessibility

Lettering.js is now accessible by default. It uses an aria-label on the parent element and aria-hidden on each of the children to prevent screenreaders from pausing while reading each individual characters or words.

Non-Javascript Fallback

As with any kind of Javascript, have a fall back plan in case the user doesn't have javascript enabled. The bottom line is up to you, my bottom line would be "legible and on the screen". Also, use lettering.min.js Download the Minified Version of Lettering.js here

Performance Anti-Pattern

Web performance patterns advise that you put Javascripts at the bottom of your page before your </body> tag. There is an unfortunate side effect where you may experience a FOUT (Flash of Unstyled Text) when you're manipulating your text after the DOM has loaded. Unfortunately, we found the best solution to avoid/minimize the FOUT caused by this plugin is to put your scripts (jQuery, Lettering.js) in the document <head>. On the one hand, your page will load slower. On the other hand, a flash/restyling makes your site feel slow. Users might ultimately feel the site is faster if they don't see the FOUT.

Download, Fork, Commit, Please.

We really want Lettering.js to be a quality helper for web typography. If you have any feedback or suggestions, please leave those over on the Github. We're excited about typography on the web and want to help make it print quality.

Comments
  • Lettering.js interferes with existing elements inside title

    Lettering.js interferes with existing elements inside title

    All existing elements inside a title get removed, so when you have, for example, a fancy Baskerville-Italic ampersand inside a title, it gets killed by the script which ignores all elements inside it.

    Example that breaks somewhat: <h1>Photos <em>&amp;</em> Videos</h1>

    opened by KuraFire 14
  • Words with H1 tags

    Words with H1 tags

    Hey guys, I could just be missing something here, but I'm trying to use the lettering words method with an H1 tag. It only is allowing me to manipulate each letter and not the whole word. I switched it to a paragraph tag and it works. I would rather have the site's main title in an H1 tag. Any suggestions?

    I'm using this:

    $(document).ready(function() { $(".headline").lettering('words'); });

    opened by ghost 10
  • Not Working in Blogger

    Not Working in Blogger

    Hello Dear sir,

    I just follow All the steps as you teach in your documentation, but still not working in blogger blog template. But when i check the same code in Dreamweaver that is working fine.

    Please let me know how to resolve the issue or its not compatible with xml document?

    Thanks & Regards..

    opened by bloggertricks 9
  • How to make this work on a phpbb style?

    How to make this work on a phpbb style?

    I've tried everything that I can possible think of. Including just copying the js and html code examples given in the exmaple folder but none of it works on a phpbb style.

    opened by maxpen 9
  • Feature: Adding the letter to the class

    Feature: Adding the letter to the class

    The plugin could be extended in the following way: To the char# class, add also a letter-X class, where X is the content of the span.

    Example:

    Current result:

    <span class="char1">A</span>
    

    Proposed result:

    <span class="char1 letter-A">A</span>
    

    Side effects: Whitespace must be addressed specially.

    Advantages: In the CSS you could address all 'A's at once, like, e.g., doing baseline shifting.

    Feature 
    opened by Boldewyn 7
  • Add a character-specific class to letters

    Add a character-specific class to letters

    It can be useful to kern every instance of certain letter combinations. With these extra classes, you can apply broad css rules. For example, to consistently tighten the space between the characters "A" and "W" in headlines, you could use the css rule .char-a + .char-w { margin-left:-2px; }

    opened by alertmybanjos 6
  • Added SEO and accessibility optimization

    Added SEO and accessibility optimization

    Hi Dave,

    I added a method to the Lettering.js named "resetLettering". It reset the element to its original form, I made this for SEO and accessibility reasons, because when the text letters are separated to individual elements, it cannot be found by search engines and screen readers.

    So why would I separate the letters using lettering, and the reset it to the original form? http://www.giuliandrimba.com/labs/lettering-animate/ here is an example, I can animate the letters and when it finishes, I join the letters again, so they can be indexed by search engines and screen readers.

    I would like your opinion if I add this functionality to the LetteringAnimate plugin or inside the Lettering.js.

    Thanks,

    Giulian Drimba.

    opened by giuliandrimba 6
  • Accessibility improvements

    Accessibility improvements

    Lettering.js is inaccessible due to screen readers pausing at every HTML tag, including inline span tags.

    A possible fix might be something along the lines of:

    // See if aria-hidden has been set
    if($(this).parents('[aria-hidden="true"]').length === 0) {
      // make a clone
      var clone = $(this).clone();
      // aria hide it
      clone.attr('aria-hidden',true);
      // visiually hide the clone
      clone.css({
        'position':'absolute',
        'left':'-10000px',
        'top':'auto',
        'width':'1px',
        'height':'1px',
        'overflow':'hidden'
      });
      // append the clone
      $(this).after(clone);
    
      // Do lettering stuff
    }
    

    Haven't tested it in case some one wants to pick it up. The screen reader should skip over the aria-hidden and read the clone.

    Bug 
    opened by davatron5000 5
  • Add first and last class functionality

    Add first and last class functionality

    • Adds 'charfirst', 'wordfirst', 'linefirst' to the first character, word, or line, respectively.
    • Adds 'charlast', 'wordlast', 'linelast' to the last character, word, or line, respectively.
    • Optimizes injector method to use array joining instead of string concatenation
    • Completes https://github.com/davatron5000/Lettering.js/issues/19
    opened by JamieLottering 5
  • Added additional classes

    Added additional classes

    I have added additional classes for styling particular characters, words and sentences by their contents and not just a counter. This allows font changes for certain letters and numbers, easier control over sentences (as long as the contents does not change), etc.

    Luke

    opened by lukemorton 5
  • Emoji support

    Emoji support

    Hello there,

    I've noticed an issue with Emoji, some Emoji are two charecters or more, upon applying lettering the characters are split and the Emoji no longer displays, instead you get the default broken charecter.
    If I get time I will create an example oon codePen, but I think you get the idea.

    Thanks

    Luke

    opened by LukeTOBrien 3
  • Security issue: XSS for methods 'lines' and 'words'

    Security issue: XSS for methods 'lines' and 'words'

    The injector first extracts the DOM text representation, then inserts it into HTML: https://github.com/davatron5000/Lettering.js/blob/d06bb733823a6fa76e11a09d24849d066a1566aa/jquery.lettering.js#L20 Thus even when the server properly escapes user input, calling lettering on these DOM nodes converts it back to HTML, allowing for cross-site-scripting (XSS). This is probably only exploitable in the "lines" and "words" methods, because the default method splits into characters, and the < in <span><</span> is parsed as text by browsers.

    Solution

    Create the <span> programmatically using document.createElement and set the content using textContent.

    Exploit

    <!doctype html>
    <html>
    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
    <script src="./jquery.lettering.js"></script>
    </head>
    <body>
    <div id="exploitme">&lt;script&gt;alert(&quot;I'm properly escaped HTML&quot;);&lt;/script&gt;</div>
    <script>
    jQuery('#exploitme').lettering('lines');
    </script>
    </body>
    </html>
    

    A popup showing "I'm properly escaped HTML" will open, thus arbitrary code execution is achieved. Tested in Firefox 75.0 and Chromium 81.0.4044.113.

    Bug 
    opened by pcworld 0
  • Double wrap 'lines'

    Double wrap 'lines'

    Hello,

    Is it possible to double wrap? For example when using $('h1').lettering('lines'); it would be great to have something like:

    <span class="line1"><span>Line 1</span></span>
    <span class="line2"><span>Line 2</span></span>
    

    Thank you in advance!

    opened by elliott-impression 0
  • lettering jquery plugin not working !!

    lettering jquery plugin not working !!

    Hi I m using lettering.js to rotate my name like this name but in my onepage responsive website didn't work. I think there's problem here : I try it in new Html file, it works but i don't know why in my site wont work. I did exactly like this one : https://css-tricks.com/set-text-on-a-circle/

    please help

    opened by amal1515 1
Owner
Dave Rupert
Lead developer at Paravel. Purveyor of tiny jQueries.
Dave Rupert
A JavaScript library that lets you curve type on the web.

CircleType A JavaScript library that lets you curve type on the web. Demo: https://circletype.labwire.ca Installation In a browser: <script src="circl

Peter Hrynkow 622 Dec 17, 2022
A jQuery plugin for inflating web type

FitText.js, a jQuery plugin for inflating web type FitText makes font-sizes flexible. Use this plugin on your responsive design for ratio-based resizi

Dave Rupert 6.8k Dec 30, 2022
Windows dll injector EAC + BE

EAC-BE-Injector go check out my other projects https://github.com/Skengdoo/HyperVisor-Injector To Purchase Full Source add my discord skeng#9524 reaso

skeng 25 Dec 15, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
Web typography at its finest: font-size and line-height based on element width.

FlowType.JS Responsive web typography at its finest: font-size and line-height based on element width. Check out the demo site. What does FlowType.JS

Simple Focus 4.6k Dec 30, 2022
Gatsby-starter-minimal-blog - Typography driven, feature-rich blogging theme with minimal aesthetics.

Gatsby-starter-minimal-blog - Typography driven, feature-rich blogging theme with minimal aesthetics. Includes tags/categories support and extensive features for code blocks such as live preview, line numbers, and line highlighting.

Priya Chakraborty 0 Jan 29, 2022
A typography stylesheet for readable content

yue.css yue.css is a typography stylesheet for readable content. It was created for my blog at first since I always designed a new theme for my blog.

Typlog 481 Dec 22, 2022
Exposes theming options available in Joy UI by providing color palette and typography controls.

Joy Theme Creator Note: Joy UI is currently in alpha - some things may not be finished or working as expected. This project exposes the theming option

Oliver Benns 10 Dec 28, 2022
A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

Introducing FitVids.js A lightweight, easy-to-use jQuery plugin for fluid width video embeds. FitVids automates the Intrinsic Ratio Method by Thierry

Dave Rupert 4.8k Dec 24, 2022
A lightweight easy-to-use minecraft chatbridge

Kyuta Bot - Minecraft ChatBridge Kyuta is discord chat-bridge integration for minecraft based on the bedrock-protocol library and functions similarly

Sierrawastaken 7 Sep 27, 2022
A lightweight, efficient and easy-to-use Canvas library for building some cool particle effects.

JParticles · 中文 | English 官网:jparticles.js.org 特效列表 粒子运动 波纹运动 波纹进度条 雪花飘落 线条动画 介绍 JParticles(JavaScript Particles 的缩写)是一款基于 Canvas 的不依赖于其他库的轻量级 JavaScr

花祁 466 Dec 27, 2022
Lightweight and easy to use vanilla js library to add css animations to elements on scroll.

Scrollrisen Trigger css animations on scroll as elements enter the viewport. Zero dependencies, lightweight and easy to use and customize Installation

null 1 Oct 13, 2022
🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.

Animate.css If you need the old docs - v3.x.x and under - you can find it here. Just-add-water CSS animation Installation Install with npm: npm instal

Animate.css 76.7k Dec 30, 2022
🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.

Animate.css If you need the old docs - v3.x.x and under - you can find it here. Just-add-water CSS animation Installation Install with npm: npm instal

Animate.css 76.7k Jan 4, 2023
jQuery based scrolling Bar, for PC and Smartphones (touch events). It is modern slim, easy to integrate, easy to use. Tested on Firefox/Chrome/Maxthon/iPhone/Android. Very light <7ko min.js and <1Ko min.css.

Nice-Scrollbar Responsive jQuery based scrolling Bar, for PC and Smartphones (touch events). It is modern slim, easy to integrate, easy to use. Tested

Renan LAVAREC 2 Jan 18, 2022
An easy to implement marquee JQuery plugin with pause on hover support. I know its easy because even I can use it.

Simple-Marquee Copyright (C) 2016 Fabian Valle An easy to implement marquee plugin. I know its easy because even I can use it. Forked from: https://gi

null 16 Aug 29, 2022
Lovefield is a relational database for web apps. Written in JavaScript, works cross-browser. Provides SQL-like APIs that are fast, safe, and easy to use.

Lovefield Lovefield is a relational database written in pure JavaScript. It provides SQL-like syntax and works cross-browser (currently supporting Chr

Google 6.8k Jan 3, 2023
基于React开发的新一代web调试工具,支持React组件调试,类似于Chrome Devtools。A Lightweight, Easy To Extend Web Debugging Tool Build With React

English | 简体中文 基于React开发的移动web调试工具 更新日志 简单易用 功能全面 易扩展 高性能 使用cdn方式,一键接入 类Chrome devtools, 内嵌React开发者工具,支持日志,网络,元素,代理,存储,性能等, 具有更好的网络捕获能力和丰富的日志展现形式 暴露内部

腾讯TNTWeb前端团队 236 Dec 25, 2022