Maintaining spaces and tabs in a block of text

Robert Moskowitz · May 30, 2019

I have a howto that includes blocks of text that must or at least should be copied exactly to the clipboard, maintaining multiple spaces and tabs.

Currently I have things like:

<div id="box12" style="border:1px solid black ;padding-top:0em;padding-bottom:1em;
margin-left:3em;width:28em;height:10em;overflow-y:hidden;overflow-x:auto;">
<pre><span class="inner-pre" style="font-size: 16px">
bind 'set disable-completion on'
cat &lt;&lt;EOF&gt;&gt;/etc/aliases || exit 1
root:	$admin_email
EOF
newaliases
bind 'set disable-completion off'
</span></pre>
</div>

Is there a better way to do this? When I use my new copy to clipboard java script, I get 2 blank lines in front and one at the end (at least with Firefox).

Ingolme · May 30, 2019

All whitespace inside the <pre> tag is rendered, including the line break at the beginning and end of the tag. If you want to remove those line breaks then you will have to put the code on the same line as the tag:

<pre><span class="inner-pre" style="font-size: 16px">bind 'set disable-completion on'
cat &lt;&lt;EOF&gt;&gt;/etc/aliases || exit 1
root:	$admin_email
EOF
newaliases
bind 'set disable-completion off'</span></pre>

Robert Moskowitz · May 31, 2019

Did a bunch of trying until I got just the lines in the block into the clipboard. I got rid of the div and span tags and put everything into the pre tag. The following little body works with one caveat that the button does not rest immediately below the boarder of the box (about a 1/2 line gap):

<body>

text
<br><br>
<pre id="box11" style="border:1px solid black;margin-left:3em;padding-top:1em;
width:25em;height:9em;overflow-y:hidden;overflow-x:auto;font-size: 16px">
bind 'set disable-completion on'
cat &lt;&lt;EOF&gt;&gt;/etc/aliases || exit 1
root:	$admin_email
EOF
newaliases
bind 'set disable-completion off'
</pre>
<button style="margin-left:4em" onclick="copyClipboard('box11')">Copy text</button>
<br><br>
text

<script>
function copyClipboard(x) {
  var elm = document.getElementById(x);
  // for Internet Explorer

  if(document.body.createTextRange) {
    var range = document.body.createTextRange();
    range.moveToElementText(elm);
    range.select();
    document.execCommand("Copy");
//   alert("Copied div content to clipboard");
  }
  else if(window.getSelection) {
    // other browsers

    var selection = window.getSelection();
    var range = document.createRange();
    range.selectNodeContents(elm);
    selection.removeAllRanges();
    selection.addRange(range);
    document.execCommand("Copy");
//    alert("Copied div content to clipboard");
  }
}
</script>
	
</body>

Sign In

Maintaining spaces and tabs in a block of text

Recommended Posts

Robert Moskowitz

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

Robert Moskowitz

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity