-
-
Save madrobby/1119059 to your computer and use it in GitHub Desktop.
lettering.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function( | |
| a, // a DOM element | |
| b // optional regexp (use /\S+/g for whole words) | |
| ) { | |
| a.innerHTML = // replace the html contents | |
| a.textContent.replace( // with the text contents | |
| b || /\S/g, // default regexp: single characters | |
| function(c){ // wrapped in | |
| return '<span class=char' + // spans with classnames (note: no need for attribute quoting) | |
| (a=-~a) + // char1 .. charN. "a" is reused, and initialized. | |
| // ~document.body => -1 | |
| // -~document.body => 1 | |
| // -~1 => 2 | |
| // -~2 => 3 etc. | |
| '>' + | |
| c + // char or word | |
| '</span>' | |
| } | |
| ) | |
| } | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function(a,b){a.innerHTML=a.textContent.replace(b||/\S/g,function(c){return'<span class=char'+(a=-~a)+'>'+c+'</span>'})} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE | |
| Version 2, December 2004 | |
| Copyright (C) 2011 Thomas Fuchs <http://mir.aculo.us/> | |
| Everyone is permitted to copy and distribute verbatim or modified | |
| copies of this license document, and changing it is allowed as long | |
| as the name is changed. | |
| DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE | |
| TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION | |
| 0. You just DO WHAT THE FUCK YOU WANT TO. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "lettering", | |
| "description": "A clone of lettering.js.", | |
| "keywords": [ | |
| "lettering", | |
| "typography", | |
| "css", | |
| "injector" | |
| ] | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <title>Foo</title> | |
| <h1 id="h1">LETTERING.JS</h1> | |
| <style> | |
| /* shamelessly borrowed from lettering.js */ | |
| h1{font-weight: normal;text-transform:uppercase;font-family:'League Gothic','Impact',sans-serif;font-size:160px;margin-bottom:-32px;margin-left:10px;color:#c44032;text-shadow:#863027 -4px 4px 0;margin-top:30px;} | |
| h1 span{display:inline-block;position:relative;letter-spacing:-1px;-webkit-transition:all 0.2s ease-out;} | |
| h1 span:hover{top:3px} | |
| h1 .char2, h1 .char11{color:#e36b23;text-shadow:#9b4d1f -4px 4px 0} | |
| h1 .char3, h1 .char10{z-index:10;color:#e6c92e;text-shadow:#9c8b26 -4px 4px 0} | |
| h1 .char4, h1 .char9{color:#5da028;text-shadow:#427021 -4px 4px 0} | |
| h1 .char5, h1 .char8{color:#4584be;text-shadow:#2f597f -4px 4px 0} | |
| h1 .char6, h1 .char7{color:#7073cf;text-shadow:#4a4d88 -4px 4px 0} | |
| h1 .char1{-webkit-transform:rotate(-3deg)} | |
| h1 .char3{top:-1px;-webkit-transform:rotate(2deg)} | |
| h1 .char4{top:-7px} | |
| h1 .char6{top:-7px;-webkit-transform:rotate(2deg)} | |
| h1 .char7{} | |
| h1 .char8{top:1px;-webkit-transform:rotate(-2deg)} | |
| h1 .char9{-webkit-transform:rotate(2deg)} | |
| h1 .char10{top:-65px;width:36px;} | |
| h1 .char10:hover{-webkit-transition-duration:0.4s;} | |
| h1 .char11{top:2px;left:-30px;width:50px;-webkit-transform:rotate(-3deg)} | |
| h1 .char12{left:-24px} | |
| </style> | |
| <script> | |
| var lettering = function(a,b){a.innerHTML=a.textContent.replace(b||/\S/g,function(c){return'<span class=char'+(a=-~a)+'>'+c+'</span>'})} | |
| lettering(document.getElementById('h1')) | |
| </script> |
@mathiasbynens Thanks for this! I do want to keep it compatible with lettering.js, so need to use span and charX.
here's a live version to play around with http://jsfiddle.net/Qz7gP/21/
You can save 2 more bytes using the c=-~c trick
function(a,b,c,d){a.innerHTML=a.textContent.replace(b||/\S/g,function(d){return'<span class=char'+(c=-~c)+'>'+d+'</span>'})}
also, you should delete/change the README.
Few suggestions:
function(a,b){a.innerHTML=a.textContent.replace(b||/\S/g,function(d){return'<span class=char'+ ++a+'>'+d+'</span>'},a=0)}
// ↑ (1) ↑ (2) ↑ (3)(1) d placeholder argument in outer function is unnecessary.
(1), (3) c may be dropped and a reused. 3rd arg of .replace is unused, so we can assign a=0 here. a.innerHTML and a.textContent are already «on stack» by the moment of assignment, so value of a is unneeded.
(2) Braces are unneeded in 'foo'+(++i)+'bar', one space is enough for lexer: 'foo'+ ++i+'bar'
Updated and we're now down to 120 bytes.
Heads up: @jdalton pointed out this won’t work in IE < 9 because of textContent. You may want to fall back to .innerText or .firstChild.nodeValue (assuming that’s always a text node) if oldIE support is an issue.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Please, think of the mothereffing unquoted attributes!
Also, you could use e.g.
<b>instead of<span>(and shorter classnames) but that’s another story.