<!doctype html>
<html>
<head>
<title>Local Font Scribbling - RJM Programming - July, 2019</title>
<style>
.black { color: black; }
</style>
<script type='text/javascript'>

var lookout=false, lookoutfrom=[];
var aconto=null, atwoconto=null;
var ourdocsrc='<table id="ftable" border="5"><tbody id="ftbody"><tr id="ftr"><td id="ftd" style="background-color:lightgreen;"><!--canvas id=top_canvas width=100 height=100 style="position:absolute;top:42px;left:0px;width:50px;height:50px;display:none;z-index:-8;"></canvas--><div style="overflow:auto;width:70px;height:70px;z-index:55;"><iframe onload="top.getcanvas(this);" title="Local font character editor window" style="display:block;z-index:55;" id="top_iframe" src="./signature_signature.html?nocookies=y&letter=0"></iframe></div><input type="hidden" id="rerasterize" value=""><input type="hidden" id="refontnearest" value=""><input type="hidden" id="refontc" value="#000000"><select style="float:right;" onchange="top.showiframes(String.fromCharCode(this.value));"><option value="48" selected="">0</option><option value="49">1</option><option value="50">2</option><option value="51">3</option><option value="52">4</option><option value="53">5</option><option value="54">6</option><option value="55">7</option><option value="56">8</option><option value="57">9</option><option value="65">A</option><option value="66">B</option><option value="67">C</option><option value="68">D</option><option value="69">E</option><option value="70">F</option><option value="71">G</option><option value="72">H</option><option value="73">I</option><option value="74">J</option><option value="75">K</option><option value="76">L</option><option value="77">M</option><option value="78">N</option><option value="79">O</option><option value="80">P</option><option value="81">Q</option><option value="82">R</option><option value="83">S</option><option value="84">T</option><option value="85">U</option><option value="86">V</option><option value="87">W</option><option value="88">X</option><option value="89">Y</option><option value="90">Z</option><option value="97">a</option><option value="98">b</option><option value="99">c</option><option value="100">d</option><option value="101">e</option><option value="102">f</option><option value="103">g</option><option value="104">h</option><option value="105">i</option><option value="106">j</option><option value="107">k</option><option value="108">l</option><option value="109">m</option><option value="110">n</option><option value="111">o</option><option value="112">p</option><option value="113">q</option><option value="114">r</option><option value="115">s</option><option value="116">t</option><option value="117">u</option><option value="118">v</option><option value="119">w</option><option value="120">x</option><option value="121">y</option><option value="122">z</option><option value="33">!</option><option value="34">"</option><option value="35">#</option><option value="36">$</option><option value="37">%</option><option value="38">&</option><option value="39">"</option><option value="40">(</option><option value="41">)</option><option value="42">*</option><option value="43">+</option><option value="44">,</option><option value="45">-</option><option value="46">.</option><option value="47">/</option><option value="123">{</option><option value="124">|</option><option value="126">~</option><option value="58">:</option><option value="59">;</option><option value="60"><</option><option value="61">=</option><option value="62">></option><option value="63">?</option><option value="64">@</option><option value="126">~</option></select></td></tr><tr><td id="theletter" style="background-color:lightblue;border:2px solid green;">Arial_12px_normal<br>   <input type="button" onclick="top.processi(String.fromCharCode(48));" title="Click me when my character has been digitised above" style="border:3px solid pink;z-index:55;cursor:pointer;text-decoration:none;height:30px;" id="aletter" value="0"></td></tr></tbody></table><input name=raster id=raster type=hidden value=""></input><div id=dcanvas style="z-index:-9;display:none;"></div><div id=ddcanvas></div><div id=fonti></div>';
var ourds=ourdocsrc.split('<option value="');
var iourds=1;
var cca=32;
var celem=null;
var learnfont=false;
var learnfontmode='BOTH';
var taipos=-1, tajpos=-1;
var docurl=document.URL;
var sels='';
var namefont='Arial_12px_normal';
var yourfonts='~';
var lelem=null, lelemc;
var bcanvas='';
var compcanv=null, compcanvc, interimcanv=null, interimcanvc, origlist='', curx=0, cury=0, cid='', cdone=false, lastcid='';
var delim1=String.fromCharCode(9), delim2=String.fromCharCode(11);
var xcurx=0, xcury=0;
var sparelelem=lelem, sparelelemc=lelemc;
var sparecurx=curx, sparecury=cury;


function retsigsig(incca) {
var retval='y', sofar='', wasv='', wasvp='';

if (learnfont && docurl.indexOf('blankify=') == -1) {
if (localStorage) {
if (localStorage.getItem('fd_' + namefont)) {
if (local_font != '') {
local_font=decodeURIComponent(localStorage.getItem('fd_' + namefont));
//alert('36:' + local_font);
}
sofar=decodeURIComponent(localStorage.getItem('fd_' + namefont));
if (sofar.indexOf('.000000000' + ('000' + ('' + incca)).slice(-3)) != -1) {
if ((sofar + ';').indexOf('.000000000' + ('000' + ('' + incca)).slice(-3) + ',') == -1) {
wasv='.000000000' + ('000' + ('' + incca)).slice(-3);
wasvp=(sofar + ';').split(wasv)[0].split(';')[eval(-1 + (sofar + ';').split(wasv)[0].split(';').length)];
//alert(aconto.getElementById("raster").value + ' .+. ;' + wasvp + wasv);
} else {
wasv='000000000' + ('000' + ('' + incca)).slice(-3) + (sofar + '.000000000').split('000000000' + ('000' + ('' + incca)).slice(-3))[1].split('.000000000')[0] + '.000000000';
//alert(wasv + ' +++ ' + sofar);
if (wasv.indexOf(';') != -1 && (wasv + '~').split(';')[eval(-1 + (wasv + '~').split(';').length)].indexOf(',') == -1) {
//alert('initial ' + wasv + ' ++ ' + sofar);
//alert('first ' + wasv + ' ++get rid of ' + ';' + (wasv + '~').split(';')[eval(-1 + (wasv + '~').split(';').length)].split('.')[0] + '.' + ' ...' + sofar);
wasv="." + ((wasv + '~').replace(';' + (wasv + '~').split(';')[eval(-1 + (wasv + '~').split(';').length)].split('.')[0] + '.','').replace('.000000000','').replace('000000000~','').replace('~',''));
//alert(wasv + ' ++get rid of ' + ';' + (wasv + '~').split(';')[eval(-1 + (wasv + '~').split(';').length)].split('.')[0] + '.' + ' ...' + sofar);
} else {
wasv="." + wasv.replace('.000000000','');
//alert(wasv + ' +!+ ' + sofar);
}
wasvp=(sofar + ';').split(wasv)[0].split(';')[eval(-1 + (sofar + ';').split(wasv)[0].split(';').length)];
//alert(wasvp + wasv + ' +=+ ' + sofar);
} }
}
if ((wasvp + wasv) == '') wasv='0';
if ((wasvp + wasv).indexOf(',') == -1) wasv+=',0';
//document.title=("-" + (wasvp + wasv).replace('.000000000' + ('000' + ('' + incca)).slice(-3),'').replace(/\;/g,',-') + ' should not contain ' + '.000000000' + ('000' + ('' + incca)).slice(-3));
//return 'y';
if (("-" + (wasvp + wasv).replace('.000000000' + ('000' + ('' + incca)).slice(-3),'').replace(/\;/g,',-')) != "-0,0") {
return "-" + (wasvp + wasv).replace('.000000000' + ('000' + ('' + incca)).slice(-3),'').replace(/\;/g,',-');
}
}
}

return retval;
}

function getcanvas(ioiso) {
//alert(48);
if (ioiso != null) {
//alert(148);
//alert(248);
atwoconto = (ioiso.contentWindow || ioiso.contentDocument);
//alert(348);
if (atwoconto != null) {
//alert(448);
if (atwoconto.document) { atwoconto = atwoconto.document; }
//alert(548);
//alert(45);
lelem=atwoconto.getElementById('canvaselement');
lelem.width=70;
lelem.height=70;
lelemc=lelem.getContext('2d');
if (bcanvas == '') { bcanvas=lelem.toDataURL('image/png'); }
//if (lelem != null) { alert(455); }
}
}
}

