<html>
<head>
<title>Angled Text Helper - RJM Programming - December, 2023</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.1, maximum-scale=8, user-scalable=yes" >
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>

html, body {
margin: 0 0 0 0;
}

h1, h3 {
text-shadow: -1px 1px 1px #952dff;
}

#fsangle { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewport='0 0 100 100' style='font-family:Verdana;font-size:10px;'><text y='50%'> \00B0</text></svg>"); background-repeat: no-repeat; background-position: center right; }
#fsfont { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewport='0 0 100 100' style='font-family:Verdana;font-size:10px;'><text y='40%'>p</text><text y='70%'>x</text></svg>"); background-repeat: no-repeat; background-position: center right; }

diJUNKv {
background-color: rgba(255,0,0,0.5);
}

#mydJUNKiv {
width: auto;
display: inline-block;
}

td {
vertical-align: top;
}

.tblbrb {
border-right: 1px dotted pink;
border-bottom: 1px dotted pink;
}

.brb {
width: auto;
display: table-cell;
}

</style>
<script type=text/javascript>

var lastdivs='', rectex;
var waswp='<html><head><style> * { margin: 0 0 0 0; } </style></head><body></body></html>', iswp='<html><head><style> * { margin: 0 0 0 0; } </style></head><body></body></html>';
var waso=null, iso=null;
var vstl='', xoff=0, xxoff=0, toff=0;
var tablewidth=0;
var containermode='';
var containingid='result';
var containingprefix='';
var containingsuffix='';
var proposedtable='<table id=mytable class=tblbrb style="margin: 0 0 0 0;"><tr><td class=brb id=td11></td><td class=brb id=td21></td><td class=brb id=td31></td></tr><tr><td class=brb id=td12></td><td class=brb id=td22></td><td class=brb id=td32></td></tr><tr><td class=brb id=td13></td><td class=brb id=td23></td><td class=brb id=td33></td></tr></table>';

function lastconsideration(instuff) {
if (document.getElementById('mysel').value.indexOf(':') == -1 || eval('' + tablewidth) == 0) { return instuff; }
var outstuff=instuff;
toff=eval(eval('' + window.innerWidth) - eval('' + tablewidth));
var tbltranslate='transform:translate(' + eval(eval('' + window.innerWidth) - eval('' + tablewidth)) + 'px,0px);';
if (tbltranslate != '') {
iswp=iswp.replace('0;', '0;' + tbltranslate);
return outstuff.replace('0;', '0;' + tbltranslate);
}
return outstuff;
}

function maybeexpand(thein, thewithin) {
if (document.getElementById('mysel').value.trim() == '' || document.getElementById('mysel').value.indexOf('.') != -1) { return thein; }
if (document.getElementById('mysel').value.indexOf(':') != -1) {
if (document.body.innerHTML.indexOf('mytable') != -1 && document.getElementById('mytable')) {
if (document.getElementById('mytable').outerHTML.split('>')[0].indexOf('translate(') == -1) {
tablewidth=eval('' + document.getElementById('mytable').getBoundingClientRect().width);
}
}
}
if (thein != '' && thewithin == lastdivs && lastdivs.indexOf('translate(') != -1) {
lastdivs=lastdivs.replace('translate(' + lastdivs.split('translate(')[0].split(')')[0] + ')', '');
thewithin=lastdivs;
}
var newwithin=thewithin.replace(';',';visibility:hidden;').replace(' id=', ' data-id=');
return thein.substring(0,1) + thein.substring(1).replace(/\<\/td\>/g, newwithin + '</td>');
}

