javascript - LESS — data-uri painter mixin -

i’m trying implement mixin customizing underline of text, polyfill css3 text-decoration properties: line, style, color, not supported yet browsers.

my idea perform painting proper line in canvas, convert data-uri , use background target element. problem when compiling less node.js, there no canvas in environment. technically use node-canvas perform task, don’t want make dependencies node compile less.

is there , simple alternative way paint micro-image somehow , form data-uri based on this, not engaging external libraries or dependencies?

solved: png data-generator code , demos here. it’s .png mixin generates indexed-color png, accepts stream of bytes (string) data, 00 - transparent color, 01 - passed color.

i not sure how want implement mixin (what want mixin), maybe of can help.

• first: can use javascript interpolations in javascript implementations of less, using back-ticks.

• second: there solutions available drawing micro images in less ... came across blog post: http://micheljansen.org/blog/entry/1238

and idea here have simple gif background , change color (using embeded javascript transform r g b 64 bit base). example wavy line efect 1 used in css text-decoration-style:wavy; use following less code:

.wavyrgb(@r,@g,@b) {     @key: "abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz0123456789+/=";     @b64: `function(r,g,b){var key=@{key};return key.charat(((0&3)<<4)|(r>>4))+key.charat(((r&15)<<2)|(g>>6))+key.charat(g&63)+key.charat(b>>2)+key.charat(((b&3)<<4)|(255>>4))}(@{r},@{g},@{b})`;     background-image: ~"url(data:image/gif;base64,r0lgodlhbgadaiaaa@{b64}///yh5baeaaaealaaaaaagaamaaaihtab2lqlqaaa7)"; } 

and place background image on bottom example:

.underwave {     text-decoration:none;     .wavyrgb(255,0,0); //red line     background-repeat:repeat-x;     background-position:bottom; } 

the output css:

.underwave {   text-decoration: none;   background-image: url(data:image/gif;base64,r0lgodlhbgadaiaaap8aap///yh5baeaaaealaaaaaagaamaaaihtab2lqlqaaa7);   background-repeat: repeat-x;   background-position: bottom; } 

---

the rest css hints finalize approach:

this way positioning background-image top or bottom, overline or underline effect. placed in of text using text-decoration-line. if want place line in front of text, in option line-through, need use :afetr pseudoclass in css:

.throughwave {   text-decoration: none;   position:relative; } .throughwave:after {   background-image: url(data:image/gif;base64,r0lgodlhbgadaiaaap8aap///yh5baeaaaealaaaaaagaamaaaihtab2lqlqaaa7);   background-repeat: repeat-x;   background-position: center; } 

there have been discussions on adding blinking effect ... example css animations here:

• how make image blink?
• css3 animation: blinking overlay box

or blinking of element using jquery.

the combination of effects can achieve using multiple background images , position 1 on top, 1 on bottom example.

here threw quick demo on jsfiddle.

---

edit: pure less mixin (no js):

i wrote new mixin calculate base64 color less only, works in less implementations.

this less 1.4.0 solution:

.b64(@r,@g,@b) {     @test: "a" "b" "c" "d" "e" "f" "g" "h" "i" "j" "k" "l" "m" "n" "o" "p" "q" "r" "s" "t" "u" "v" "w" "x" "y" "z" "a" "b" "c" "d" "e" "f" "g" "h" "i" "j" "k" "l" "m" "n" "o" "p" "q" "r" "s" "t" "u" "v" "w" "x" "y" "z" 0 1 2 3 4 5 6 7 8 9 "+" "/" "=";     @bit1: extract(@test, (floor(@r/16) + 1)); @bit2: extract(@test, (mod(@r,16)*4 + floor(@g/64) + 1)); @bit3: extract(@test, (mod(@g,64) + 1)); @bit4: extract(@test, (floor(@b/4) + 1)); @bit5: extract(@test, (mod(@b,4)*16 + 16));     b64-color: ~"@{bit1}@{bit2}@{bit3}@{bit4}@{bit5}"; } 

this should work in less versions >= 1.1.6:

.b64(@r,@g,@b) {     @1:"a"; @2:"b"; @3:"c"; @4:"d"; @5:"e"; @6:"f"; @7:"g"; @8:"h"; @9:"i"; @10:"j";    @11:"k";    @12:"l";    @13:"m";    @14:"n";    @15:"o";    @16:"p";    @17:"q";    @18:"r";    @19:"s";    @20:"t";    @21:"u";    @22:"v";    @23:"w";    @24:"x";    @25:"y";    @26:"z";    @27:"a";    @28:"b";    @29:"c";    @30:"d";    @31:"e";    @32:"f";    @33:"g";    @34:"h";    @35:"i";    @36:"j";    @37:"k";    @38:"l";    @39:"m";    @40:"n";    @41:"o";    @42:"p";    @43:"q";    @44:"r";    @45:"s";    @46:"t";    @47:"u";    @48:"v";    @49:"w";    @50:"x";    @51:"y";    @52:"z";    @53:0;  @54:1;  @55:2;  @56:3;  @57:4;  @58:5;  @59:6;  @60:7;  @61:8;  @62:9;  @63:"+";    @64:"/";    @65:"=";     @modr16: @r - floor(@r/16)*16; @modg64: @g - floor(@g/64)*64; @modb4: @b - floor(@b/4)*4;     @pos1: (floor(@r/16) + 1); @pos2: (@modr16*4 + floor(@g/64) + 1); @pos3: (@modg64 + 1); @pos4: (floor(@b/4) + 1); @pos5: (@modb4*16 + 16);     @bit1: @@pos1; @bit2: @@pos2; @bit3: @@pos3; @bit4: @@pos4; @bit5: @@pos5;     b64-color: ~"@{bit1}@{bit2}@{bit3}@{bit4}@{bit5}"; }