printing webpage

[Mike P]

I am trying to use javascript to print my .NET page. I am building up
some HTML using a stringbuilder and then using this javascript to try to
print it :

<input id="Button2" value="Print" onclick="javascript:window.print()">

The page is wider than a standard A4 page but should fit onto a page in
landscape view, yet when I try to print in landscape, I only get half of
the page across printing.

Any ideas how I can get around this? Is there a better way to print web
pages using .NET?

 

[Mark Rae [MVP]]

Is there a better way to print web pages using .NET?

I always use PDF. It's a bit more work, but you get the exact layout you
want every time...

 

[Alan Silver]

I am trying to use javascript to print my .NET page.

Why? Every browser I have used has a print facility, so why not let the
user use that?

I am building up
some HTML using a stringbuilder and then using this javascript to try to
print it :

<input id="Button2" value="Print" onclick="javascript:window.print()">

The page is wider than a standard A4 page

The, with all respect, you have designed the page badly. Web pages
should adapt themselves to the size of the output medium, whether that
is a browser window, printed page or anything else. This is one of the
basics of web standards.

but should fit onto a page in
landscape view, yet when I try to print in landscape, I only get half of
the page across printing.

Any ideas how I can get around this? Is there a better way to print web
pages using .NET?

Yes, develop standards-based fluid designs that work at any output size.
Also, if you mark up your (X)HTML with CSS, which is another basic of
standards-based design, then you can easily add styles for print, so you
can have a completely different design when printed if you like. The
most obvious use for this is to remove the extra links and banners from
the printed page, leaving just the basic content.

HTH

 

[Mike P]

Well, first of all, I did not design the page, I am working with some
code that was inherited by me. I have now managed to change some of the
dimensions so that it prints on a single page in landscape format. Is
there any way in my code to set the default page setup to landscape?

 

[Alexey Smirnov]

Well, first of all, I did not design the page, I am working with some
code that was inherited by me. I have now managed to change some of the
dimensions so that it prints on a single page in landscape format. Is
there any way in my code to set the default page setup to landscape?

*** Sent via Developersdexhttp://www.developersdex.com***

try to set CSS programmatically

http://home.tampabay.rr.com/bmerkey/examples/landscape-test.html

 

[Mike P]

Alexey,

How would I be able to use CSS to set the setup to landscape?

 

[Alexey Smirnov]

Alexey,

How would I be able to use CSS to set the setup to landscape?

*** Sent via Developersdexhttp://www.developersdex.com***

I think you can try following:

1) add the style as in the example I've sent you

<style type="text/css" media="print">
div.page {
writing-mode: tb-rl;
height: 80%;
margin: 10% 0%;
}
</style>

2) put your page content between the <div id="toprint">...</div>

3) create js function to change the style of the print div

document.getElementById('toprint').className = 'page';

 

[Alan Silver]

Well, first of all, I did not design the page, I am working with some
code that was inherited by me.

OK, sorry, didn't mean to cause any offence. Still might be worth either
redesigning the page, or getting the person who designed it to redo it
according to web standards. I can see from your questions and the
replies you are getting that you are going to end up with an
unnecessarily complicated spaghetti of code that is very likely to fail.
If the page were redesigned, you could have a simple and easy system
that is basically guaranteed to work anywhere.

I have now managed to change some of the
dimensions so that it prints on a single page in landscape format. Is
there any way in my code to set the default page setup to landscape?

No, simply because your CSS cannot know anything about the client's
machine, their settings, their printer, their page size and a whole host
of other issues that could affect it.

If you make sure the design is fluid, it will fill the page,
irrespective of what printer, page size and settings the user has. You
won't need any Javascript functions and it will work.

CSS has a facility for specifying styles for printed media, so you can
set up a style sheet just for print. You can use that to make sure you
only display what is needed on paper.

HTH

 

[Alan Silver]

I think you can try following:

1) add the style as in the example I've sent you

<style type="text/css" media="print">
div.page {
writing-mode: tb-rl;
height: 80%;
margin: 10% 0%;
}
</style>

2) put your page content between the <div id="toprint">...</div>

3) create js function to change the style of the print div

document.getElementById('toprint').className = 'page';

What's the point of this? Why not just add a media type to the normal
style sheet? You don't need Javascript for this, it just makes life
complicated, and guarantees that some people will have problems with it.

Browsers all support printing. All modern browser support the media type
for stylesheets. CSS cannot control the user's printer settings, just
like it cannot control anything else about the user's machine. All you
are doing here is adding complexity that isn't going to work. Do it the
simple way and it will work.

 

[Mike P]

CSS has a facility for specifying styles for printed media, so you can
set up a style sheet just for print. You can use that to make sure you
only display what is needed on paper.

Can you recommend any good links with regard to using CSS for specifying
styles for printed media?

 

[Alan Silver]

set up a style sheet just for print. You can use that to make sure you
only display what is needed on paper.

Can you recommend any good links with regard to using CSS for specifying
styles for printed media?

Learn from the original source...
http://www.w3schools.com/css/css_mediatypes.asp

Basically, media types are just like setting up normal styles, you just
add an extra bit of code to tell the browser only to use the styles when
printing. There's nothing magical about them. You just surround the bits
of CSS that apply to the printed media with...

@media print {
/* put print styles here */
}

For example, the following sets different styles for screen and print...

<style type="text/css">
@media screen {
p {
color: #00f;
}
}
@media print {
p {
color: #000;
}
}
</style>

That rather simplistic style sheet will give blue text on screen and
black text when printed.

If you want a hand-holding walk through of setting up styles for print,
the rather excellent "Eric Meyer on CSS" has a chapter devoted to the
subject. This book is well worth buying anyway, as it gives a great
introduction to CSS.

HTH