function iois(ioiso) {
if (ioiso != null) {
if (ioiso.srcdoc != '') {
aconto = (ioiso.contentWindow || ioiso.contentDocument);
if (aconto != null) {
if (aconto.document) { aconto = aconto.document; }
}
}
}
}

function onlhuh() {
interimcanv=document.getElementById('cinterim');
compcanv=document.getElementById('compositeimages');
for (var ij=1; ij<ourds.length; ij++) {
document.getElementById('arialspan').innerHTML+='<span>' + String.fromCharCode(ourds[ij].split('"')[0]) + '</span>';
document.getElementById('arial_span').innerHTML+='' + String.fromCharCode(ourds[ij].split('"')[0]); // + '<br>';
}
origlist=document.getElementById('arialspan').innerHTML.replace(/\<span\>/g,'').replace(/\<\/span\>/g,'').replace(/\ \;/g, ' ').replace(/\&\;/g, '&').replace(/\>\;/g, '>').replace(/\<\;/g, '<');
//alert('here');
compcanv.width=eval(70 * eval('' + origlist.length));
compcanv.height=70;
compcanv.style.width='' + eval(70 * eval('' + origlist.length)) + 'px';
compcanv.style.height='70px';
compcanvc=compcanv.getContext('2d');
interimcanvc=interimcanv.getContext('2d');
zonlhuh(String.fromCharCode(ourds[iourds].split('"')[0]));
iourds++;
//alert(iourds);
if (('' + document.URL).toLowerCase().indexOf('rjmprogramming.com.au') != -1) {
document.getElementById('ifsrc').src='//www.rjmprogramming.com.au/PHP/fgc/?ipinto=y';
document.getElementById('ipform').action='//www.rjmprogramming.com.au/PHP/fgc/';
setTimeout(ath, 2000);
} else {
document.getElementById('ifsrc').src='fgc/?ipinto=y';
document.getElementById('ipform').action='fgc/';
setTimeout(ath, 2000);
}
}

function ath() {
if (document.getElementById('ipinto').value.indexOf('.png') != -1) {
//alert(document.getElementById('ifsrc').src.replace('?ipinto=y', document.getElementById('ipinto').value));
document.getElementById('compimg').src=document.getElementById('ifsrc').src.replace('?ipinto=y', document.getElementById('ipinto').value);
document.getElementById('spaninto').innerHTML='<select style="display:inline-block;" onchange="recall(this.value);"><option value="">Recall ...</option><option value="' + document.getElementById('ipinto').value + '">Your Local Font</option></select> ';
}
}

function zonlhuh(azero) {
//document.body.innerHTML+="<iframe frameborder=0 width=167 height=182 onload='iois(this);' id=myif srcdoc=''></iframe>";
document.getElementById('lhc').innerHTML="<iframe frameborder=0 width=167 height=182 onload='iois(this);' id=myif srcdoc=''></iframe>";
document.getElementById('myif').srcdoc=ourdocsrc.replace(' value="0"></td>',' value="' + azero + '"></td>').replace(' selected="">0</option>', '>0</option>').replace('>' + azero + '</option>', ' selected="">' + azero + '</option>').replace('&letter=0"', '&letter=' + azero + '"').replace("String.fromCharCode(48)", "String.fromCharCode(" + azero.charCodeAt() + ")");

if (document.getElementById('dcanvas')) {
if (document.getElementById('dcanvas').innerHTML == '') {

//setTimeout(docwidths, 1000);

// Thanks to https://stackoverflow.com/questions/7562503/getting-mouse-position-in-keyboard-event
document.addEventListener('mousemove', function(mouseMoveEvent){
if (mouseMoveEvent.pageX) {
//mousePosition.x = mouseMoveEvent.pageX;
//mousePosition.y = mouseMoveEvent.pageY;
taipos=taipos;
tajpos=tajpos;
} else {
//mousePosition.x = mouseMoveEvent.clientX;
//mousePosition.y = mouseMoveEvent.clientY;
taipos=taipos;
tajpos=tajpos;
}
}, false);


//ael(document.getElementById(focusto));

//document.addEventListener('keydown', function(keyDownEvent){
// iuc=false;
//}, false);

if (window.localStorage) {
for (var iq in window.localStorage) {
val = localStorage.getItem(iq);
if (val) {
//value = val.split(","); //splitting string inside array to get name
//alert(iq);
if (iq.substring(0,3) == 'tp_') {
document.getElementById('ssaveas').innerHTML+='<option value="' + iq.substring(3) + '">Recall "' + iq.substring(3) + '"</option>';
}
}
}
}
//alert(0);
var celem_style_width=70; //'' + eval(window.getComputedStyle(document.getElementById('ibody'), null).getPropertyValue("width").replace('px','').replace('%','').replace('vh','') * 0.85) + 'px';
//alert(30);
var celem_style_width100=celem_style_width; //'' + eval(window.getComputedStyle(document.getElementById('motherboard'), null).getPropertyValue("width").replace('px','').replace('%','').replace('vh','') * 1.00) + 'px';
//alert(40);
var celem_width=celem_style_width=70; //'' + eval(window.getComputedStyle(document.getElementById('motherboard'), null).getPropertyValue("width").replace('px','').replace('%','').replace('vh','') * 1.00) + 'px'; //0.85);
//alert(50);
var celem_style_height=70; //'' + eval(window.getComputedStyle(document.getElementById('ibody'), null).getPropertyValue("height").replace('px','').replace('%','').replace('vh','')) + 'px';
//alert(60);
var celem_style_height100=celem_style_height; //'' + eval(window.getComputedStyle(document.getElementById('motherboard'), null).getPropertyValue("width").replace('px','').replace('%','').replace('vh','') * 1.00) + 'px';
var celem_height=celem_style_height; //'' + eval(window.getComputedStyle(document.getElementById('motherboard'), null).getPropertyValue("height").replace('px','').replace('%','').replace('vh','')) + 'px';
//alert(1);
document.getElementById('dcanvas').innerHTML="<canvas onfocus=\"testcanvas(this,0);\" onclick=\"testcanvas(this,1);\" title=\"Double click me to reveal textareas again\" id=ccanvas style=\"position:absolute;display:block;z-index:-9;top:1500px;left:0px;width:100%;height:100%;\"></canvas>";
//alert(11);
document.getElementById('ddcanvas').innerHTML="<br><span id=dddcanvas style=display:none;>    Canvas Image:     </span><img onclick=\"var imgwo=window.open('','_blank','top=0,left=0,width=" + celem_width + ",height=" + celem_height + "'); imgwo.document.write('<html><b' + 'ody><img title=Canvas src=' + this.src + '></img></b' + 'ody></html>');\" title=\"Image of canvas to left in new window\" id=icanvas style='width:45px;display:none;border:1px solid green;background-color:white;' src=''></img><img onclick=\"var imgwo=window.open('','_blank','top=0,left=0,width=" + celem_width + ",height=" + celem_height + "'); imgwo.document.write('<html><b' + 'ody><img style=background-color:#000000; title=Canvas src=' + this.src + '></img></b' + 'ody></html>');\" title=\"Inverse image of canvas to left in new window\" id=jcanvas style='width:45px;display:none;border:1px solid green;background-color:#000000;' src=''></img><img onclick=\"var imgwo=window.open('','_blank','top=0,left=0,width=" + celem_width + ",height=" + celem_height + "'); imgwo.document.write('<html><b' + 'ody><img title=Canvas src=' + this.src + '></img></b' + 'ody></html>');\" title=\"Grayscale image of canvas to left in new window\" id=kcanvas style='width:45px;display:none;border:1px solid green;background-color:white;' src=''></img><img onclick=\"var imgwo=window.open('','_blank','top=0,left=0,width=" + celem_width + ",height=" + celem_height + "'); imgwo.document.write('<html><b' + 'ody><img title=Canvas src=' + this.src + '></img></b' + 'ody></html>');\" title=\"Flipped image of canvas to left in new window\" id=lcanvas style='width:45px;display:none;border:1px solid green;background-color:white;' src=''></img><img onclick=\"var imgwo=window.open('','_blank','top=0,left=0,width=" + celem_width + ",height=" + celem_height + "'); imgwo.document.write('<html><b' + 'ody><img title=Canvas src=' + this.src + '></img></b' + 'ody></html>');\" title=\"Flopped image of canvas to left in new window\" id=mcanvas style='width:45px;display:none;border:1px solid green;background-color:white;' src=''></img> <div id=ndrotate style=display:none;>Clockwise <input onchange=rotate(1); onblur=rotate(1); step=1 value=0 min=0 max=359 type=number id=nrotate style=width:40px;display:none;></input>°</div> <img onclick=\"var imgwo=window.open('','_blank','top=0,left=0,width=" + eval(2 * celem_width) + ",height=" + eval(2 * celem_height) + "'); imgwo.document.write('<html><b' + 'ody><img title=Canvas src=' + this.src + '></img></b' + 'ody></html>');\" title=\"Rotated image of canvas to left in new window\" id=ncanvas style='width:45px;display:none;border:1px solid green;background-color:white;' src=''></img><br><div id='dpixel' style='display:none;'><input style=display:none; type=button id=inraster value=Rasterize onclick=\" if (learnfont) { setTimeout(pib,4000); learnfont=false; } document.getElementById('ipixel').style.display='none'; document.getElementById('mysubmit').click(); document.getElementById('ipixel').style.top='0px'; document.getElementById('ipixel').style.zIndex='99'; document.getElementById('ipixel').style.display='block'; location.href='#ipixel'; \"</input><hr></div><br> ";
//alert(111);
celem=document.getElementById('ccanvas');
//if (celem) { alert(1111); }
ccontext=celem.getContext("2d");
//alert(11111);
celem.style.width=celem_style_width; //'' + eval(window.getComputedStyle(document.body, null).getPropertyValue("width").replace('px','').replace('%','').replace('vh','') * 0.85) + 'px';
celem.width=celem_style_width; //'' + eval(window.getComputedStyle(document.body, null).getPropertyValue("width").replace('px','').replace('%','').replace('vh','') * 0.85);
celem.style.height=celem_style_height; //'' + eval(window.getComputedStyle(document.getElementById('motherboard'), null).getPropertyValue("height").replace('px','').replace('%','').replace('vh','')) + 'px';
celem.height=celem_style_height; //'' + eval(window.getComputedStyle(document.getElementById('motherboard'), null).getPropertyValue("height").replace('px','').replace('%','').replace('vh',''));
//alert(document.getElementById('ibody').style.width + ' vs ' + celem_style_width + ' ' + celem_style_width100 + ' ' + eval(window.getComputedStyle(document.body, null).getPropertyValue("width").replace('px','').replace('%','').replace('vh','') * 0.85));
//alert('Canvas clear');
document.getElementById('dcanvas').style.width=celem_style_width;
document.getElementById('dcanvas').style.height=celem_style_height;
//document.getElementById('dpixel').style.width=celem_style_width; //'' + eval(window.getComputedStyle(document.body, null).getPropertyValue("width").replace('px','').replace('%','').replace('vh','') * 0.85) + 'px';
//document.getElementById('dpixel').style.height=celem_style_height; //'' + eval(window.getComputedStyle(document.getElementById('motherboard'), null).getPropertyValue("height").replace('px','').replace('%','').replace('vh','')) + 'px';
// document.getElementById('ipixel').style.width=celem_style_width; //'' + eval(window.getComputedStyle(document.body, null).getPropertyValue("width").replace('px','').replace('%','').replace('vh','') * 0.85) + 'px';
// document.getElementById('ipixel').style.height=celem_style_height; //'' + eval(window.getComputedStyle(document.getElementById('motherboard'), null).getPropertyValue("height").replace('px','').replace('%','').replace('vh','')) + 'px';
}
}


}

