davatron5000 / lettering.js Goto Github PK

Hi,

I just want to change first word color and style in heading neither whole heading or syntax I'm putting code.

<h1>Recent Projects</h1>

in this code I want to present {{{ Recent }}} in Red color and Projects iin black but i don't want to use span to separate the heading because when I want it should behave dynamically..

Regards
Mufasser

I read on StackOverflow that this plugin adds in the ability to use advanced CSS selectors such as ::last-word.
I took a look through the code and couldnt see any support for this.

Does this exist ? Has it ever existed? If not any suggestions on how to implement an equivalent?

http://stackoverflow.com/questions/9268386/css-for-changing-color-of-last-word-in-h1

Fix for unicode support:
function injector(t, splitter, klass, after) {
var text = t.text(),
inject = '',
i = 0;
for (let char of text) { //this kind of iterator is unicode safe
inject += '' + char + '' + after;
i++;
}
t.attr('aria-label', text)
.empty()
.append(inject)
}
For more information: http://www.2ality.com/2015/01/es6-strings.html

I'm not sure if this is a bug or not but it confused me for a good 10 minutes.

I've created a pen to highlight the problem I had: http://cdpn.io/petGF

Basically, I had my div set up with an id to target with lettering.js and inside the div I was using PHP to echo a value, I mistakenly added tabbing and went to a new line to make my code look nice and stuff but that seems to make lettering add extra spans.

Removing the tabs fixed it, as I said though I don't know if this is a bug or if I was just using it wrong.

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>

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!

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.

Hi,

I'm trying to animate the span created by the plugin (using css transform), in order to do that I have to convert each span into display: inline-block, unfortunately, empty characters disappears, and there is no more space between words. I tried to target those characters in css using :empty but the span is not really empty (there is an empty space). Am I missing something? can't really find answer to that.

Is it possible to add a class to those empty span?

I have been trying to get a particular character to be colored but it doesn't seem to work, I cannot identify from CSS whether the spans contain the letter "A" or "B"

“WHAT PEOPLE ARE SAYING” portion of the URL preview,
The third individual twitter address is wrong.
It's right https://twitter.com/fchimero/.

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.

It would be sweet if this added a class to the first and last letter for specific styling. :first-child would work, I suppose, but :last-child doesn't work until IE9

Ciao guys. Was looking for the minified source.

1. https://github.com/davatron5000/Lettering.js/downloads has some pretty ancient stuff
2. shouldn't .min.js be part of the main repo for whatever one wants to do with bower and themsuch?

Does anyone have lettering work with more recent versions of jQuery? lettering.js is in the page, after jquery, but apparently undefined.

Hi there,

I am have a navigation menu with links styled with lettering.js (a jQuery plugin).
On HTML / SASS works perfectly.

When I try to integrate that into WordPress everything's works well...a part from the tag is not wrapping anymore the nav links :( that's obviously a problem...what I do get is the that is created by lettering.js and of course my other styling, but no tags so can't really be used as a menu if you know what I mean...

Am I missing something ? Anyone with some kind of idea ? similar experience ?

Thanks,
Amit

I found released v0.6.1 and v0.6 have not include bower.json, I use grunt-wiredep to inject files to HTML file automaticly which is defined in bower.json's main field. so grunt-wiredep requred the bower.json file.

This can be ignored I finally found that issue

Hey,

are for the extension methods? I want to make something after he finished lettering, but I don´t find something on your documentation. I mean something like this:

