Skip to content

Commit 47bbf94

Browse files
committed
Update readme to reflect inaccessibility.
1 parent c94b093 commit 47bbf94

File tree

1 file changed

+14
-8
lines changed

1 file changed

+14
-8
lines changed

README.md

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
# Lettering.js, a jQuery plugin for radical Web Typography
1+
2+
## Lettering.js, a jQuery plugin for radical Web Typography
23
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>`
34

4-
## Individual Letter Control with Lettering.js
5+
6+
### Individual Letter Control with Lettering.js
57
We'll start with some really basic markup:
68

79
<h1 class="fancy_title">Some Title</h1>
@@ -31,28 +33,32 @@ The resulting code will churn your `.fancy_title` and output the following:
3133

3234
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.
3335

34-
## Consult the Wiki, Pls
36+
### :warning: Accessibility Issue
37+
38+
The plugin is generally not compliant with accessibility standards. If you need to be compliant, please consider other options for presenting your content. Screen readers pause at every HTML tag, including inline `span` tags. There is an [open issue](https://github.com/davatron5000/Lettering.js/issues/38) if you want to help.
39+
40+
### Consult the Wiki, Pls
3541

3642
There you have it, but Lettering.js does even more! If you want more information on how you can get radical with text, please read the Lettering.js Wiki
3743

3844
[https://github.com/davatron5000/Lettering.js/wiki](https://github.com/davatron5000/Lettering.js/wiki)
3945

4046
If you have an idea for the wiki, file an issue and we'll try and write something up.
4147

42-
## Best Practices &amp; Kerning
48+
### Best Practices &amp; Kerning
4349
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.
4450

45-
### Best Practices
51+
#### Best Practices
4652
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.
4753

48-
### Kern Well
54+
#### Kern Well
4955
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.
5056

5157
### Non-Javascript Fallback
5258
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)
5359

54-
### Performance Anti-Pattern
60+
#### Performance Anti-Pattern
5561
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.
5662

57-
## Download, Fork, Commit, Please.
63+
### Download, Fork, Commit, Please.
5864
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

Comments
 (0)