You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+22-19Lines changed: 22 additions & 19 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,31 +5,34 @@ We developed a lightweight, easy to use Javascript `span` injector for radical W
5
5
### Individual Letter Control with Lettering.js
6
6
We'll start with some really basic markup:
7
7
8
-
<h1 class="fancy_title">Some Title</h1>
9
-
8
+
```html
9
+
<h1class="fancy_title">Some Title</h1>
10
+
```
10
11
After including `jQuery 1.6.2+`, [download and include the minified version of Lettering.js](http://github.com/davatron5000/Lettering.js/downloads), then a script block with the magical `.lettering()` method:
11
12
12
-
<script>
13
+
```html
14
+
<script>
13
15
$(document).ready(function() {
14
16
$(".fancy_title").lettering();
15
17
});
16
-
</script>
17
-
18
+
</script>
19
+
```
18
20
The resulting code will churn your `.fancy_title` and output the following:
19
21
20
-
<h1 class="fancy_title">
21
-
<span class="char1">S</span>
22
-
<span class="char2">o</span>
23
-
<span class="char3">m</span>
24
-
<span class="char4">e</span>
25
-
<span class="char5"></span>
26
-
<span class="char6">T</span>
27
-
<span class="char7">i</span>
28
-
<span class="char8">t</span>
29
-
<span class="char9">l</span>
30
-
<span class="char10">e</span>
31
-
</h1>
32
-
22
+
```html
23
+
<h1class="fancy_title">
24
+
<spanclass="char1">S</span>
25
+
<spanclass="char2">o</span>
26
+
<spanclass="char3">m</span>
27
+
<spanclass="char4">e</span>
28
+
<spanclass="char5"></span>
29
+
<spanclass="char6">T</span>
30
+
<spanclass="char7">i</span>
31
+
<spanclass="char8">t</span>
32
+
<spanclass="char9">l</span>
33
+
<spanclass="char10">e</span>
34
+
</h1>
35
+
```
33
36
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.
34
37
35
38
### Letters, words, lines, and more!
@@ -52,7 +55,7 @@ Lettering.js is now accessible by default. It uses an `aria-label` on the parent
52
55
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](http://github.com/davatron5000/Lettering.js/downloads)
53
56
54
57
#### Performance Anti-Pattern
55
-
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 experiences a [FOUT (Flash of Unstyled Text)](http://paulirish.com/2009/fighting-the-font-face-fout/) 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.
58
+
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)](http://paulirish.com/2009/fighting-the-font-face-fout/) 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.
56
59
57
60
### Download, Fork, Commit, Please.
58
61
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.
0 commit comments