6

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?

6 Answers 6

6

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.

3
  • 1
    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.
    – Alan H.
    Jan 6, 2011 at 2:05
  • 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
    – Alan H.
    Jan 6, 2011 at 2:29
  • Yeah, probably not futureproof. Considering I wrote the answer in 2008, I'm not surprised it breaks in Chrome 8. Feb 8, 2011 at 18:08
3

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

2

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.

1

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)

1

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>
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.