Loading blog entries.. loading

Print partial web content

Wednesday, September 28, 2011 3:25 PM
Written by Wayne Ye
Font Size: S  M  L 

Per project needs we need print part of a web page, which I have no idea when I saw this requirement, I googled and I read this post: http://www.huntingground.freeserve.co.uk/main/mainfram.htm?../scripts/printing.htm, it basically use document.write to write the content you want to print to a new window by window.open, it works, however I really don't like the opened window.

Occasionally I tried to find out whether CSS can achieve such function, seemed I was on the right way: CSS media types is to control different display settings on different "media", controled completely by your own. What a shame to myself! CSS media types definiton from W3C official page:

One of the most important features of style sheets is that they specify how a document is to be presented on different media: on the screen, on paper, with a speech synthesizer, with a braille device, etc.

We can define print style by few ways:

  1. Make a seperate css file to define print style and link it by specifying media=print, <link rel="stylesheet" type="text/css" href="print.css" media="print" />
  2. Insert a <style media="print"> snippet into the <head>.
  3. Define @media print rule inline with our CSS code: @media print {#text_print:display:visible;}.

I'd reccomended option 1 or 3 if the project is small.

In additional I occasionally found that the Web Development extetion for Chrome already support this, we don't have to waste many pieces of papersSmile.

Web Development Tool

See also:

Print Button

W3C School: CSS Media types

 

Permalink: http://wayneye.com/Blog/Print-Partial-Web-Content 2275 Views  0 Comments
Tag: Category:Programming»Web Development»HTML/CSS

 

 


↓Comments↓

No comments so far, be the first one!

Your view point or opinion?
Nickname *
 
Gravatar *
Required (not shown), used only for displaying Gravatar and receiving future notification when new comment(s) posted on this blog.
 
Website/Blog
 
Content *
Current length:     Maximum allowed: charactors