<html>
<head>
<title>Underlining Annotation Text - RJM Programming, June 2024 ... thanks to https://stackoverflow.com/questions/28152175/a-wavy-underline-in-css</title>
<style>
body {
/* Set "my-sec-counter" to 0 */
counter-reset: my-sec-counter;
}

hx2::before {
/* Increment "my-sec-counter" by 1 */
counter-increment: my-sec-counter;
content: "Phrase part " counter(my-sec-counter) ". ";
}

.err {
display: inline-block;
position: relative;
}

.err:before { /* Thanks to https://stackoverflow.com/questions/28152175/a-wavy-underline-in-css */
content: "......................................................................................................";
font-size: 0.6em;
font-weight: 700;
font-family: Times New Roman, Serif;
color: red;
width: 100%;
position: absolute;
top: 22px;
left: -1px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; overflow-x: hidden;
}
</style>
<script type='text/javascript'>
var linenum=0, thesel='', showsel=false, reng='';
var ourdelim=':', ourfindsare=[];
var ihsms='', ihemail='';
var paconto=null;

function checkthis(dthis) {
var delm='';
var itt=dthis.innerText;
for (var k=0; k<itt.length; k++) {
if (delm == '') {
if (itt.substring(k).substring(0,1) <= ' ' || itt.substring(k).substring(0,1) > '~') {
delm=itt.substring(k).substring(0,1);
//alert('delm=' + delm + '!');
}
} //else if (itt.substring(k).substring(0,1) <= ' ' || itt.substring(k).substring(0,1) > '~') {
//alert(itt.substring(k).substring(0,1).charCodeAt(0));
//}
}
if (delm == '') { delm=' '; }
for (var kk=0; kk<itt.length; kk++) {
//itt=itt.replace(String.fromCharCode(10), delm);
itt=itt.replace(String.fromCharCode(160), delm);
itt=itt.replace(String.fromCharCode(32), delm);
}
var words=itt.replace(/\ \;/g,delm).split(delm);
//alert(itt.replace(/\ \;/g,delm) + ' ... ' + words.length);

var ihwords='';
for (var iiii=0; iiii<words.length; iiii++) {
while (words[iiii].indexOf(String.fromCharCode(10)) != -1) {
words[iiii]=words[iiii].replace(String.fromCharCode(10), '<br>');
}
ihwords+='<h2 tabindex=1 class=err>' + words[iiii].replace(/\<br\>/g, '<h2>' + String.fromCharCode(10) + '<h2 tabindex=1 class=err>') + '</h2> '
}
//alert(ihwords);
dthis.innerHTML=ihwords;
alertall();
return ihwords;

var ihdthis=dthis.innerHTML;
if (ihdthis == '') { return ihdthis; }
var origihdthis=ihdthis;
if (ihdthis.substring(0,1) != '<') { origihdthis='<h2 tabindex=1 class=err>' + ihdthis; }
var ihs=ihdthis.split('</h2>');
if (ihs.length == 1) {
origihdthis+='</h2>';
dthis.innerHTML=origihdthis;
} else {
for (var ii=1; ii<ihs.length; ii++) {
if (ihs[ii].indexOf(' ') != 0) {
dthis=dthis;
} else if (ihs[ii].indexOf(' <') != 0) {
//alert(ihs[ii] + ' okay ' + ihs[ii].substring(6).split('<')[0] + '</h2> ');
ihs[-1 + ii]+='</h2><h2 tabindex=1 class=err>' + ihs[ii].substring(6).split('<')[0] + '';
//alert(ihs[-1 + ii]);
ihs[0 + ii]=' ';
}
}
for (var iii=1; iii<ihs.length; iii++) {
if (ihs[iii].indexOf(' ') == 0) {
origihdthis+=' ';
} else {
origihdthis+=ihs[iii] + '</h2>';
}
}
}
dthis.innerHTML=origihdthis;
alertall();
return origihdthis;
}