function changemode(selo) {
if (selo.value == '') {
vstl='';
xoff=0;
xxoff=0;
containingid='result';
containingprefix='';
containingsuffix='';
} else {
vstl='';
xoff=0;
switch (selo.value.replace('.','').replace(':','')) {
case '11':
containingprefix=proposedtable.split('</td><td class=brb id=td21>')[0];
containingsuffix=proposedtable.split('<td class=brb id=td11>')[1];
break;

case '21':
containingprefix=proposedtable.split('</td><td class=brb id=td31>')[0];
containingsuffix=proposedtable.split('<td class=brb id=td21>')[1];
break;

case '31':
containingprefix=proposedtable.split('</td></tr><tr><td class=brb id=td12>')[0];
containingsuffix=proposedtable.split('<td class=brb id=td31>')[1];
break;

case '12':
containingprefix=proposedtable.split('</td><td class=brb id=td22>')[0];
containingsuffix=proposedtable.split('<td class=brb id=td12>')[1];
break;

case '22':
containingprefix=proposedtable.split('</td><td class=brb id=td32>')[0];
containingsuffix=proposedtable.split('<td class=brb id=td22>')[1];
break;

case '32':
containingprefix=proposedtable.split('</tr><tr><td class=brb id=td13>')[0];
containingsuffix=proposedtable.split('<td class=brb id=td32>')[1];
break;

case '13':
containingprefix=proposedtable.split('</td><td class=brb id=td23>')[0];
containingsuffix=proposedtable.split('<td class=brb id=td13>')[1];
break;

case '23':
containingprefix=proposedtable.split('</td><td class=brb id=td33>')[0];
containingsuffix=proposedtable.split('<td class=brb id=td23>')[1];
break;

case '33':
containingprefix=proposedtable.split('</td></tr></table>')[0];
containingsuffix=proposedtable.split('<td class=brb id=td33>')[1];
break;

case ' ':
containingid='result';
containingprefix='';
containingsuffix='';
vstl='';
xxoff=eval('' + window.innerWidth);
xoff=xxoff;
break;

default:
break;
}

}
}

function woit(aio) {
if (aio.id == 'awas') {
if (document.getElementById('mysel').value == ' ' || document.getElementById('mysel').value.indexOf(':') != -1) {
waso=window.open('', '_blank', 'top=50,left=0,height=500,width=' + window.innerWidth);
} else {
waso=window.open('', '_blank', 'top=50,left=150,height=500,width=500');
}
waso.document.write(waswp);
} else if (aio.id = 'ais') {
if (document.getElementById('mysel').value == ' ' || document.getElementById('mysel').value.indexOf(':') != -1) {
iso=window.open('', '_blank', 'top=50,left=0,height=500,width=' + window.innerWidth);
} else {
iso=window.open('', '_blank', 'top=50,left=250,height=500,width=500');
}
iso.document.write(iswp);
}
}

function lftobr(intxt) {
while (intxt.indexOf(String.fromCharCode(10)) != -1) {
intxt=intxt.replace(String.fromCharCode(10), '<br>');
}
return intxt;
}

function checkwidthdisplay(inidea) {
waswp='<html><body>' + maybeexpand(containingprefix,inidea) + inidea + maybeexpand(containingsuffix,inidea) + '</body></html>';
document.getElementById('awas').style.textDecoration='underline';
document.getElementById('awas').title='Click to see this display in new window';
document.getElementById('was').innerHTML=(maybeexpand(containingprefix,inidea) + inidea + maybeexpand(containingsuffix,inidea) ).replace(/\</g,'<').replace(/\>/g,'>')
if (inidea.indexOf('width:') == -1) {
if (inidea.indexOf(' style=') == -1) {
inidea=inidea.replace('>',' style="width:auto;">');
} else {
inidea=inidea.replace(';',';width:auto;');
}
}
if (inidea.indexOf('display:') == -1) {
if (inidea.indexOf(' style=') == -1) {
inidea=inidea.replace('>',' style="display:inline-block;">');
} else {
inidea=inidea.replace(';',';display:inline-block;');
}
}
lastdivs=inidea;
return inidea;
}

function displayit() {
window.scrollTo(0,0);
document.getElementById('myh1').style.visibility='hidden';
document.getElementById('myh3').style.visibility='hidden';
if (document.getElementById('mytext').value.trim() == '') {
document.getElementById('result').innerHTML='';
} else {
if (document.getElementById('thecss').value.trim() == '') {
if (('' + document.getElementById('fsangle').value) == '0') {
lastdivs='<div id=mydiv style="font-size:' + document.getElementById('fsfont').value + 'px;' + vstl + '">' + document.getElementById('mytext').value + '</div>';
document.getElementById('result').innerHTML=checkwidthdisplay(lastdivs);
} else {
lastdivs='<div id=mydiv style="font-size:' + document.getElementById('fsfont').value + 'px;' + vstl + 'transform:rotate(' + document.getElementById('fsangle').value + 'deg);">' + lftobr(document.getElementById('mytext').value) + '</div>';
document.getElementById('result').innerHTML=checkwidthdisplay(lastdivs);
}
if (document.getElementById('mydiv')) { rectex=document.getElementById('mydiv').getBoundingClientRect(); }
} else {
lastdivs='<div id=mydiv style="font-size:' + document.getElementById('fsfont').value + 'px;' + vstl + '' + document.getElementById('thecss').value + '">' + lftobr(document.getElementById('mytext').value) + '</div>';
if (('' + document.getElementById('fsangle').value) != '0' && lastdivs.indexOf('rotate(') == -1 && lastdivs.indexOf('transform:') != -1) {
lastdivs='<div id=mydiv style="font-size:' + document.getElementById('fsfont').value + 'px;' + vstl + '' + document.getElementById('thecss').value.replace('transform:','transform:rotate(' + document.getElementById('fsangle').value + 'deg) ') + '">' + lftobr(document.getElementById('mytext').value) + '</div>';
} else if (('' + document.getElementById('fsangle').value) != '0' && lastdivs.indexOf('rotate(') == -1 && lastdivs.indexOf('transform:') == -1) {
lastdivs='<div id=mydiv style="font-size:' + document.getElementById('fsfont').value + 'px;' + vstl + 'transform:rotate(' + document.getElementById('fsangle').value + 'deg);' + document.getElementById('thecss').value + '">' + lftobr(document.getElementById('mytext').value) + '</div>';
}
document.getElementById('result').innerHTML=checkwidthdisplay(lastdivs);
}
if (document.getElementById('mydiv')) { rectex=document.getElementById('mydiv').getBoundingClientRect(); }
}

var wasl=lastdivs;
var fromt='';
if (document.getElementById('result').innerHTML.trim() == '') {
document.getElementById('dgbcr').innerHTML='';
} else {
//alert('' + rectex.top);
var rectextop='' + rectex.top;
var rectexleft='' + rectex.left;
var anissue=false;
if (rectexleft.indexOf('-') != -1 && rectextop.indexOf('-') == -1) {
anissue=true;
} else if (rectexleft.indexOf('-') == -1 && rectextop.indexOf('-') != -1) {
anissue=true;
}
anissue=true;
//if (containingprefix != '') { alert(rectexleft + ',' + rectextop); }
if ((containingprefix == '' || anissue) && (Math.abs(eval('' + rectextop)) != 0 || Math.abs(eval('' + rectexleft)) != 0)) {
if (lastdivs.indexOf('transform:') != -1) {
fromt='transform:' + lastdivs.split('transform:')[1].split(';')[0];
lastdivs=lastdivs.replace(fromt, 'transform:translate(' + eval(xoff + eval(('-' + rectexleft).replace('--',''))) + 'px,' + ('-' + rectextop).replace('--','') + 'px) ' + fromt.replace('transform:',''));
rectexleft='0';
rectextop='0';
} else if (lastdivs.indexOf(' style=') != -1) {
lastdivs=lastdivs.replace(';', ';transform:translate(' + eval(xoff + eval(('-' + rectexleft).replace('--',''))) + 'px,' + ('-' + rectextop).replace('--','') + 'px);');
rectexleft='0';
rectextop='0';
} else {
lastdivs=lastdivs.replace(' ', ' style="transform:translate(' + eval(xoff + eval(('-' + rectexleft).replace('--',''))) + 'px,' + ('-' + rectextop).replace('--','') + 'px);" ');
rectexleft='0';
rectextop='0';
}
//alert('wasl=' + wasl + ' and lastdivs=' + lastdivs);
}
//alert('here');
if (xoff > 0 && lastdivs.indexOf('translate(') != -1) {
var xt=lastdivs.split('translate(')[1].split('px')[0].split(',')[0];
xoff=eval('' + rectex.width);
lastdivs=lastdivs.replace(xt, eval(-rectex.width + eval('' + xt)));
document.getElementById('result').innerHTML=maybeexpand(containingprefix,lastdivs) + lastdivs + maybeexpand(containingsuffix,lastdivs);
rectex=document.getElementById('mydiv').getBoundingClientRect();
rectextop='' + rectex.top;
rectexleft='' + rectex.left;
}
if (document.getElementById('thebox').checked) {
if (document.getElementById('mysel').value.trim() != '' || document.getElementById('mysel').value.indexOf('.') == -1) {
document.getElementById('result').innerHTML=lastconsideration(maybeexpand(containingprefix,lastdivs) + lastdivs + maybeexpand(containingsuffix,lastdivs));
rectex=document.getElementById('mydiv').getBoundingClientRect();
rectextop='' + rectex.top;
rectexleft='' + rectex.left;
}
document.getElementById('dgbcr').innerHTML='<div id=indgbcr style="overflow-x:hidden;position:absolute;border:1px solid rgba(0,255,0,0.5);top:' + rectextop + 'px;left:' + rectexleft + 'px;width:' + rectex.width + 'px;height:' + rectex.height + 'px;z-index:200;" title="position:absolute;border:1px solid rgba(255,0,0,0.5);top:' + rectex.top + 'px;left:' + rectex.left + 'px;width:' + rectex.width + 'px;height:' + rectex.height + 'px;z-index:200;"></div>';
} else {
document.getElementById('dgbcr').innerHTML='';
}
iswp='<html><body>' + maybeexpand(containingprefix,lastdivs) + lastdivs + maybeexpand(containingsuffix,lastdivs) + '</body></html>';
document.getElementById('ais').style.textDecoration='underline';
document.getElementById('ais').title='Click to see this display in new window';
document.getElementById('is').innerHTML=lastconsideration((maybeexpand(containingprefix,lastdivs) + lastdivs + maybeexpand(containingsuffix,lastdivs) ).replace(/\</g,'<').replace(/\>/g,'>'));
document.getElementById('result').innerHTML=lastconsideration(maybeexpand(containingprefix,lastdivs) + lastdivs + maybeexpand(containingsuffix,lastdivs));
if (document.getElementById('thebox').checked && eval('' + toff) != 0 && document.getElementById('mysel').value.indexOf(':') != -1) {
document.getElementById('indgbcr').style.left='' + eval(toff + eval('' + document.getElementById('indgbcr').style.left.replace('px',''))) + 'px';
}
if (document.getElementById('thebox').checked && document.getElementById('indgbcr')) {
document.getElementById('indgbcr').scrollIntoView();
document.getElementById('mytable').scrollIntoView();
}
}

}

