<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;color:rgba(0,0,0,0.5);'><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;color:rgba(0,0,0,0.5);'><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 fallbackCopyTextToClipboard(text) { // thanks to <a target="_blank" title="https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript" href="https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript">https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript</a>
var textArea = document.createElement("textarea");
//alert(text);
textArea.value = text;
// Avoid scrolling to bottom
textArea.style.top = "0";
textArea.style.left = "0";
textArea.style.position = "fixed";
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Fallback: Copying text command was ' + msg);
} catch (err) {
console.error('Fallback: Oops, unable to copy', err);
}
document.body.removeChild(textArea);
}
function copyTextToClipboard(text) { // thanks to <a target="_blank" title="https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript" href="https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript">https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript</a>
//alert('text=' + text);
if (!navigator.clipboard) {
fallbackCopyTextToClipboard(text);
return;
}
navigator.clipboard.writeText(text).then(function() {
console.log('Async: Copying to clipboard was successful!');
}, function(err) {
console.error('Async: Could not copy text: ', err);
});
}
function nifotherthanfont(cii) {
return decodeURIComponent(cii);
}
function ifotherthanfont(cii) {
var newcii=cii, allokay=true, ncs=[], incs=0;
if (cii.indexOf('</font>') != -1 || cii.indexOf('</FONT>') != -1) {
ncs=cii.split('</');
for (incs=1; incs<ncs.length; incs++) {
if (ncs[incs].toLowerCase().indexOf('font') != 0) { allokay=false; }
}
if (!allokay || 1 == 1) {
ncs=cii.split('<font');
for (incs=1; incs<ncs.length; incs++) {
newcii=newcii.replace('<font' + ncs[incs].split('>')[0] + '>', '');
newcii=newcii.replace('</font>', '');
}
ncs=cii.split('<FONT');
for (incs=1; incs<ncs.length; incs++) {
newcii=newcii.replace('<FONT' + ncs[incs].split('>')[0] + '>', '');
newcii=newcii.replace('</FONT>', '');
}
}
}
return newcii;
}
function codecopying(mode) {
var rectcos=null, icn=0, okpast=false;
var eletype='td';
if (mode != '') {
eletype=document.getElementById(mode).outerHTML.substring(1).split(' ')[0].split('>')[0];
}
var cos=document.getElementsByTagName(eletype); //'code'
for (var ico=0; ico<cos.length; ico++) {
if (cos[ico].id == 'is' || cos[ico].id == 'was' || (cos[ico].id == mode && mode != '')) {
if (mode == '') {
rectcos=cos[ico].getBoundingClientRect();
document.getElementById('dcode').innerHTML+='<span data-fword="' + encodeURIComponent(ifotherthanfont(cos[ico].innerHTML.replace(/\<\;/g,'<').replace(/\>\;/g,'>')).substring(0)) + '" onclick="codecopying(this.id);" title="Copy unadorned HTML code to clipboard buffer" id=scd' + ico + ' style="opacity:0.7;position:absolute;z-index:56;left:' + eval(-50 + eval('' + rectcos.right)) + 'px;top:' + eval(10 + eval('' + rectcos.top)) + 'px;font-size:24px;">📋</span>';
} else if (1 == 1) {
document.getElementById(mode).style.border='1px dashed pink';
copyTextToClipboard(nifotherthanfont(document.getElementById(mode).getAttribute('data-fword')).replace(/\&\;nbsp\;/g, ' ').replace(/\&\;\#/g, '').replace(/ \&\;\;/g, ' &;').replace(/\<br\>/g, '').replace(/\<\;/g, '<').replace(/\>\;/g, '>').trim());
okpast=false;
}
}
}
}
function lastconsideration(instuff) {
var tbltranslate='';
if (document.getElementById('mysel').value != ' ' && (document.getElementById('mysel').value.indexOf(':') == -1 || eval('' + tablewidth) == 0)) { return instuff; }
var outstuff=instuff;
if (document.getElementById('mysel').value == ' ' && eval('' + tablewidth) == 0) {
tbltranslate='transform:translate(' + eval(eval('' + (eval(('' + window.orientation).replace('undefined','1')) == 0 ? window.innerHeight : window.innerWidth)) - eval('' + document.getElementById('mydiv').getBoundingClientRect().width)) + 'px,0px);';
iswp=iswp.replace('px;', 'px;' + tbltranslate);
return outstuff.replace('px;', 'px;' + tbltranslate);
}
toff=eval(eval('' + (eval(('' + window.orientation).replace('undefined','1')) == 0 ? window.innerHeight : window.innerWidth)) - eval('' + tablewidth));
tbltranslate='transform:translate(' + eval(eval('' + (eval(('' + window.orientation).replace('undefined','1')) == 0 ? window.innerHeight : 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;
xxoff=0;
if (selo.value.indexOf(':') != -1) {
xxoff=eval('' + (eval(('' + window.orientation).replace('undefined','1')) == 0 ? window.innerHeight : window.innerWidth));
xoff=xxoff;
//alert('xxoff=' + xxoff + ' ' + window.innerHeight + ' ' + window.innerWidth + ' ' + window.orientation);
}
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];
breakwindow.screen.width;
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('' + (eval(('' + window.orientation).replace('undefined','1')) == 0 ? window.innerHeight : 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=' + (eval(('' + window.orientation).replace('undefined','1')) == 0 ? window.innerHeight : 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=' + (eval(('' + window.orientation).replace('undefined','1')) == 0 ? window.innerHeight : 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() {
var spans=document.getElementsByTagName('span');
for (var isp=0; isp<spans.length; isp++) {
if (spans[isp].outerHTML.indexOf(' data-fword=') != -1) {
spans[isp].style.display='none';
}
}
toff=0;
tablewidth=0;
document.getElementById('dgbcr').innerHTML='';
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 + '">' + lftobr(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);
} else {
//alert('why? ' + xoff + ' ' + document.getElementById('mysel').value + ' ' + lastdivs);
if (xoff > 0 && lastdivs.indexOf('transform:') == -1) {
lastdivs=lastdivs.replace(';', ';transform:translate(0px,0px);');
}
}
//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="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) {
if (eval(toff + eval('' + document.getElementById('indgbcr').style.left.replace('px',''))) < eval('' + (eval(('' + window.orientation).replace('undefined','1')) == 0 ? window.innerHeight : window.innerWidth))) {
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();
}
toff=0;
tablewidth=0;
codecopying('');
}
}
</script>
</head>
<body data-onload="codecopying('');">
<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>
<!--tr><td colspan=2>
</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>
<div id=dcode></div>
</body>
</html>