function processii() {
if (1 == 2) { processi('#'); }
}

function prerasterize() { // thanks to https://www.w3schools.com/tags/canvas_getimagedata.asp
var oursuffix='',notf=true, i, ii, jj, jcol=0, jrow=0, found=false, onerow=eval(4 * celem.width,celem.height), sofar='', wasv='', wasvp='';
var rasterc='', rasters=[];
var lastones=[0,0,0,0], interested=false, thisone=false, withlastone=false, cdelim='';
var offsetstotry=[eval(-4 - onerow),-onerow,eval(4 - onerow),-4,4,eval(onerow - 4),celem.width,eval(onerow + 4)];
if (1 == 2) {
var imgi=document.getElementById("icanvas");
var wasw=celem.width, wash=celem.height;
celem.width=wasw;
celem.height=wash;
ccontext.drawImage(imgi,0,0);
}
var imgData=null;
if (learnfont) {
if (localStorage) {
if (localStorage.getItem('fd_' + namefont)) {
sofar=decodeURIComponent(localStorage.getItem('fd_' + namefont));
if (local_font != '') {
local_font=sofar;
//alert('38:' + local_font);
}
if (docurl.indexOf('blankify=') != -1 && !done) sofar='';
//alert('?' + sofar);
done=true;
}
if (sofar == '') {
sofar=namefont + ':0.000000000127';
for (i = 0; i <= 32; i++) {
sofar+=';' + '0.000000000' + ('000' + ('' + i)).slice(-3);
}
}
if (sofar.indexOf('.000000000' + ('000' + ('' + cca)).slice(-3)) != -1) {
if ((sofar + ';').indexOf('.000000000' + ('000' + ('' + cca)).slice(-3) + ',') == -1) {
wasv='.000000000' + ('000' + ('' + cca)).slice(-3);
wasvp=(sofar + ';').split(wasv)[0].split(';')[eval(-1 + (sofar + ';').split(wasv)[0].split(';').length)];
//alert(aconto.getElementById("raster").value + ' .+. ;' + wasvp + wasv);
} else if (7 == 77) {
wasv='000000000' + ('000' + ('' + cca)).slice(-3) + (sofar + '.000000000').split('000000000' + ('000' + ('' + cca)).slice(-3))[1].split('.000000000')[0] + '.000000000';
//alert(wasv + ' 0+++ ' + sofar);
if (wasv.indexOf(';') != -1 && (wasv + '~').split(';')[eval(-1 + (wasv + '~').split(';').length)].indexOf(',') == -1) {
wasv="." + ((wasv + '~').replace(';' + (wasv + '~').split(';')[eval(-1 + (wasv + '~').split(';').length)].split('.')[0] + '.','').replace('~','')).replace('.000000000','');
//alert(wasv + ' 0++ ' + sofar);
} else {
wasv="." + wasv.replace('.000000000','');
//alert(wasv + ' 0+!+ ' + sofar);
}
wasvp=(sofar + ';').split(wasv)[0].split(';')[eval(-1 + (sofar + ';').split(wasv)[0].split(';').length)];
//alert(wasvp + wasv + ' 0+=+ ' + sofar);
} else {
wasv='000000000' + ('000' + ('' + cca)).slice(-3) + (sofar + '.000000000').split('000000000' + ('000' + ('' + cca)).slice(-3))[1].split('.000000000')[0] + '.000000000';
//alert(wasv + ' +++ ' + sofar);
if (wasv.indexOf(';') != -1 && (wasv + '~').split(';')[eval(-1 + (wasv + '~').split(';').length)].indexOf(',') == -1) {
wasv="." + ((wasv + '~').replace(';' + (wasv + '~').split(';')[eval(-1 + (wasv + '~').split(';').length)].split('.')[0] + '.','').replace('.000000000','').replace('000000000~','').replace('~',''));
//alert(wasv + ' ++ ' + sofar);
} else {
wasv="." + wasv.replace('.000000000','');
//alert(wasv + ' +!+ ' + sofar);
}
wasvp=(sofar + ';').split(wasv)[0].split(';')[eval(-1 + (sofar + ';').split(wasv)[0].split(';').length)];
//alert(wasvp + wasv + ' +=+ ' + sofar);
}
//alert(aconto.getElementById("raster").value + ' ... ;' + wasvp + wasv);
if (shouldmaintain) {
if ((wasvp + wasv).indexOf('.000000000' + ('000' + ('' + cca)).slice(-3)) != -1) {
oursuffix=(wasvp + wasv).split('.000000000' + ('000' + ('' + cca)).slice(-3))[1];
}
shouldmaintain=false;
}
sofar=sofar.replace(';' + wasvp + wasv, '');
}
//alert('removing ' + 'fd_' + namefont); //?
localStorage.removeItem('fd_' + namefont); //?
}
rasters=aconto.getElementById("raster").value.split(",");
if (document.getElementById('rerasterize')) {
if (document.getElementById('rerasterize').value != "") {
//alert(document.getElementById("rerasterize").value);
rasters=document.getElementById('rerasterize').value.split(",");
} //else {
//alert(aconto.getElementById("raster").value);
//}
}
if (rasters.length == 0 || aconto.getElementById("raster").value == "") {
sofar+=';0.000000000' + ('000' + ('' + cca)).slice(-3) + oursuffix;
//alert(cca + ' ' + aconto.getElementById("raster").value + ' why? ' + sofar);
} else {
sofar+=(';' + Math.floor(Math.abs((eval(rasters[0])))) + '.000000000' + ('000' + ('' + cca)).slice(-3)).replace('NaN','0') + oursuffix;
for (i = 1; i < rasters.length; i++) {
if (eval(rasters[i]) < 0) {
if ((i % 2) == 1) {
sofar+=(';' + rasters[i]);
} else {
sofar+=(';' + Math.floor(Math.abs((eval(rasters[i]))))).replace('NaN','0');
}
} else {
if ((i % 2) == 1) {
sofar+=(',' + rasters[i]);
} else {
sofar+=(',' + Math.floor(Math.abs((eval(rasters[i]))))).replace('NaN','0');
}
}
}
//alert(sofar);
}
if (localStorage) {
//alert(';' + wasvp + wasv + ' ... ' + sofar);
if (local_font != '') {
local_font=sofar;
//alert('39:' + local_font);
}
//alert('setItem ' + 'fd_' + namefont + ' ' + encodeURIComponent(sofar)); //?
localStorage.setItem('fd_' + namefont, encodeURIComponent(sofar));
return sofar;
}
} else {
imgData=ccontext.getImageData(0,0,celem.width,celem.height);
}
var data = imgData.data;

document.getElementById("width").value='' + celem.width;
document.getElementById("height").value='' + celem.height;

for (i = 0; i < data.length; i += 4) {
jcol=eval(i % onerow);
if (jcol == 0 && i != 0) {
jrow++; // row count
}
//if (i == 0) {
// alert('' + data[i] + ',' + data[i + 1] + ',' + data[i + 2] + ',' + data[i + 3]);
//}
thisone=(data[i] != 0 || data[i + 1] != 0 || data[i + 2] != 0 || data[i + 3] != 0);
if (!found && thisone) {
found=true;
lastones[0] = data[i];
lastones[1] = data[i + 1];
lastones[2] = data[i + 2];
lastones[3] = data[i + 3];
cdelim=data.length + '.' + onerow + ':';
}
if (thisone) {
withlastone=(data[i] != lastones[0] || data[i + 1] != lastones[1] || data[i + 2] != lastones[2] || data[i + 3] != lastones[3]);
if (withlastone) { // new thread
lastones[0] = data[i];
lastones[1] = data[i + 1];
lastones[2] = data[i + 2];
lastones[3] = data[i + 3];
rasterc+=cdelim + '' + eval(i / 4) + '.' + ('000' + ('' + data[i])).slice(-3) + ('000' + ('' + data[i + 1])).slice(-3) + ('000' + ('' + data[i + 2])).slice(-3) + ('000' + ('' + data[i + 3])).slice(-3);
data[i] = 0;
data[i + 1] = 0;
data[i + 2] = 0;
data[i + 3] = 0;
jj=i;
cdelim=';';
notf=false;
while (!notf) {
notf=true;
for (ii=0; ii<offsetstotry.length; ii++) {
if ((jj + offsetstotry[ii]) >= 0 && (jj + 4 + offsetstotry[ii]) < data.length) {
if (notf && data[jj + offsetstotry[ii]] == lastones[0] && data[jj + 1 + offsetstotry[ii]] == lastones[1] && data[jj + 2 + offsetstotry[ii]] == lastones[2] && data[jj + 3 + offsetstotry[ii]] == lastones[3]) {
notf=false;
jj+=offsetstotry[ii];
rasterc+=',' + eval(jj / 4);
//document.title=rasterc;
data[jj] = 0;
data[jj + 1] = 0;
data[jj + 2] = 0;
data[jj + 3] = 0;
}
}
}
}
}
}
}
if (learnfont) {
return rasterc;
}
//alert('rasterc=' + rasterc);
aconto.getElementById("raster").value=rasterc;
//rasterize();
return '';
}

function rasterize() { // thanks to https://www.w3schools.com/tags/canvas_getimagedata.asp
document.getElementById("dpixel").style.display='block';
document.getElementById("inraster").style.display='block';
}


function docgetclasssub(inc, intag, swith) {
if (1 == 3 && document.getElementsByClassName) {
return document.getElementsByClassName(inc);
} else {
var ijl;
var anarris=[];
var huhs=document.getElementsByTagName(intag);
for (ijl=0; ijl<huhs.length; ijl++) {
if (huhs[ijl].className.indexOf(inc) != -1) {
//alert('0:' + huhs[ijl].outerHTML);
if (swith != '') {
//alert('1:' + huhs[ijl].outerHTML);
document.getElementById('arialdiv').innerHTML=document.getElementById('arialdiv').innerHTML.replace(huhs[ijl].outerHTML, swith);
}
anarris.push(huhs[ijl]);
}
}
return anarris;
}
}


function docgetclass(inc, intag) {
if (document.getElementsByClassName) {
return document.getElementsByClassName(inc);
} else {
var ijl;
var anarris=[];
var huhs=document.getElementsByTagName(intag);
for (ijl=0; ijl<huhs.length; ijl++) {
if (huhs[ijl].className.indexOf(inc) != -1) {
anarris.push(huhs[ijl]);
}
}
return anarris;
}
}

function athy() {
var xid='';
if (lastcid != cid) {
lastcid=cid;
//alert('00:' + cid + curx + cury);
if (!cdone) {
//cdone=true;
//document.getElementById('compositeimages').style.display='block';
//document.getElementById('compositeimages').style.border='1px solid red';
compcanv=document.getElementById('compositeimages');
compcanvc=compcanv.getContext('2d');
//alert('0:' + cid + curx + cury);
}
//compcanvc.clearRect(curx,cury,70,70);
var isd=docgetclass('athy', 'img');
for (var jsd=0; jsd<isd.length; jsd++) {
//alert('1:' + cid + curx + cury);
xid=String.fromCharCode(eval('' + isd[jsd].id.replace('image','')));
curx=eval(70 * eval('' + origlist.indexOf(xid)));
//alert('compcanvc.drawImage(' + isd[jsd].id + ',0,0,70,70,' + curx + ',' + cury + ',70,70)');
compcanvc.drawImage(document.getElementById(isd[jsd].id),0,0,70,70,curx,cury,70,70); //,70,70);
//alert('2:' + cid + curx + cury);
}
}
}

