{"id":55314,"date":"2022-04-05T03:01:19","date_gmt":"2022-04-04T17:01:19","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=55314"},"modified":"2022-04-11T19:40:13","modified_gmt":"2022-04-11T09:40:13","slug":"html-carriage-return-and-or-line-feed-reimagined-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-carriage-return-and-or-line-feed-reimagined-tutorial\/","title":{"rendered":"HTML Carriage Return and or Line Feed Reimagined Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/cr_andor_lf.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML Carriage Return and or Line Feed Reimagined Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/cr_andor_lf_more_r.jpg\" title=\"HTML Carriage Return and or Line Feed Reimagined Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">HTML Carriage Return and or Line Feed Reimagined Tutorial<\/p><\/div>\n<p>The &#8220;lonely \\r characters&#8221; of yesterday&#8217;s <a title='HTML Carriage Return and or Line Feed Primer Tutorial' href='#htmlcrlfpt'>HTML Carriage Return and or Line Feed Primer Tutorial<\/a> get a &#8220;reimagining&#8221; from us with today&#8217;s &#8220;inhouse&#8221; additional &#8230;<\/p>\n<ul>\n<li>Our Overlay Carriage Return  ( \\r )<\/li>\n<li>Our Clobbering Carriage Return  ( \\r )<\/li>\n<\/ul>\n<p> &#8230; ways (that cause PHP variables $clinesc and $clineso to be non blank below that) we might want to reinterpret Carriage Return ( \\r ) HTML rendering rules.  &#8220;Our Clobbering&#8221; is straightforward, with just the last \\r delimited (vertical) record appearing, but &#8220;Our Overlay&#8221; required us to clone an &#8220;inhouse changed&#8221; element into elements matching the number of \\r delimited (vertical) records &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\n var linesc=[\" . $clinesc . \"];<br \/>\n var lineso=[\" . $clineso . \"];<br \/>\n<br \/>\nvar threes=['div','pre'];<br \/>\n<br \/>\nif (eval('' + lineso.length) > 0) {<br \/>\n   document.getElementsByTagName('textarea')[0].value='' + lineso[0];<br \/>\n   if (1 == 1) {<br \/>\n   document.body.style.backgroundColor='transparent';<br \/>\n   document.getElementsByTagName('textarea')[0].style.backgroundColor='transparent';<br \/>\n   } else {<br \/>\n   document.getElementsByTagName('textarea')[0].style.opacity='0.5';<br \/>\n   }<br \/>\n   rect=document.getElementsByTagName('textarea')[0].getBoundingClientRect();<br \/>\n   document.getElementsByTagName('textarea')[0].style.position='absolute';<br \/>\n   document.getElementsByTagName('textarea')[0].style.top=('' + rect.top).split('.')[0] + 'px';<br \/>\n   document.getElementsByTagName('textarea')[0].style.left=('' + rect.left).split('.')[0] + 'px';<br \/>\n   document.getElementsByTagName('textarea')[0].style.width=('' + rect.width).split('.')[0] + 'px';<br \/>\n   document.getElementsByTagName('textarea')[0].style.height=('' + rect.height).split('.')[0] + 'px';<br \/>\n   clone=document.getElementsByTagName('textarea')[0].outerHTML.replace(' id=', ' data-id=').replace(' name=', ' data-name=').replace(' value=', ' value=\\\"\\\" data-value=').split('&gt;')[0];<br \/>\n   for (jj=1; jj&lt;lineso.length; jj++) {<br \/>\n     \/\/alert(clone + '&gt;' + lineso[jj] + '&lt;\/textarea&gt;');<br \/>\n     document.getElementById('overlays').innerHTML+=clone + '&gt;' + lineso[jj] + '&lt;\/textarea&gt;';<br \/>\n   }<br \/>\n<br \/> <br \/>\n   document.getElementsByTagName('span')[0].innerHTML='' + lineso[0];<br \/>\n   if (1 == 1) {<br \/>\n   document.body.style.backgroundColor='transparent';<br \/>\n   document.getElementsByTagName('span')[0].style.backgroundColor='transparent';<br \/>\n   document.getElementsByTagName('span')[0].style.border='0px solid red';<br \/>\n   } else {<br \/>\n   document.getElementsByTagName('span')[0].style.opacity='0.5';<br \/>\n   }<br \/>\n   rect=document.getElementsByTagName('span')[0].getBoundingClientRect();<br \/>\n   document.getElementsByTagName('span')[0].style.position='absolute';<br \/>\n   document.getElementsByTagName('span')[0].style.top=('' + rect.top).split('.')[0] + 'px';<br \/>\n   document.getElementsByTagName('span')[0].style.left=('' + rect.left).split('.')[0] + 'px';<br \/>\n   document.getElementsByTagName('span')[0].style.width=('' + rect.width).split('.')[0] + 'px';<br \/>\n   document.getElementsByTagName('span')[0].style.height=('' + rect.height).split('.')[0] + 'px';<br \/>\n   clone=document.getElementsByTagName('span')[0].outerHTML.replace(' id=', ' data-id=').replace(' name=', ' data-name=').replace(' value=', ' value=\\\"\\\" data-value=').split('&gt;')[0];<br \/>\n   for (jj=1; jj&lt;lineso.length; jj++) {<br \/>\n     \/\/alert(clone + '&gt;' + lineso[jj] + '&lt;\/span&gt;');<br \/>\n     document.getElementById('overlays').innerHTML+=clone + '&gt;' + lineso[jj] + '&lt;\/span&gt;';<br \/>\n   }<br \/>\n<br \/>\n   var documentgetElementsByTagNamepre=[];<br \/>\n<br \/> <br \/>\n   for (mm=0; mm&lt;threes.length; mm++) {<br \/>\n   documentgetElementsByTagNamepre=[];<br \/>\n   for (kk=0; kk&lt;=0; kk++) {<br \/>\n    documentgetElementsByTagNamepre.push(document.getElementsByTagName(threes[mm])[kk]);<br \/>\n   }<br \/>\n<br \/>\n   for (kk=0; kk&lt;=0; kk++) {<br \/>\n   documentgetElementsByTagNamepre[kk].innerHTML='' + lineso[0];<br \/>\n   if (1 == 1) {<br \/>\n   document.body.style.backgroundColor='transparent';<br \/>\n   documentgetElementsByTagNamepre[kk].style.backgroundColor='transparent';<br \/>\n   documentgetElementsByTagNamepre[kk].style.border='0px solid red';<br \/>\n   } else {<br \/>\n   documentgetElementsByTagNamepre[kk].style.opacity='0.5';<br \/>\n   }<br \/>\n   rect=documentgetElementsByTagNamepre[kk].getBoundingClientRect();<br \/>\n   documentgetElementsByTagNamepre[kk].style.position='absolute';<br \/>\n   documentgetElementsByTagNamepre[kk].style.top=('' + rect.top).split('.')[0] + 'px';<br \/>\n   documentgetElementsByTagNamepre[kk].style.left=('' + rect.left).split('.')[0] + 'px';<br \/>\n   documentgetElementsByTagNamepre[kk].style.width=('' + rect.width).split('.')[0] + 'px';<br \/>\n   documentgetElementsByTagNamepre[kk].style.height=('' + rect.height).split('.')[0] + 'px';<br \/>\n   clone=documentgetElementsByTagNamepre[kk].outerHTML.replace(' id=', ' data-id=').replace(' name=', ' data-name=').replace(' value=', ' value=\\\"\\\" data-value=').split('&gt;')[0];<br \/>\n   for (jj=1; jj&lt;lineso.length; jj++) {<br \/>\n     \/\/alert(clone + '&gt;' + lineso[jj] + '&lt;\/span&gt;');<br \/>\n     if (1 == 2 && document.getElementById('td' + documentgetElementsByTagNamepre[kk].id)) {<br \/>\n     document.getElementById('td' + documentgetElementsByTagNamepre[kk].id).innerHTML+=clone + '&gt;' + lineso[jj] + '&lt;\/' + threes[mm] + '&gt;';<br \/>\n     } else {<br \/>\n     document.getElementById('overlays').innerHTML+=clone + '&gt;' + lineso[jj] + '&lt;\/' + threes[mm] + '&gt;';<br \/>\n     }<br \/>\n   }<br \/>\n   }<br \/>\n   }<br \/>\n}<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p> &#8230; in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/cr_andor_lf.php-GETME\" title=\"cr_andor_lf.php\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/cr_andor_lf.php-GETME\" title=\"cr_andor_lf.php\">cr_andor_lf.php<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/cr_andor_lf.php\" title=\"Click picture\">web application<\/a> for you to try.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/html-carriage-return-and-or-line-feed-reimagined-tutorial\/'>HTML Carriage Return and or Line Feed Reimagined Tutorial<\/a>.<\/p-->\n<hr>\n<p id='htmlcrlfpt'>Previous relevant <a target=_blank title='HTML Carriage Return and or Line Feed Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html-carriage-return-and-or-line-feed-primer-tutorial\/'>HTML Carriage Return and or Line Feed Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/cr_andor_lf.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML Carriage Return and or Line Feed Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/cr_andor_lf.jpg\" title=\"HTML Carriage Return and or Line Feed Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">HTML Carriage Return and or Line Feed Primer Tutorial<\/p><\/div>\n<p>Some vertical record delimiting wonderment in HTML we just let pass through to the keeper, except to say that HTML rendering just about always works as intended, and yet <i>back in the day<\/i> you&#8217;d need to worry about whether your desktop C program, for instance, was written using (an underlying) Windows or Linux or Mac OS X (operating system).  And then we stumbled upon <a target=_blank title=\\\"HTML when it normalizes newlines will convert all \\\\r\\\\n sequences to \\\\n and then all remaining \\\\r to \\\\n, so effectively getting rid of all lonely \\\\r characters. However, Node.textContent doesn't call this normalize-newlines algorithm, so they're not converted to \\\\n and not interpreted as segment-break.\\\" href='https:\/\/stackoverflow.com\/questions\/57965834\/why-carriage-return-not-rendered-as-a-line-break-when-assigned-to-textcontent-al'>javascript &#8211; Why carriage return not rendered as a line break when assigned to textContent although formatted using pre? &#8211; Stack Overflow<\/a>&#8216;s &#8230;<\/p>\n<blockquote cite='https:\/\/stackoverflow.com\/questions\/57965834\/why-carriage-return-not-rendered-as-a-line-break-when-assigned-to-textcontent-al'><p>\nHTML when it normalizes newlines will convert all \\r\\n sequences to \\n and then all remaining \\r to \\n, so effectively getting rid of all lonely \\r characters. However, Node.textContent doesn&#8217;t call this normalize-newlines algorithm, so they&#8217;re not converted to \\n and not interpreted as segment-break.\n<\/p><\/blockquote>\n<p> &#8230; which seemed to explain the process of <i>vertical record delimiting HTML rendering rules<\/i> so well.  This resulted in us trying to prove this, and caused us to write a proof of concept <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/cr_andor_lf.php_GETME\" title=\"cr_andor_lf.php\">cr_andor_lf.php<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/cr_andor_lf.php\">web application<\/a> that you can also try for yourself below &#8230;<\/p>\n<p><iframe src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/cr_andor_lf.php\" style=\"width:100%;height:900px;\"><\/iframe><\/p>\n<p> &#8230; and we hope this is of some interest to you as well.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d55306' onclick='var dv=document.getElementById(\"d55306\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/carriage-return\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d55306' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d55314' onclick='var dv=document.getElementById(\"d55314\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/clone\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d55314' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The &#8220;lonely \\r characters&#8221; of yesterday&#8217;s HTML Carriage Return and or Line Feed Primer Tutorial get a &#8220;reimagining&#8221; from us with today&#8217;s &#8220;inhouse&#8221; additional &#8230; Our Overlay Carriage Return ( \\r ) Our Clobbering Carriage Return ( \\r ) &#8230; &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-carriage-return-and-or-line-feed-reimagined-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[2698,2503,2276,452,576,2533,894,997,1986,2407,1049,3625,1262,2996,1319,3035,1425],"class_list":["post-55314","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-carriage-return","tag-clone","tag-delimitation","tag-form","tag-html","tag-line-feed","tag-overlay","tag-programming","tag-proof-of-concept","tag-record","tag-render","tag-rendering","tag-textarea","tag-transparent","tag-tutorial","tag-vertical","tag-whitespace"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/55314"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=55314"}],"version-history":[{"count":9,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/55314\/revisions"}],"predecessor-version":[{"id":55380,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/55314\/revisions\/55380"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=55314"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=55314"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=55314"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}