[2,[4,[4,[5,[,'bold',1],[5,['tag',,''],'<','b',[1,[0,'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz']],[2,[5,,[1,[0,'<>']],[0]]],'>'],[5,['__b',],[2,[5,,[1,[5,['tag',,''],5,'/b',[1,8],[2,[5,,[1,12],13]],14]],1]]],[4,[5,['tag',,''],5,20,21,[2,[5,,24,13]],14],[4,[5,['unknown',],[5,['tag',,''],5,[5,,'/',[2,8,1]],21,[2,28],14]],'']]],[5,[,'__i',1],[5,['tag',,''],5,'i',21,35,14],[5,['__i',],[2,[5,,[1,[5,['tag',,''],5,'/i',21,35,14]],1]]],[4,[5,['tag',,''],5,45,21,35,14],36]],[5,[,'__u',1],[5,['tag',,''],5,'u',21,35,14],[5,['__u',],[2,[5,,[1,[5,['tag',,''],5,'/u',21,35,14]],1]]],[4,[5,['tag',,''],5,56,21,35,14],36]],[5,[,'__s',1],[5,['tag',,''],5,'s',21,35,14],[5,['__s',],[2,[5,,[1,[5,['tag',,''],5,'/s',21,35,14]],1]]],[4,[5,['tag',,''],5,67,21,35,14],36]],[5,[,'link',1],[5,['tag',,''],5,'a',21,35,14],[5,['a',],[2,[5,,[1,[5,['tag',,''],5,'/a',21,35,14]],1]]],[4,[5,['tag',,''],5,78,21,35,14],36]],[5,[,'__h1',1],[5,['tag',,''],5,'h1',21,35,14],[5,['h1',],[2,[5,,[1,[5,['tag',,''],5,'/h1',21,35,14]],1]]],[4,[5,['tag',,''],5,89,21,35,14],36]],[5,[,'__h2',1],[5,['tag',,''],5,'h2',21,35,14],[5,['h2',],[2,[5,,[1,[5,['tag',,''],5,'/h2',21,35,14]],1]]],[4,[5,['tag',,''],5,100,21,35,14],36]],[5,[,'__h3',1],[5,['tag',,''],5,'h3',21,35,14],[5,['h3',],[2,[5,,[1,[5,['tag',,''],5,'/h3',21,35,14]],1]]],[4,[5,['tag',,''],5,111,21,35,14],36]],[5,[,'__h4',1],[5,['tag',,''],5,'h4',21,35,14],[5,['h4',],[2,[5,,[1,[5,['tag',,''],5,'/h4',21,35,14]],1]]],[4,[5,['tag',,''],5,122,21,35,14],36]],[5,[,'__h5',1],[5,['tag',,''],5,'h5',21,35,14],[5,['h5',],[2,[5,,[1,[5,['tag',,''],5,'/h5',21,35,14]],1]]],[4,[5,['tag',,''],5,133,21,35,14],36]],[5,[,'__h6',1],[5,['tag',,''],5,'h6',21,35,14],[5,['h6',],[2,[5,,[1,[5,['tag',,''],5,'/h6',21,35,14]],1]]],[4,[5,['tag',,''],5,144,21,35,14],36]],[5,[,,''],[5,['tag',,''],5,'script',21,35,14],[5,['__code',],[2,[5,,[1,[5,['tag',,''],5,'/script',21,35,14]],13]]],[4,[5,['tag',,''],5,155,21,35,14],36]],[5,[,,''],[5,['tag',,''],5,'style',21,35,14],[5,['__code',],[2,[5,,[1,[5,['tag',,''],5,'/style',21,35,14]],13]]],[4,[5,['tag',,''],5,166,21,35,14],36]],[5,[,,''],[5,['tag',,''],5,'xmp',21,35,14],[2,[5,,[1,[5,['tag',,''],5,'/xmp',21,35,14]],13]],[4,[5,['tag',,''],5,176,21,35,14],36]],[5,[,'__ol',1],[5,['tag',,''],5,'ol',21,35,14],[2,[4,[5,[,'__li',1],[5,['tag',,''],5,'li',21,35,14],[2,[5,,[1,[5,['tag',,''],5,'/li',21,35,14]],[1,[5,['tag',,''],5,'/ol',21,35,14]],13]],[4,[5,['tag',,''],5,191,21,35,14],36]],[5,,[1,[5,['tag',,''],5,194,21,35,14]],13]]],[4,199,36]],[5,[,'box__span',1],[5,['tag',,''],5,'div',21,35,14],[4,[5,['box__span',],[2,[5,,[1,[5,['tag',,''],5,'/div',21,35,14]],1],1]],36],[4,[5,['tag',,''],5,210,21,35,14],36]],[5,[,'__button',1],[5,['tag',,''],5,'button',21,35,14],[4,[5,['button',],[2,[5,,[1,[5,['tag',,''],5,'/button',21,35,14]],1],1]],36],[4,[5,['tag',,''],5,222,21,35,14],36]],[5,[,'__label',1],[5,['tag',,''],5,'label',21,35,14],[4,[5,['__label',],[2,[5,,[1,[5,['tag',,''],5,'/label',21,35,14]],1],1]],36],[4,[5,['tag',,''],5,234,21,35,14],36]],[5,['templates','__templates',1],[5,['tag',,''],5,'templates',21,35,14],[4,[2,[5,,[1,[5,['tag',,''],5,'/templates',21,35,14]],1],1],36],[4,[5,['tag',,''],5,245,21,35,14],36]],[5,['field','__field',2],[5,['tag',,''],5,'field',21,35,14],[4,[0,''+String.fromCharCode(10)+''+String.fromCharCode(13)+''],36],[5,['contentarea',],[2,[5,,[1,[5,['tag',,''],5,'/field',21,35,14]],1]]],[4,[5,['tag',,''],5,258,21,35,14],36]]],[4,[5,[,,''+String.fromCharCode(10)+''],[5,['tag',,''],5,'br',21,35,14]],[5,[,,''+String.fromCharCode(10)+''+String.fromCharCode(10)+''],[5,['tag',,''],5,'p',21,35,14]]],[5,['unknown',],[5,['tag',,''],5,[5,,[4,33,36],34],21,35,14]],[4,[5,[,,'<'],[5,['amp',],'&','lt',';']],[5,[,,'>'],[5,['amp',],275,'gt',277]],[5,['amp',],275,[2,[5,,[1,277],13],1],277]],[4,[5,['comment',,''],5,'!','--',[2,[5,,[1,[5,,287,288,14]],13]],[4,292,36]],[5,['comment',,''],5,287,[2,[5,,[1,14],13],1],14]],[5,[,,' '],[2,[0,' '+String.fromCharCode(10)+''+String.fromCharCode(13)+''+String.fromCharCode(9)+''],1]],13]] #rule = "" rule = content* content = styler / singleton / tag [unknown] / amp / comment / ." \n\r\t"+ -> " " / . #can't pass generic parameters forward to other generics! (yet) #bold = pair<"B"> [bold] #pair<type> = tag<type> (-tag<"/" type> .)* tag<"/" type>? styler = tag<"B"> inside:((-tag<"/B"> content)* [__b]) (tag<"/b"> / (endtag [unknown])?) -> inside [bold] styler = tag<"i"> inside:((-tag<"/i"> content)* [__i]) tag<"/i">? -> inside [__i] styler = tag<"u"> inside:((-tag<"/u"> content)* [__u]) tag<"/u">? -> inside [__u] styler = tag<"s"> inside:((-tag<"/s"> content)* [__s]) tag<"/s">? -> inside [__s] styler = tag<"a"> inside:((-tag<"/a"> content)* [a]) tag<"/a">? -> inside [link] styler = tag<"h1"> inside:((-tag<"/h1"> content)* [h1]) tag<"/h1">? -> inside [__h1] styler = tag<"h2"> inside:((-tag<"/h2"> content)* [h2]) tag<"/h2">? -> inside [__h2] styler = tag<"h3"> inside:((-tag<"/h3"> content)* [h3]) tag<"/h3">? -> inside [__h3] styler = tag<"h4"> inside:((-tag<"/h4"> content)* [h4]) tag<"/h4">? -> inside [__h4] styler = tag<"h5"> inside:((-tag<"/h5"> content)* [h5]) tag<"/h5">? -> inside [__h5] styler = tag<"h6"> inside:((-tag<"/h6"> content)* [h6]) tag<"/h6">? -> inside [__h6] styler = tag<"script"> inside:((-tag<"/script"> .)* [__code]) tag<"/script">? -> "" styler = tag<"style"> inside:((-tag<"/style"> .)* [__code]) tag<"/style">? -> "" styler = tag<"xmp"> inside:((-tag<"/xmp"> .)* ) tag<"/xmp">? -> "" styler = tag<"ol"> inside:((stylerLI / -tag<"/ol"> .)* ) tag<"/ol">? -> inside [__ol] stylerLI = tag<"li"> inside:((-tag<"/li">-tag<"/ol"> .)* ) tag<"/li">? -> inside [__li] # styler special! styler = tag<"div"> inside:((-tag<"/div"> content)+ [box__span] / "") tag<"/div">? -> inside [box__span] styler = tag<"button"> inside:((-tag<"/button"> content)+ [button] / "") tag<"/button">? -> inside [__button] styler = tag<"label"> inside:((-tag<"/label"> content)+ [__label] / "") tag<"/label">? -> inside [__label] styler = tag<"templates"> inside:((-tag<"/templates"> content)+ / "") tag<"/templates">? [templates] -> inside [__templates] #styler = (tag<"field"> " "* ."\n\r"? [__div]) ." \t\n\r"* inside:((-tag<"/field"> content)* [content__div]) (tag<"/field"> [__div])? [field] -> inside [__field] styler = (tag<"field">) ."\n\r"? inside:((-tag<"/field"> content)* [contentarea]) (tag<"/field">)? [field] -> inside [__field] singleton = tag<"br"> -> "\n" singleton = tag<"p"> -> "\n\n" tag<title> = "<" title -."ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz" ((-."<>" .)* ) ">" [tag] -> "" tag = tag<"/"? ."ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"+> endtag = tag<"/" ."ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"+> amp = amp<"lt"> -> "<"; amp = amp<"gt"> -> ">" amp = amp<(-";" .)+> amp<code> = "&" code ";" [amp] comment = "<" "!" "--" (-("!" "--" ">") .)* ("!" "--" ">")? [comment] -> "" comment = "<" "!" (-">" .)+ ">" [comment] -> ""

acknowledgments

Canvas

Getting finger art into your projects is what MacPaint used to be for. This works with a touch screen pretty well. And IE8 runs it okay. There are much better painting apps, but I'd like to get the general technique down.

←
← store

← background
← border

← tool
← color
← location empty
← pushed
← path

Editing is enabled