function processi(alet) {
var inm='';
//if (aconto) {
//if (aconto.getElementById('top_iframe')) {
//alert('Rasterization of ' + alet + ' resulted in ' + aconto.getElementById('raster').value);
//}
//}
if (yourfonts.indexOf(delim1 + alet.charCodeAt() + delim2) != -1) {
inm=yourfonts.split(delim1 + alet.charCodeAt() + delim2)[1].split('~')[0];
yourfonts=yourfonts.replace(delim1 + alet.charCodeAt() + delim2 + inm,delim1 + alet.charCodeAt() + delim2 + aconto.getElementById('raster').value);
if (aconto) {
if (aconto.getElementById('top_iframe') && lelem.toDataURL('image/png') != bcanvas) {
cid='image' + alet.charCodeAt();
curx=eval(70 * eval('' + origlist.indexOf(alet)));
//alert('bcanvas.length=' + bcanvas.length + ' and lelem.length=' + lelem.toDataURL('image/png').length);
document.getElementById('image' + alet.charCodeAt()).src=lelem.toDataURL('image/png'); //alert('Rasterization of ' + alet + ' resulted in ' + aconto.getElementById('raster').value);
document.getElementById('ximage' + alet.charCodeAt()).src=lelem.toDataURL('image/png');
//alert(alet + ':' + eval(70 * eval('' + origlist.indexOf(alet))));
//document.getElementById('ximage' + alet.charCodeAt()).style.display='block';
//compcanvc.drawImage(document.getElementById('ximage' + alet.charCodeAt()), eval(70 * eval('' + origlist.indexOf(alet))), 0);
//document.getElementById('compositeimages').style.display='block';
//document.getElementById('compositeimages').style.border='1px solid red';
setTimeout(athy,1000);
document.getElementById('bsave').style.visibility='visible';
var ims=docgetclass('ximage' + alet.charCodeAt(), 'img');
for (var jims=0; jims<ims.length; jims++) {
ims[jims].src=lelem.toDataURL('image/png');
}
} else {
cid='image' + alet.charCodeAt();
curx=eval(70 * eval('' + origlist.indexOf(alet)));
setTimeout(athy,1000);
}
}
} else {
yourfonts+='~' + alet.charCodeAt() + '|' + aconto.getElementById('raster').value;
if (aconto) {
if (aconto.getElementById('top_iframe') && lelem.toDataURL('image/png') != bcanvas) {
cid='image' + alet.charCodeAt();
curx=eval(70 * eval('' + origlist.indexOf(alet)));
//alert('Bcanvas.length=' + bcanvas.length + ' and lelem.length=' + lelem.toDataURL('image/png').length);
document.getElementById('letterimages').innerHTML+='<img class=athy onload=" setTimeout(athy,1000); " width=70 height=70 style="display:inline-block;width:70px;height:70px;" id=image' + alet.charCodeAt() + ' src="' + lelem.toDataURL('image/png') + '"></img>'; //alert('Rasterization of ' + alet + ' resulted in ' + aconto.getElementById('raster').value);
document.getElementById('arialspan').innerHTML=document.getElementById('arialspan').innerHTML.replace('<span>' + alet + '</span>', '<img id=ximage' + alet.charCodeAt() + ' title="' + alet + '" style="display:inline-block;width:12px;" src="' + lelem.toDataURL('image/png') + '"></img>');
//alert(alet + ';' + origlist + ' ... ' + eval(70 * eval('' + origlist.indexOf(alet))));
//document.getElementById('ximage' + alet.charCodeAt()).style.display='block';
//compcanvc.drawImage(document.getElementById('ximage' + alet.charCodeAt()), eval(70 * eval('' + origlist.indexOf(alet))), 0);
//document.getElementById('compositeimages').style.display='block';
//document.getElementById('compositeimages').style.border='1px solid red';
document.getElementById('bsave').style.visibility='visible';
changethis(document.getElementById('arialdiv'));
} else {
if (lookout) { lookoutfrom.push(alet.replace('&','&').replace('>','>').replace('<','<').replace(' ',' ').replace('&amp;','&').replace('&lt;','<').replace('&gt;','>').replace('&nbsp;',' ')); }
document.getElementById('letterimages').innerHTML+='<span style="vertical-align:top;width:70px;height:70px;font-family:Arial;font-size:64px;">' + alet + '</span>'; //alert('Rasterization of ' + alet + ' resulted in ' + aconto.getElementById('raster').value);
cid='image' + alet.charCodeAt();
curx=eval(70 * eval('' + origlist.indexOf(alet)));
setTimeout(athy,1000);

}
}
//bcanvas='';
}
cca=eval('' + alet.charCodeAt());
prerasterize();
if (1 == 2) aconto.getElementById('raster').value='';
if (alet == '9') {
showiframes("A");
} else if (alet == 'Z') {
showiframes("a");
} else if (alet == 'z') {
alet=' ';
showiframes(String.fromCharCode(alet.charCodeAt() + 1));
} else if (String.fromCharCode(alet.charCodeAt() + 1) == '0') {
showiframes("{");
} else if (alet == '{') {
showiframes("|");
//} else if (alet == '"') {
// showiframes('"');
} else if (alet == '|') {
showiframes("~");
} else if (alet == '~') {
alet='9';
showiframes(String.fromCharCode(alet.charCodeAt() + 1));
} else if (alet == '@') {
showiframes("@");
//alert('Thanks for that. We have stored that font character set ready for later use.');
} else {
if (String.fromCharCode(alet.charCodeAt() + 1) == '"') {
showiframes('"');
} else if (String.fromCharCode(alet.charCodeAt() + 1) == '#') {
showiframes('#');
} else {
showiframes(String.fromCharCode(alet.charCodeAt() + 1));
}
}
//aconto.getElementById('raster').value=''; // new clearing
//aconto.getElementById('ccanvas').width=aconto.getElementById('ccanvas').width;
//aconto.getElementById('ccanvas').height=aconto.getElementById('ccanvas').height;
if (iourds < ourds.length) {
//alert(ourds[iourds].split('"')[0]);
zonlhuh(String.fromCharCode(ourds[iourds].split('"')[0]));
iourds++;
}
}