$("#myelement").lettering('words', function() { // Text });

Properly called the script in my theme functions file, added this code to the header<script type="text/javascript"> $(document).ready(function() { $(".site-description").lettering(); }); </script>... site-description being the p class of my site tagline, and nothing is happening. :(
Thanks for any help.

Hi there,

I love this, but there's one kind of web typography control I always want that this doesn't yet quite support.

In programs like InDesign or Quark, we designers often set a rule for the kerning of particular letter pairs across a whole document. For example, I'm always adding grep styles to InDesign to widen the default kerning in Gill Sans for " W" (space W) and " T", because these are kerned so tightly it looks like a mistake where the space has been missed out.

It would be great to be able to do this with lettering.js. For example, if you have established that in <h2 class="subhead"> on the front page, "O" and "K" aren't kerned tightly enough, that will also be true on any other <h2 class="subhead"> element using the same style on any page. It's more efficient and better long term to write a rule that for any "K" which follows an "O" in a <h2 class="subhead">, than to manually check every heading of every page, count characters for every heading where K follows - and then do this all again each time the copywriters reword the headings.

What I'd love to see is, an 'advanced rules' mode triggered by passing in objects, that sets letter-level classes for specific pairings. This could then be expanded for things other than pairings. Here's what I imagine the input looking like:

$('h2.subhead').lettering( { 
  pairs: [{
     0: { 
      characters: [ 'O', 'D', 'P' ]
    },
     1: {
       characters: [ 'K','B','N','E' ],
       classes: ['medium-tight-kern']
    },
 }
 {
    0: {
       characters: [ ' ' ]
     },
    1: {
       characters: [ 'W, T, V, Y' ],
       classes: ['double-width-kern']
      }
    }
  ],
  individuals: [
    {
      characters: ["!", "?"],
      classes: ['heavy-punctuation', 'double-width-kern']
    },
    {
      characters: ["... "],
      classes: ["clean-ellipsis"]
    },
  ]
});

This would be processed to look through the element, and for any K, B, N or E that follows a O, D or P, it would apply a span with class 'medium-tight-kern', and for any W, T, V or Y that follows a space, it applies the class 'double-width-kern'. medium-tight-kern would be defined in css to use a negative margin to bring the upright of these characters closer to the curve of the preceding character, double-width-kern would increase the gap.

I added some example rules for individual characters or sets of characters as an example of how this feature could easily be expanded to support even more awesome.

If you'd like some inspiration on the sort of rules people apply to characters, pairs, etc in documents for print (and how awesome it would be to have this kind of power on the web) check out this great InDesign plugin and the example markup: http://www.kahrel.plus.com/indesign/kern.html

My text string is "My god" . I have animated each letter of it with some delay . Animation of each letter is done well ,But string displays as "mygod' without any space. How to work with space character?

This would help optimize performance. For example, let's say I want to style the first word and first letter of every paragraph. Currently there's no other way apart from:

("p").lettering('words').children('span').lettering();

And then styling p .word1 and p .char1. That, of course, would create a pretty huge DOM if you have an amount of text in the page.

By adding an optional function parameter we can limit which caracters/lines/words are "lettered". The function should be passed the original text, the current caracter/line/word and its index in the sequence, and return a boolean saying whether you want it to be spanned or not.

function onlyfirst(phrase, element, index) {
      return (index == 0);
}

("p").lettering('words', onlyfirst).children('span').lettering(onlyfirst);

This would convert:

<p>Lorem ipsum...</p>

Into:

<p>
  <span class="word1">
    <span class="char1">L</span>orem
  </span> 
  ipsum...
</p>

This would allow also for automatic kerning correction of given letters or even letter groups along whole texts, and probably lots of other uses that now are forbidden due to the DOM growing excessively if you apply lettering to the entire page.

I know that your codebase is absolutely minimal but I think that this single addition is fairly simple and would add immense flexibility.

I'd like to wrap the following words : 2.5 october 2014
But it fails to wrap "2.5" alone as a word, and it gives me instead only two words : "2.5 october" and "2014".
Thanks for your help !
(I can achieve what I want by wrapping letters, but it would be nicer with words ;-))

Windows Defender detects the IframeRef.K trojan on the file jquery.lettering-0.6.1.min.js

Is there any plans to offer this amazing library without the jQuery dependency? :)

This is an awesome micro framework, and I think you should consider adding yourself to microjs, you can find it on github here

Do you all have any way to show how this is used with webpack? Be great to see this documented some place.

Is it possible to wrap 2 words together in a line? There doesn't seem to be any documentation in this regard. I assume this is currently not possible.

Is there a reason why (lines 58 & 60) you slice the arguments and pass them into the .apply? The arguments aren't used anywhere, and there's nothing in the documentation to suggest that they would ever be any additional ones passed in anyway.

So replacing lines 57 - 61 with the following should still work
if ( method && methods[method] ) {
return methods[ method ].apply( this );
} else if ( method === 'letters' || ! method ) {
return methods.init.apply( this ); // always pass an array
}

Or, in fact, if you just rename the "init" method to "letters", you could replace the whole lot with:

$.fn.lettering = function( method ) {
    try {
        return methods[ method || "letters" ].apply( this );
    } catche (e)  {
        $.error( 'Method ' + method + ' does not exist on jQuery.lettering' );
    }
    return this;
};

Any easy way to remove all spans? Essentially a "reset back to original markup" method?

Line 91: "You'll probably break your browser if you try to tried to do wrap [...]"

Hi there,

Is there any way to stop the plugin from wrapping a span around any spaces in text?

Thanks,
Chris

It seems that the package has not being registered in Bower. I looked for either letteringjs and jquery-lettering but no results :(

An alternative to battle FOUT/C is using a 'no-js' class on the HTML tag, which is replaced by a 'js' when the page loads, like one found here:
http://html5boilerplate.com/

Then you can have a style to hide the fancy text initially.

.js #thingUsingFancyAssFont {
visibility: hidden;
}

then after your lettering.js code has run you can add a class to the body tag (say .letteringDone). Which then you use to bring back your hidden thing:

.js .letteingDone #thingUsingFancyAssFont {
visibility: visible;
}

You could include the class as an option of the plugin if you want to be nice, or people could do it themselves.

*Completely untested code, but I've done similar things. The concept should be there. ;)

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');
});

to make for selectors like .word2 .char3

It should at least be documnted in the readme. :)

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

This is weird http://digitalevangelist.net/good works as I'd expect. Not a lot going on.

However browsing on the iPhone, the text is styled but not coloured for some reason.

Any ideas?

i'll leave this as a ticket for funsies

