Printing only a textarea

Question

I would like to print only the contents of a textarea element from a website page. In particular, I would like to ensure that nothing gets clipped by the boundary of the textarea as the contents will be quite large.

What is the best strategy for tackling this?

Pelops

Answer 1

Make a print stylesheet where all of the elements except the textarea are set in CSS to display: none;, and for the textarea, overflow: visible.

Link it to the page with the link tag in the header set to media="print".

You're done.

Moltke

This doesn’t actually work, have you tried it? In Chrome 8, overflow: visible on a textarea doesn’t actually print its contents. Nor does height: auto; or any of my usual tricks. – Jylland

Here is a test case to convince you this will not work. Tested in Chrome 8, OS X. dl.dropbox.com/u/105727/web/print_textarea.html – Jylland

Yeah, probably not futureproof. Considering I wrote the answer in 2008, I'm not surprised it breaks in Chrome 8. – Moltke

Answer 2

Make a different CSS with media set to print

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

http://webdesign.about.com/cs/css/a/aa042103a.htm

Ingvar

Answer 3

If the user clicks "Print," you could open a new window with just the contents of the textarea on a blank page and initiate printing from there, then close that window.

Update: I think the CSS solutions being suggested are probably better strategies, but if anybody likes this suggestion, they can still upvote it.

Guano

Answer 4

I'd go for a combo of the other suggestions.

Don't kill the print button for the whole page with a stylesheet override, but instead provide a button by the textarea, that lets the user print only those contents.

That button would open a new window, with menus/chrome etc. and clone the textarea content only (and or provide a print css file)

Odine

Answer 5

I made a print media CSS to hide a number of the fields. The problem was complicated by the fact that I was using nicEdit which dynamically creates an IFRAME. So I had to add an event that took onblur events and copied them over to a hidden (except for printing) Div. "divtext" is the hiddent Div, and "storyText" is the TextArea.

textarea {
  display: none;
}

*/ #divtext {
  display: block;
}

div, DIV {
  border-style: none !important;
  float: none !important;
  overflow: visible !important;
  display: inline !important;
}

/* disable nearly all styles -- especially the nicedit ones! */

#nav-wrapper, #navigation, img, p.message, .about, label, input, button, #nav-right, #nav-left, .template, #header, .nicEdit-pane, .nicEdit-selected, .nicEdit-panelContain, .nicEdit-panel, .nicEdit-frame {
  display: none !important;
}

/*hide Nicedit buttons    */

.nicEdit-button-active, .nicEdit-button-hover, .nicEdit-buttonContain, .nicEdit-button, .nicEdit-buttonEnabled, .nicEdit-selectContain, .nicEdit-selectControl, .nicEdit-selectTxt {
  display: none !important;
}

The javascript code for nicEdit:

<script type="text/javascript" src="/media/nicEdit.js"></script>
<script type="text/javascript">
  bkLib.onDomLoaded(function () {
    var nic = new nicEditor({
      fullPanel: true
    }).panelInstance('storyText');

    document.getElementById("storyText").nic = nic;
    nic.addEvent('blur', function () {
      document.getElementById("storyText").value = 
      nic.instanceById('storyText').getContent();
      document.getElementById("divtext").innerHTML = nic.instanceById('storyText').getContent();
    });
  });
</script>

Pelops

Answer 6

Did the overflow: visible; on textarea actually work for any of you? FF3 seems to ignore that rule on textarea in print sheets. Not that it's a bug or anything.

Sadirah

Answer 7

This is way late but ...

I had the same issue as the OP. The way I approached it was to grab the textarea, create a new tab/window containing just the textarea, add a Print button and hide it from the actual hard copy. It's messy and roundabout but it should work in any situation.

 function Print () {
      var body = document.getElementById("journal-entry").value; // grab the textarea
      var winContents1 = '<!doctype html> <html lang="en"><head> <meta charset="utf-8"/> <link rel="shortcut icon" ' +
                   'href="Include/favicon.ico"> <title> General Notes </title>' + '</head> <body id="Body"> ' +
                   "<style type='text/css'> @media print { @page { margin-left: 0.5in; margin-right: 0.5in; " +
                   "margin-top: 0; margin-bottom: 0; } #printPB { display: none; } } </style> <pre>\n";
      var winContents2 = "\n</pre> <button id='printPB' onclick='window.print()'" +
                   ">Print General Notes</button> </body> </html>";

      var w = window.open('about:blank');
      w.document.open();
      w.document.write(winContents1 + body + winContents2);
      w.document.close();
 }

Guadalajara