function showiframes(aalet) {
if (1 == 1) {
if (document.getElementById('image' + aalet.charCodeAt())) {
lelem.width=lelem.width;
lelem.height=lelem.height;
lelemc.drawImage(document.getElementById('image' + aalet.charCodeAt()), 0, 0);
} else {
lelem.width=lelem.width;
lelem.height=lelem.height;
}
return;
}
var tabs="", extra_as='<input type=hidden id=rerasterize value=></input><input type=hidden id=refontnearest value=""></input>';
var rss=retsigsig('' + aalet.charCodeAt());

if (aalet == '0' && sels == '') {
var qqlet=aalet, thanks=false;
//sels='<br><select style="float:right;" onchange="showiframes(String.fromCharCode(this.value));"><option value="48">0</option></select><br>';
sels='<select style="float:right;" onchange="showiframes(String.fromCharCode(this.value));"><option value="48">0</option></select>';
while (!thanks) {
if (qqlet == '9') {
qqlet="A";
sels=sels.replace("</select>","<option value='" + qqlet.charCodeAt() + "'>" + qqlet + "</option></select>");
} else if (qqlet == 'Z') {
qqlet="a";
sels=sels.replace("</select>","<option value='" + qqlet.charCodeAt() + "'>" + qqlet + "</option></select>");
} else if (qqlet == 'z') {
qqlet=' ';
qqlet=String.fromCharCode(qqlet.charCodeAt() + 1);
sels=sels.replace("</select>","<option value='" + qqlet.charCodeAt() + "'>" + qqlet + "</option></select>");
} else if (String.fromCharCode(qqlet.charCodeAt() + 1) == '0') {
qqlet="{";
sels=sels.replace("</select>","<option value='" + qqlet.charCodeAt() + "'>" + qqlet + "</option></select>");
} else if (qqlet == '{') {
qqlet="|";
sels=sels.replace("</select>","<option value='" + qqlet.charCodeAt() + "'>" + qqlet + "</option></select>");
} else if (qqlet == '|') {
qqlet="~";
sels=sels.replace("</select>","<option value='" + qqlet.charCodeAt() + "'>" + qqlet + "</option></select>");
} else if (qqlet == '~') {
qqlet='9';
qqlet=String.fromCharCode(qqlet.charCodeAt() + 1);
sels=sels.replace("</select>","<option value='" + qqlet.charCodeAt() + "'>" + qqlet + "</option></select>");
thanks=true; // alert('Thanks for that. We have stored that font character set ready for later use.');
} else if (qqlet == '@') {
qqlet="~";
sels=sels.replace("</select>","<option value='" + qqlet.charCodeAt() + "'>" + qqlet + "</option></select>");
//thanks=true; // alert('Thanks for that. We have stored that font character set ready for later use.');
} else {
if (String.fromCharCode(qqlet.charCodeAt() + 1) == '"') {
qqlet='"';
sels=sels.replace("</select>","<option value='" + qqlet.charCodeAt() + "'>" + qqlet + "</option></select>");
} else if (String.fromCharCode(qqlet.charCodeAt() + 1) == "'") {
qqlet="'";
sels=sels.replace('</select>','<option value="' + qqlet.charCodeAt() + '">' + qqlet + '</option></select>');
} else if (String.fromCharCode(qqlet.charCodeAt() + 1) == '#') {
qqlet="#";
sels=sels.replace("</select>","<option value='" + qqlet.charCodeAt() + "'>" + qqlet + "</option></select>");
} else {
qqlet=String.fromCharCode(qqlet.charCodeAt() + 1);
sels=sels.replace("</select>","<option value='" + qqlet.charCodeAt() + "'>" + qqlet + "</option></select>");
}
}
}
}


if (rss.replace('-0,0','').indexOf(',') != -1) {
extra_as+='<a style="float:right;cursor:pointer;text-decoration:underline;" onclick=" shouldmaintain=false; document.getElementById(' + "'" + 'top_iframe' + "'" + ').src=' + "'" + './signature_signature.html?nocookies=y&letter=' + encodeURIComponent(aalet) + "';" + '">Clear</a><br>';
extra_as+='<a style="float:right;cursor:pointer;text-decoration:underline;" onclick=" shouldmaintain=true; this.style.textDecoration=' + "'" + 'none' + "'" + '; ">Retain</a><br>';
extra_as+='<input style="float:right;width:60px;" title="This colour can superceed the last [black is #000000] colour via clicks you make at the top left font character editor window" type=color id=refontc value="' + document.getElementById('fontc').value + '"></input>';
} else {
extra_as+='<input type=hidden id=refontc value="' + document.getElementById('fontc').value + '"></input>';
}
if (aalet == "'") {
extra_as+=sels.replace(">'<", " selected>'<");
} else {
extra_as+=sels.replace('>' + aalet + '<', ' selected>' + aalet + '<');
}
if (aalet == '"') {
tabs="<hr><table id=ftable border=5><tbody id=ftbody><tr id=ftr><td id=ftd style='background-color:lightgreen;'><!--canvas id=top_canvas width=100 height=100 style='position:absolute;top:42px;left:0px;width:50px;height:50px;display:none;z-index:-8;'></canvas--><div style='overflow:auto;width:70px;height:70px;z-index:55;'><iframe style='display:block;z-index:55;' id='top_iframe' src='./signature_signature.html?nocookies=" + encodeURIComponent(rss) + "&letter=" + encodeURIComponent(aalet) + "'></iframe></div>" + extra_as + "</td></tr><tr><td id=theletter style='background-color:lightblue;border:2px solid green;'>" + namefont + "<br>   <input type=button onclick=parent.processi('" + '"' + "'); title='Click me when my character has been digitised above' style='border:3px solid pink;z-index:55;cursor:pointer;text-decoration:none;height:30px;' id='aletter' value=" + '"' + "></input></td></tr></tbody></table><hr>";
} else if (aalet == '#') {
tabs="<hr><table id=ftable border=5><tbody id=ftbody><tr id=ftr><td id=ftd style='background-color:lightgreen;'><!--canvas id=top_canvas width=100 height=100 style='position:absolute;top:42px;left:0px;width:50px;height:50px;display:none;z-index:-8;'></canvas--><div style='overflow:auto;width:70px;height:70px;z-index:55;'><iframe title='Local font character editor window' style='display:block;z-index:55;' id='top_iframe' src='./signature_signature.html?nocookies=" + encodeURIComponent(rss) + "&letter=" + encodeURIComponent(aalet) + "'></iframe></div>" + extra_as + "</td></tr><tr><td id=theletter style='background-color:lightblue;border:2px solid green;'>" + namefont + "<br>   <input type=button onclick=parent.processii(); title='Click me when my character has been digitised above' style='border:3px solid pink;z-index:55;cursor:pointer;text-decoration:none;height:30px;' id='aletter' value=" + '#' + "></input></td></tr></tbody></table><hr>";
} else if (aalet == "'") {
tabs="<hr><table id=ftable border=5><tbody id=ftbody><tr id=ftr><td id=ftd style='background-color:lightgreen;'><!--canvas id=top_canvas width=100 height=100 style='position:absolute;top:42px;left:0px;width:50px;height:50px;display:none;z-index:-8;'></canvas--><div style='overflow:auto;width:70px;height:70px;z-index:55;'><iframe title='Local font character editor window' style='display:block;z-index:55;' id='top_iframe' src=\"./signature_signature.html?nocookies=" + encodeURIComponent(rss) + "&letter=" + encodeURIComponent(aalet) + "\"></iframe></div>" + extra_as + "</td></tr><tr><td id=theletter style='background-color:lightblue;border:2px solid green;'>" + namefont + "<br>   <input type=button onclick=parent.processi(\"" + "'" + "\"); title='Click me when my character has been digitised above' style='border:3px solid pink;z-index:55;cursor:pointer;text-decoration:none;height:30px;' id='aletter' value=\"'\"></input></td></tr></tbody></table><hr>";
//alert(tabs);
} else {
tabs="<hr><table id=ftable border=5><tbody id=ftbody><tr id=ftr><td id=ftd style='background-color:lightgreen;'><!--canvas id=top_canvas width=100 height=100 style='position:absolute;top:42px;left:0px;width:50px;height:50px;display:none;z-index:-8;'></canvas--><div style='overflow:auto;width:70px;height:70px;z-index:55;'><iframe title='Local font character editor window' style='display:block;z-index:55;' id='top_iframe' src='./signature_signature.html?nocookies=" + encodeURIComponent(rss) + "&letter=" + encodeURIComponent(aalet) + "'></iframe></div>" + extra_as + "</td></tr><tr><td id=theletter style='background-color:lightblue;border:2px solid green;'>" + namefont + "<br>   <input type=button onclick=\"parent.processi('" + aalet + "');\" title='Click me when my character has been digitised above' style='border:3px solid pink;z-index:55;cursor:pointer;text-decoration:none;height:30px;' id='aletter' value=" + aalet + "></input></td></tr></tbody></table><hr>";
}
//alert(tabs);
//document.getElementById('fonti').innerHTML=tabs;
aconto.getElementById('fonti').innerHTML=tabs;
}

