How To Present Copy 'n Paste Text In Articles

NOTE: We no longer syndicate articles the way we used to. Just an FYI. It doesn't take away from the functionality of what's presented here.

Publishing code and other text for copying and pasting within articles can be a challenge. Depending on how your web pages are designed.

We used a form textarea field for many years to present code for copying and pasting. The textarea field:

1. Maintains the line breaks required by the code to be copied.

2. Has scrollbars allowing large amounts of code to fit into a small area of a web page.

3. Can have an onclick="select()" attribute so the code can be selected by clicking on it.

It worked well on willmaster.com until a certain WordPress template on a syndicating website preempted the form tag.

Suddenly, a new way had to be developed.

The method presented in this article is a result of trying this and that to find the best way.

We ended up using the pre tag. It maintains line breaks and can have scrollbars. A CSS style and an onclick attribute with custom JavaScript give the pre tag the look and feel of a textarea field.

(For copy and paste content that is not line-break sensitive, p or div or other HTML tags may be used instead of the pre.)

Content in a pre tag has an advantage over a textarea field: word/phrases can be emphasized by bolding, coloring, or other styling.

The "Click To Select" JavaScript

The JavaScript follows. Also an example pre tag and an explanation of the CSS style properties to use for emulating a textarea field. Copy and paste code and example are presented in pre tags styled according to this article.

First, the JavaScript. Copy and paste it anywhere JavaScript can run, in the HEAD or the BODY area. No modification required.

<script type="text/javascript">
function containerSelect(id) {
containerUnselect();
if(document.selection) {
   var range = document.body.createTextRange();
   range.moveToElementText(id);
   range.select();
   }
else if(window.getSelection) {
   var range = document.createRange();
   range.selectNode(id);
   window.getSelection().addRange(range);
   }
}
function containerUnselect() {
if (document.selection) { document.selection.empty(); }
else if (window.getSelection) { window.getSelection().removeAllRanges(); }
}
</script>

When the JavaScript is in the source code of the web page, one or more pre tags with the attributes described below can be published. Each pre tag holds content to be copied.

An Example PRE Tag For Copy And Paste Content

Here is a pre tag example with full CSS styling.

<pre 
   onclick="containerSelect(this)" 
   style="width:350px; 
      height:200px; 
      border:1px solid black; 
      padding:10px; 
      overflow:auto; 
      margin:0pt;">
</pre>

The onclick attribute

The onclick="containerSelect(this)" attribute calls the JavaScript to select the content in the pre tag whenever the content is clicked. (The onclick="select()" attribute for type="text" and textarea form field tags is not effective in other HTML tags.)

The CSS style attribute

Here is a list of properties with explanations. (Not all are required.)

• width — This is optional. If omitted, the pre tag will span the width of the content column. Caveat: If the content column has no specific width assigned, the pre tag will be at least as wide as the longest line, no scrollbars. Content columns with CSS style margin:auto; have no specific width assigned.

  I use width:350px; for the syndicated article. Many syndication sites have content columns with margin:auto;

• height — This is optional. If omitted, the height of the pre tag will be the height of the content. If height is specified and the content length is less than the specified height, then there will be empty space between the last line of the content and the bottom of the pre tag area (just like textarea fields).

  I generally specify a height only if the number of content lines exceeds 13. I then use height:200px;

• border — The border:1px solid black; property draws a box around the pre tag content similar to a textarea box border.

• padding — Optional. I like to use padding:10px; to put a bit of space between the border and the content.

• overflow — The overflow:auto; property publishes scrollbars if the width and/or height of the content exceeds the visible area of the pre tag.

• margin — Optional. The margin:0pt; property removes any inherent margin the pre tag would otherwise have. It then has the same margin (zero) that a textarea form field tag has.

The Solution

With the JavaScript and the example pre tag, content for copying and pasting can be presented in articles without using form fields. This is especially handy for code that is line-break sensitive.

For copy and paste content that is not line-break sensitive, p, div, or other HTML tags may be used instead of the pre tag. Apply the same onclick and style attributes.

Will Bontrager