i like the plugin idea. i def think we need it.
mostly for kerning and for that i think a sweeter API might be worth it.
i was thinking something like
.w1char3 so its easier to jump to a new word without counting all the letters
or
.w1firstk , .w4thirde

anyway. probably a 2.0 type thing but it was a thought..

code shit:

• new Array() ==> []
• create a common split() method or something so that init/words/lines all leverage it and you can make the code more DRY
• hahaha i fucking love the md5 technique and comment
• very much like whats going on in your $.fn.lettering definition. nice style.

structure shit:

• you should probably build up your spans as a string and toss it into t all at once.. instead of appending inside a loop. it'll be much faster and far fewer reflows.

good work

Hi
I m using lettering.js to rotate my name like this

but in my onepage responsive website didn't work.
I think there's problem here :
<script>
$(function() {
$("h1").lettering();
});
</script>
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

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.

Is it possible to respect html tags with lettering.js?

JSFiddle:
http://jsfiddle.net/Zzxpx/9/

For example

Gist: https://gist.github.com/hxgdzyuyi/07253960a46182ea56d2

Result:

First character is missing. "".split('') would broken when the string contains characters that are not in the Basic Multi-lingual Plane(bmp).

The correct javascript's function is:

Copy from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charAt#Example.3A_Getting_whole_characters

var str = 'A \uD87E\uDC04 Z'; // We could also use a non-BMP character directly
for (var i=0, chr; i < str.length; i++) {
  if ((chr = getWholeChar(str, i)) === false) {
    continue;
  } // Adapt this line at the top of each loop, passing in the whole string and
    // the current iteration and returning a variable to represent the 
    // individual character

  alert(chr);
}

function getWholeChar (str, i) {
  var code = str.charCodeAt(i);     

  if (isNaN(code)) {
    return ''; // Position not found
  }
  if (code < 0xD800 || code > 0xDFFF) {
    return str.charAt(i);
  }

  // High surrogate (could change last hex to 0xDB7F to treat high private
  // surrogates as single characters)
  if (0xD800 <= code && code <= 0xDBFF) { 
    if (str.length <= (i+1))  {
      throw 'High surrogate without following low surrogate';
    }
    var next = str.charCodeAt(i+1);
      if (0xDC00 > next || next > 0xDFFF) {
        throw 'High surrogate without following low surrogate';
      }
      return str.charAt(i)+str.charAt(i+1);
  }
  // Low surrogate (0xDC00 <= code && code <= 0xDFFF)
  if (i === 0) {
    throw 'Low surrogate without preceding high surrogate';
  }
  var prev = str.charCodeAt(i-1);

  // (could change last hex to 0xDB7F to treat high private
  // surrogates as single characters)
  if (0xD800 > prev || prev > 0xDBFF) { 
    throw 'Low surrogate without preceding high surrogate';
  }
  // We can pass over low surrogates now as the second component
  // in a pair which we have already processed
  return false; 
}

This is an awesome plugin, it's exactly what I need and has great performance.

The only issue for my use case, is that I want every letter to have a span, rather than class="char4".

Example:

<!-- Current -->
<span class="char1" aria-hidden="true">C</span>
<span class="char2" aria-hidden="true">O</span>
<span class="char3" aria-hidden="true">N</span>
<span class="char4" aria-hidden="true">T</span>
<span class="char5" aria-hidden="true">E</span>
<span class="char6" aria-hidden="true">N</span>
<span class="char7" aria-hidden="true">T</span>
<span class="char8" aria-hidden="true">S</span>

<!-- Is this possible? (Each letter has a specific class) -->
<!-- Notice: 'char-t' is being used twice  -->
<span class="char-c" aria-hidden="true">C</span>
<span class="char-o" aria-hidden="true">O</span>
<span class="char-n" aria-hidden="true">N</span>
<span class="char-t" aria-hidden="true">T</span>
<span class="char-e" aria-hidden="true">E</span>
<span class="char-n" aria-hidden="true">N</span>
<span class="char-t" aria-hidden="true">T</span>
<span class="char-s" aria-hidden="true">S</span>

So all the letter is lowercased, then added a class that we can style that individual letter with?

I managed to do this via: (to fit my needs for now).. but could be a useful plugin feature seeing as there is no other libraries that do this.

    // Within jquery.letter.js line 20
    inject += '<span class="'+klass+(item)+'" aria-hidden="true">'+item+'</span>'+after;

Hi, I am using this JS to my Wordpress plugin, Is it possible to make it paying continuously just like the demo?
If yes then how can I do it?

Would it be possible to get this to number the spans in reverse order?

For example, instead of having this result:

<span class="word1">Lorem</span> <span class="word2">ipsum</span> <span class="word3">dolor</span> <span class="word4">sit</span> <span class="word5">amet.</span>

Can we have this result?

<span class="Lorem">Lorem</span> <span class="ipsum">ipsum</span> <span class="dolor">dolor</span> <span class="sit">sit</span> <span class="amet">amet.</span>

Thanks! 👍

Would like to get some kerning pair functionality and some tests regarding that.