function changethis(divo) {
var outsidec='', charis=' ', ic=0, ii=0, jj=0, outside=true, pref='', suff='', dcs=[], jjj=0;

//divo.innerHTML=divo.innerHTML.replace(/\ \;/g, ' ').replace(/\&\;/g, '&').replace(/\>\;/g, '>').replace(/\<\;/g, '<');
outside=true;
jjj=divo.innerHTML.length;
for (jj=eval(-1 + divo.innerHTML.length); jj>=0; jj--) {
if (jj > jjj) {
jjj=jjj;
} else if (divo.innerHTML.substring(jj, eval(1 + jj)) == '>' && outside) {
outside=false;
jjj=divo.innerHTML.length;
} else if (divo.innerHTML.substring(jj, eval(1 + jj)) == '<' && !outside) {
outside=true;
jjj=divo.innerHTML.length;
} else if (outside) { // && divo.innerHTML.substring(jj, eval(1 + jj)) == outsidec.substring(ii, eval(1 + ii))) {
pref='';
suff='';
jjj=jj;
if (jjj > 0) { jjj--; while (jjj >= 0 && divo.innerHTML.substring(jjj, eval(1 + jj)).substring(0,1) != '>') { jjj--; } jjj++; pref=divo.innerHTML.substring(0, jjj); }
if (jj < eval(-1 + divo.innerHTML.length)) { suff=divo.innerHTML.substring(eval(1 + jj)); }
//alert(pref + ' ...' + '<span class=span' + outsidec.substring(ii, eval(1 + ii)).charCodeAt() + '>' + outsidec.substring(ii, eval(1 + ii)) + '</span>' + '... ' + suff);
divo.innerHTML=(pref + '<span class=span' + divo.innerHTML.substring(jjj, eval(1 + jj)).charCodeAt(0) + '>' + divo.innerHTML.substring(jjj, eval(1 + jj)) + '</span>' + suff).replace(/\ \;/g, ' ');
}
//eval("divo.innerHTML=divo.innerHTML.replace(/\\" + outsidec.substring(ii, eval(1 + ii)) + "/g, '<span>" + outsidec.substring(ii, eval(1 + ii)) + "</span>');");
}
outside=true;

outsidec=('' + (divo.innerText || divo.contentWindow || divo.contentDocument));
//alert(divo.innerHTML + ' versus ' + outsidec);
if (outsidec != '') {
for (ii=0; ii<outsidec.length; ii++) {
charis=outsidec.substring(ii, eval(1 + ii));
ic=charis.charCodeAt();
//charis=charis.replace('<', '<').replace('>', '>')
if (charis != ' ') {
if (document.getElementById('ximage' + ic)) {
//alert('span' + outsidec.substring(ii, eval(1 + ii)).charCodeAt());
dcs=docgetclasssub('span' + outsidec.substring(ii, eval(1 + ii)).charCodeAt(), 'span', document.getElementById('ximage' + ic).outerHTML.replace(' id=', ' class='));
//while (divo.innerHTML.indexOf('<span>' + outsidec.substring(ii, eval(1 + ii)) + '</span>') != -1) {
//divo.innerHTML=divo.innerHTML.replace('<span>' + outsidec.substring(ii, eval(1 + ii)) + '</span>', document.getElementById('ximage' + ic).outerHTML.replace(' id=', ' class='));
//}
} else if (divo.innerHTML.indexOf(outsidec.substring(ii, eval(1 + ii)) + '</span>') == -1) {
outside=true;
jjj=divo.innerHTML.length;
for (jj=eval(-1 + divo.innerHTML.length); jj>=0; jj--) {
if (jj > jjj) {
jjj=jjj;
} else if (divo.innerHTML.substring(jj, eval(1 + jj)) == '>' && outside) {
outside=false;
jjj=divo.innerHTML.length;
} else if (divo.innerHTML.substring(jj, eval(1 + jj)) == '<' && !outside) {
outside=true;
jjj=divo.innerHTML.length;
} else if (outside && divo.innerHTML.substring(jj, eval(1 + jj)) == outsidec.substring(ii, eval(1 + ii))) {
pref='';
suff='';
jjj=jj;
if (jjj > 0) { pref=divo.innerHTML.substring(0, jjj); }
if (jj < eval(-1 + divo.innerHTML.length)) { suff=divo.innerHTML.substring(eval(1 + jj)); }
//alert(pref + ' ...' + '<span class=span' + outsidec.substring(ii, eval(1 + ii)).charCodeAt() + '>' + outsidec.substring(ii, eval(1 + ii)) + '</span>' + '... ' + suff);
divo.innerHTML=(pref + '<span class=span' + outsidec.substring(ii, eval(1 + ii)).charCodeAt(0) + '>' + outsidec.substring(ii, eval(1 + ii)) + '</span>' + suff).replace(/\ \;/g, ' ');
}
//eval("divo.innerHTML=divo.innerHTML.replace(/\\" + outsidec.substring(ii, eval(1 + ii)) + "/g, '<span>" + outsidec.substring(ii, eval(1 + ii)) + "</span>');");
}
}
outsidec=outsidec.replace(outsidec.substring(ii, eval(1 + ii)), ' ');
}
}
}
}

function saveit() {
//alert(1);
document.getElementById('continto').value=encodeURIComponent(compcanv.toDataURL('image/png'));
//alert(11);
document.getElementById('subm').click();
//alert(111);
}

function spanize(spa) {
var idisa=('' + spa.id), outside=true, jj=0, pref='', suff='';
if (idisa != '') {
var vsita=';'+ ('' + (spa.innerText || spa.contentWindow || spa.contentDocument)); //.replace(/\&\;/g,'&').replace(/\<\;/g,'<').replace(/\>\;/g,'>').replace(/\ \;/g,' ');
//alert(vsita);
var dih=document.getElementById(idisa).innerHTML;
dih=dih.replace(/\&\;/g,"<span>\@!@amp;</span>");
dih=dih.replace(/\<\;/g,"<span>\@!@lt;</span>");
dih=dih.replace(/\>\;/g,"<span>\@!@gt;</span>");
dih=dih.replace(/\ \;/g,"<span>\@!@nbsp;</span>");
dih=dih.replace(/\<span\>\@\!\@/g,"<span>\&");

for (var ipl=0; ipl<vsita.length; ipl++) {
if (vsita.substring(ipl, eval(1 + ipl)) == '&') {
dih=dih; //document.getElementById(idisa).innerHTML=document.getElementById(idisa).innerHTML.replace('&', '<span>' + vsita.substring(ipl, eval(1 + ipl)) + '</span>');
} else if (vsita.substring(ipl, eval(1 + ipl)) == '<') {
dih=dih; //document.getElementById(idisa).innerHTML=document.getElementById(idisa).innerHTML.replace('<', '<span>' + vsita.substring(ipl, eval(1 + ipl)) + '</span>');
} else if (vsita.substring(ipl, eval(1 + ipl)) == '>') {
dih=dih; //document.getElementById(idisa).innerHTML=document.getElementById(idisa).innerHTML.replace('>', '<span>' + vsita.substring(ipl, eval(1 + ipl)) + '</span>');
} else if (vsita.substring(ipl, eval(1 + ipl)) == ' ') {
dih=dih; //document.getElementById(idisa).innerHTML=document.getElementById(idisa).innerHTML.replace(' ', '<span>' + vsita.substring(ipl, eval(1 + ipl)) + '</span>');
} else {
outside=true;
jjj=dih.length;
for (jj=eval(-1 + dih.length); jj>=0; jj--) {
if (jj > jjj) {
jjj=jjj;
} else if (dih.substring(jj, eval(1 + jj)) == '>' && outside) {
outside=false;
jjj=dih.length;
} else if (dih.substring(jj, eval(1 + jj)) == '<' && !outside) {
outside=true;
jjj=dih.length;
} else if (outside && dih.substring(jj, eval(1 + jj)) == vsita.substring(ipl, eval(1 + ipl))) {
pref='';
suff='';
jjj=jj;
if (jjj > 0) { jjj--; while (jjj >= 0 && dih.substring(jjj, eval(1 + jj)).substring(0,1) != '>') { jjj--; } jjj++; pref=dih.substring(0, jjj); }
if (jj < eval(-1 + dih.length)) { suff=dih.substring(eval(1 + jj)); }
//alert(pref + ' ...' + '<span class=span' + outsidec.substring(ii, eval(1 + ii)).charCodeAt() + '>' + outsidec.substring(ii, eval(1 + ii)) + '</span>' + '... ' + suff);
dih=(pref + '<span>' + dih.substring(jjj, eval(1 + jj)) + '</span>' + suff);
}
//eval("divo.innerHTML=divo.innerHTML.replace(/\\" + outsidec.substring(ii, eval(1 + ii)) + "/g, '<span>" + outsidec.substring(ii, eval(1 + ii)) + "</span>');");
}
outside=true;
}
}
while (dih.indexOf('<span><span><span>&l</span><span>t</span><span>;</span></span></span>') != -1) {
dih=dih.replace('<span><span><span>&l</span><span>t</span><span>;</span></span></span>', '<span><</span>');
}
while (dih.indexOf('<span><span><span>&g</span><span>t</span><span>;</span></span></span>') != -1) {
dih=dih.replace('<span><span><span>&g</span><span>t</span><span>;</span></span></span>', '<span>></span>');
}
while (dih.indexOf('<span><span><span>&a</span><span>m</span><span>p</span><span>;</span></span></span><span>') != -1) {
dih=dih.replace('<span><span><span>&a</span><span>m</span><span>p</span><span>;</span></span></span><span>', '<span>&</span>');
}
while (dih.indexOf('<span><span>') != -1) {
dih=dih.replace('<span><span>','<span>');
}
//alert(dih);
document.getElementById(idisa).innerHTML=dih; //.replace(/\&\;/g,'&').replace(/\<\;/g,'<').replace(/\>\;/g,'>').replace(/\ \;/g,' ');
//alert(document.getElementById(idisa).innerHTML);
return document.getElementById(idisa);
} else {
return spa;
}
}