</script>
</head>
<body>
<div id=result></div>
<hr style='position:absolute;top:35%;left:0px;'>
<table cellpadding=5 data-cellspacing=5 border=10 style='position:absolute;top:40%;left:0px;'>
<tr><td id=tdresult colspan=2><input onclick="displayit();" type=button value="Display" title="Click to display text at top left" style="margin-left:150px;;background-color:lightgreen;"></input></td></tr>
<tr><th>Text</th><th>Styling</th></tr>
<tr><td>
<textarea rows=2 cols=30 placeholder="Relevant text goes here ..." value="" title="Text to angle, as required" id=mytext style=background-color:pink;></textarea><br>
<table cellpadding=3 data-cellspacing=3 border=2>
<tr><th><a id=awas onclick=woit(this);>What you proposed</a></th><th><a id=ais onclick=woit(this);>What we found worked to fit snugly</a> <br><select style=background-color:yellow;border-radius:100px; id=mysel onchange='changemode(this);'><option value=''>up to the top left of webpage</option><option value=' '>up to the top right of webpage</option><option value='1.1'>up to the top left cell of 3x3 table</option><option value='2.2'>up to the top left of center middle cell of 3x3 table</option><option value='3.3'>up to the top left of bottom right cell of 3x3 table</option><option value='11'>up to the top left cell of 3x3 table includes whitespace</option><option value='22'>up to the top left of center middle cell of 3x3 table includes whitespace</option><option value='33'>up to the top left of bottom right cell of 3x3 table includes whitespace</option><option value='1:1'>up to the top left cell of 3x3 top right table includes whitespace</option><option value='2:2'>up to the top left of center middle cell of 3x3 top right table includes whitespace</option><option value='3:3'>up to the top left of bottom right cell of 3x3 top right table includes whitespace</option></select></th><tr>
<tr><td id=was></td><td id=is></td></tr>
</table>
</td>
<td>
<input type=number value="0" title="Angle, clockwise from horizon, as required" id=fsangle step=1 min=0 max=359 style=background-color:yellow;display:inline-block;></input> <input type=number value="12" title="Font size in px" id=fsfont step=1 min=4 max=200 style=background-color:yellow;display:inline-block;></input><br><br>
<input type=text value="" placeholder="Relevant CSS goes here ..." title="CSS styling, as required" id=thecss style="width:200px;"></input><br><br>
<input type=checkbox title="Show containing box" id=thebox>Show containing box</input><br><br>
</td>
</tr>

</table>

<h1 id=myh1 style='position:absolute;top:15%;left:50px;'>Angled Text Helper</h1>
<h3 id=myh3 style='position:absolute;top:25%;left:50px;'>RJM Programming - December, 2023</h3>

<div id=dgbcr></div>

</body>
</html>