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?

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.

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

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.

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)

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>

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.