function letsomethrough(spanele) {
if (('' + spanele.innerHTML) != '') {
var vsit=('' + (spanele.innerText || spanele.contentWindow || spanele.contentDocument));
//alert('5:' + ('' + vsit));
if (('' + spanele.innerHTML).replace(/\<br\>/g,String.fromCharCode(10)).replace(/\<br\/\>/g,String.fromCharCode(10)).replace(/\<br\ \/\>/g,String.fromCharCode(10)).replace(/\&\;/g,'&').replace(/\<\;/g,'<').replace(/\>\;/g,'>').replace(/\ \;/g,' ') == vsit) {
//alert(('' + spanele.innerHTML).replace(/\&\;/g,'&').replace(/\<\;/g,'<').replace(/\>\;/g,'>').replace(/\ \;/g,' '));
spanele=spanize(spanele);
} //else {
//alert('6:' + ('' + spanele.innerHTML));
//}
var idis=('' + spanele.id);
if (lookoutfrom.length > 0 && idis != '') {
for (var ipo=0; ipo<lookoutfrom.length; ipo++) {
//alert(spanele.innerHTML);
//alert("spanele.innerHTML=spanele.innerHTML.replace(/\\<span\\>\\" + lookoutfrom[ipo] + "\\</g, '<span style=color:black;>" + lookoutfrom[ipo] + "<');");
//if (lookoutfrom[ipo].length > 1 || lookoutfrom[ipo] == '>' || lookoutfrom[ipo] == '<') { alert(lookoutfrom[ipo]); }
while (document.getElementById(idis).innerHTML.indexOf('<span>' + lookoutfrom[ipo] + '</span>') != -1) {
document.getElementById(idis).innerHTML=document.getElementById(idis).innerHTML.replace('<span>' + lookoutfrom[ipo] + '</span>', '<span style=color:black;>' + lookoutfrom[ipo] + '</span>');
}
//eval("document.getElementById('" + idis + "').innerHTML=document.getElementById('" + idis + "').innerHTML.replace(/\\<span\\>\\" + lookoutfrom[ipo] + "\\</g, '<span style=color:black;>" + lookoutfrom[ipo] + "<');");
}
}
//spanele.innerHTML=spanele.innerHTML.replace(/\<spaXn\>/g, '<span style="color:black;">');
if (idis == '') { return spanele; }
return document.getElementById(idis);
} else {
return spanele;
}
}

function recall(fromwhere) {
//alert(fromwhere);
var oimg=null, xlet='', xcont='';
if (fromwhere == '') {
//alert(5);
document.getElementById('arial_span').style.color='black';
//alert(51);
document.getElementById('arial_span').style.background='';
//alert(52);
document.getElementById('compositeimages').style.display='none';
//alert(53);
} else {


//alert(22);
//document.getElementById('compositeimages').style.display='block';
//alert(222);
// Later we cut this up into images via another canvas
xcurx=0;
xcury=0;
sparelelem=lelem;
sparelelemc=lelemc;
sparecurx=curx;
sparecury=cury;
lelem=interimcanv;
lelemc=interimcanvc;
curx=0;
cury=0;
document.getElementById('letterimages').innerHTML='';
//alert(origlist);
lookout=true;
yourfonts='~';
for (var ijk=0; ijk<origlist.length; ijk++) {
interimcanvc.drawImage(document.getElementById('compimg'),xcurx,xcury,70,70,0,0,70,70); //,70,70);
xcurx+=70;
xlet=origlist.substring(ijk, eval(1 + ijk));
if (1 == 1) {
processi(xlet);
} else {
lastcid=cid;
xlet=origlist.substring(ijk, eval(1 + ijk));
xcont=interimcanvc.toDataURL('image/png');
if (xcont == bsave) {
} else {
document.getElementById('letterimages').innerHTML+='<img class=athy onload=" setTimeout(athy,1000); " width=70 height=70 style="display:inline-block;width:70px;height:70px;" id=image' + xlet.charCodeAt() + ' src="' + xcont + '"></img>'; //alert('Rasterization of ' + alet + ' resulted in ' + aconto.getElementById('raster').value);
}
}
}
lookout=false;
lelem=sparelelem;
lelemc=sparelelemc;
curx=sparecurx;
cury=sparecury;


document.getElementById('compositeimages').style.display='block';
document.getElementById('compositeimages').style.border='1px solid red';
compcanv=document.getElementById('compositeimages');
compcanvc=compcanv.getContext('2d');
compcanvc.drawImage(document.getElementById('compimg'), 0, 0);

//alert('00:' + document.getElementById('arialspan').innerHTML);
if (1 == 1) {
document.getElementById('arial_span').style.color='transparent';
document.getElementById('arial_span').style.backgroundRepeat='no-repeat';
document.getElementById('arial_span').style.backgroundSize='105% 100%';
letsomethrough(document.getElementById('arial_span')).style.backgroundImage='URL("' + document.getElementById('ifsrc').src.replace('?ipinto=y', document.getElementById('ipinto').value) + '")';
//document.getElementById('arialspan').style.background='linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)),URL("' + document.getElementById('ifsrc').src.replace('?ipinto=y', document.getElementById('ipinto').value) + '") no-repeat, 100% 100%';
}
}
}
</script>
</head>
<body id=ibody onload="onlhuh();">
<h1>Local Font <span id=spaninto></span>Scribbling</h1>
<h3>RJM Programming - July, 2019</h3>
<input name=raster id=raster type=hidden value=''></input><input name=positive id=positive type=hidden value='y'></input><input name=width id=width type=hidden value=''></input><input name=height id=height type=hidden value=''></input><input name=size id=size type=hidden value='1'></input>
<div id=dcanvas style='z-index:-9;display:none;'></div><div id=ddcanvas></div>
<span id=dsaveas style='display:none;'><select id=ssaveas><option value=''>Fill in Save As or choose</option></select>    <input onblur=newone(this.value); title='Save As...' type=text value=''></input></span>
<input style='margin-left:20px;display:none;' onchange="document.getElementById(focusto).style.color=altit(this.value,this.id);" onblur="document.getElementById(focusto).style.color=altit(this.value,this.id);" type='color' id='fontc' value='#000000'></input>
<div id=fonti></div><br>
<div id=letterimages style="width:4400px;word-wrap:break-word;"></div><br>
<span title='Arial changed content' id=arialspan style="font-family:Arial;font-size:12px;"></span><br>
<span title='Courier New background 100% 100%' id=arial_span style="font-family:Courier-New;font-size:12px;"></span><br><br>
<div title="Enter your own text here" onchange="changethis(this);" onblur="changethis(this);" contenteditable=true id=arialdiv style="font-family:Arial;font-size:12px;border:1px solid red;"> </div><br>
<table><tr><td id=lhc></td><td><input style='visibility:hidden;' id=bsave type=button onclick="saveit();" value="Save"></input></td></tr></table>
<iframe style='visibility:hidden;' id=ifsrc name=ifsrc src=''></iframe>
<canvas width=6860 height=70 id=compositeimages style='display:none;'></canvas><canvas width=70 height=70 id=cinterim style='display:none;'></canvas>
<form target=ifsrc id=ipform action='' style='visibility:hidden;' method=POST>
<input id=ipinto type=hidden name=ipinto value=''></input>
<input id=continto type=hidden name=continto value=''></input>
<input id=subm style='visibility:hidden;' type=submit value=Submit></input>
</form>
<img id=compimg style='display:none' src=''></img>
</body>
</html>