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: 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(); }); });

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.

Answer 7

Yes, the "overflow:visible" doesn't work on my FF3. Any suggestions?