Print when textarea has overflow

Question

I have a form with some text areas that allow a scroll bar when the text exceeds the text box. The user would like to be able to print the screen, and this text is not visib

Answer 1

I use this in my styling:

PRE.print {
display:none;
}

@media print {

  TEXTAREA {
    display:none;
  }

  PRE.print {
    display:block;
    width:90%; /* fixes margin issues in some funky browsers */
    white-space: pre-wrap;       /* css-3 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
    font-family:monospace,sans;
  }

}

Then, after every TEXTAREA, I use a PRE with class "print" like so:

<?= $MESSAGE ?>

...note the PHP I used -- you can switch with your programming language. And then this code above needs the following function, assuming you have jQuery library loaded:

The way this all works

The way this works is that I'm basically loading content twice into the page, but using the stylesheet to hide content not suitable for the printer like the TEXTAREA.

You can change the PRE styling as you wish. However, I use monospace in case someone was wanting to print HTML code that they typed into the field and wanted it to format nicely.

The onblur event helps capture a need to update the related PRE.

Note you can also do the stylesheet stuff via the media attribute on a link rel in the HEAD section of your HTML, using things like media="all not print" and media="print".