function alertall() {
const nodeList = document.querySelectorAll("h2");
var kk=0;
for (let i = 0; i < nodeList.length; i++) {
if (nodeList[i].outerHTML.indexOf(' class=') != -1 && nodeList[i].innerText.trim() != '') {
nodeList[i].setAttribute('data-word-ind', '' + (kk + 1));
nodeList[i].onclick=function(event){ thesel=event.target.innerHTML.trim().replace(/\.$/g,'').replace(/\.$/g,'').replace(/\.$/g,'').replace(/\?$/g,'').replace(/\!$/g,'').replace(/\,$/g,'').replace(/\;$/g,''); document.getElementById('myhr').style.display='block'; document.getElementById('myif').style.display='block'; if (1 == 1) { window.open('//www.thefreedictionary.com/' + encodeURIComponent(thesel.trim()), 'myif'); } else { document.getElementById('myif').src='//www.thefreedictionary.com/' + encodeURIComponent(thesel.trim()); } document.getElementById('smore').innerHTML=('Your word number ' + event.target.getAttribute('data-word-ind') + ' is ' + event.target.innerHTML); };
nodeList[i].onfocus=function(event){ thesel=event.target.innerHTML.trim().replace(/\.$/g,'').replace(/\.$/g,'').replace(/\.$/g,'').replace(/\?$/g,'').replace(/\!$/g,'').replace(/\,$/g,'').replace(/\;$/g,''); document.getElementById('myhr').style.display='block'; document.getElementById('myif').style.display='block'; if (1 == 1) { window.open('//www.thefreedictionary.com/' + encodeURIComponent(thesel.trim()), 'myif'); } else { document.getElementById('myif').src='//www.thefreedictionary.com/' + encodeURIComponent(thesel.trim()); } document.getElementById('smore').innerHTML=('Your word number ' + event.target.getAttribute('data-word-ind') + ' is ' + event.target.innerHTML); };
kk++;
}
}

document.addEventListener('selectionchange', handleSelection);

//document.addEventListener('selectionchange', handleSelection);
//document.querySelectorAll('h2').addEventListener('selectionchange', handleSelection);
//var elms = document.getElementById('dpalette').querySelectorAll('h2');

//registers mouseenter to each element in elms array
//for (var i=0; i<elms.length; i++) {
// elms[i].addEventListener('selectionchange', handleSelection);
//}
}

function handleSelection() { // thanks to https://stackoverflow.com/questions/46651479/reacting-to-selection-changes-in-an-html-textarea
const activeElement = document.activeElement;

var myh2_1=activeElement;
var myh2_2=activeElement;
// Make sure this is your textarea
//document.title=' ' + (event.relatedTarget ? event.relatedTarget.id : "unknown") + ' ' + myh2_1.id + ' ?==? ' + activeElement.id + ' --- ' + (('' + activeElement.id) + activeElement.outerHTML.substring(0,23));
if (activeElement && activeElement.outerHTML.replace('<h2','<div').indexOf('<div') == 0) {
//if (paconto) {
//alert('Here');
//}
var htwos=document.getElementsByTagName('h2');
for (var ii=0; ii<htwos.length; ii++) {
if (('' + htwos[ii].selectionStart) != 'undefined' && myh2_1.id == activeElement.id) {
//alert('here');
myh2_1=htwos[ii];
document.title='ii=' + ii;
} else if (('' + htwos[ii].selectionEnd) != 'undefined') {
myh2_2=htwos[ii];
}
}
const range = {
start: myh2_1.selectionStart,
end: myh2_2.selectionEnd
};
ourdelim=':';
ourfindsare=[];
thesel='';
// Do something with your range
//document.title='' + eval('' + range.end) + ' vs ' + eval('' + range.start) + ' ... ' + (('' + activeElement.id) + activeElement.outerHTML.substring(0,23));
if (eval('' + range.end) > eval('' + range.start)) {
if (myh2_1.id == activeElement.id) {
thesel=(activeElement.value.substring(range.start).substring(0, eval(eval('' + range.end) - eval('' + range.start) )));
} //else {
//alert('' + eval('' + range.end) + ' > ' + eval('' + range.start));
//}
//document.title='thesel=' + thesel;
//if (thesel.trim() != '') {
// document.getElementById('myhr').style.display='block';
// document.getElementById('myif').srcdoc='<html><body><p>Found ' + thesel + '</p></body></html>';
// document.getElementById('myif').style.display='block';
//}
}
}
}




</script>
</head>
<body onload=alertall();>
<h1>Always Underlined</h1>
<h3>RJM Programming - June, 2024</h3>
<h4>Feel free to edit underlined text words below ... <span id=smore></span></h4><br>
<div style='border:3px dotted yellow; margin: 8 8 8 8; padding: 8 8 8 8;background-color: rgb(230,230,230);' onblur=checkthis(this); contenteditable=true id=dpalette class=noerr><h2 tabindex=1 class=err>The </h2> <h2 tabindex=1 class=err>rain </h2> <h2 tabindex=1 class=err>in </h2> <h2 tabindex=1 class=err>Spain </h2> <h2 tabindex=1 class=err>falls</h2> <h2 tabindex=1 class=err>mainly </h2> <h2 tabindex=1 class=err>on </h2> <h2 tabindex=1 class=err>the </h2> <h2 tabindex=1 class=err>plain. </h2> 
</div>
<hr id=myhr style=display:none;></hr>
<iframe name=myif id=myif style=display:none;width:90%;height:900px; srcdoc="" src=""></iframe>
</body>
</html>