CSS - Printing Background

Hi !

I've read that it's possible with CSS to adapt the visual style of a web page on the output medium.
If I didn't understand that completely wrong, it means that with CSS I can format a String like "Hello World" to give him font size 10 in my browser and font size 20 if i print the page.

Is this correct ?
Does someone of you habe any kind of coding example therefore ?
That would be great

TIA
Gawan

I am working on a printer friendly version of web pages. Generally when you print something from web, it prints, title, url, page number, etc. I know that you can configure your browser's settings to not print that, but is there a way through css or any other way to write your style sheet in such a way that those things are not printed?

Thanks,

Ok, I've google a bit, and come up with http://home.tampabay.rn.com/bmerkey...scape-test.html, but it seems to fail if I try printing tables in Landscape.
It's for an intranet ap, using IE6 predominantly but also needs to work in Moz.

Does anyone know of a way to do this with tables?

Hello, I have an issue when printing a page in IE7.

The page is located at http://www.northridgeltd.com/test_site/northridge_team.php

when you print, the content from two employees bunches up at the bottom of the first page.

Anyone have any ideas?

Thanks

Has anyone seen a template somewhere that can help style a page for printing to an index card?

Thanks,
James

Hi,

I am having problems with my code. I am trying to print a badge.

So what i am doing is in one cell of the table.
I have a image that i want to be centered in the cell and then i have text below the image that i want to be centered in reference to the image

The image is not centered and then the text is also not centered can someone tell me what i am doing wrong

Code:

table {
table-layout:fixed;
}

table.pagebreak
{
page-break-befo always;
}

table.nopagebreak
{
page-break-befo ;
}

td {
width:381.73px;
height:287.244px;
padding-left:24.56px;
border-left:white dashed 1px;
border-bottom:white dashed 1px;
border-collapse: collapse;
}

.imglineup

{
text-align:center;
width:300px;
display:block;
}

.textlineup
{
text-align:center;
display:block;
}

 

.nametd
{
width:381.73px;
text-align:center;
height:287.244px;
margin: 0px 50px 0px 50px;
}

the cell of the table is 381.73px wide and the image thats centered is 300px wide

so here is my code

Code:

<tr >

<td class="nametd" >
<img src="/images/bdg.jpg" class="imglineup"><br/>
<div class="textlineup">
<span style="font-size:40pt;">Joe </span><br/>
<span style="font-size:40pt;">Smith</span><br/>
<span style="font-size:20pt;">CEO</span><br/>
<span style="font-size:21pt;">Quest Inc</span>
</div>
</td>

thank you

todd

Hey there,

I have a page to print a discount card - and if it is on one page there print preview works great.

(ex. http://www.rxclubcard.com/your_card.php )

However, if i try to put 5 cards sequentially, and then look at the print preview, after the first page of cards the 2nd and third pages do not show the cards and the print gets screwed up. I am running a for loop just to print 5 table rows. Why does this happen?

(ex. http://www.rxclubcard.com/5cards.php )

I would appreciate any help! Thanks guys

I have a div that contains multiple fieldsets and every two fieldsets I add a page-break-after style. After the first page prints, the legend tags for each fieldset on subsequent pages are displayed completely inside the fieldset border.

My code essentially passes HTMLTidy validation. The only issues I have are unclosed input tags, alt tags for images, using the "&" sign and no title tag.

If those issues aren't causing the problem, and I can't see how they are, I don't know what to check next.

Because these are difficult issues to resolve from W3C documentation, I thought I'd post my notes on printing for HTML (which apply likewise to saving HTML as PDF, etc., or loading HTML pages into further client applications, to be saved as other formats):


In printing HTML output, user agents ("browsers") will not honor usual CSS code, dedicated to screen output. Similarly, functions such as loading an HTML file into a document editor or saving an HTML page to PDF will not honor screen-dedicated CSS, either. Browsers are not equipped for instance with logic to determine whether to discard left and right margins or padding, surrounding the usual web page. Similarly, some content may be undesirable to print, as is. Images for instance may need to be scaled to a different size; font-sizes and weights may need to be adjusted, and so forth.

The whole trick to accommodating the separate needs of screen and print output is to deploy separate media-specific ("screen"/"print") style sheets. When you save an HTML page as PDF, or when you load an HTML page into a document, the client application honors the CSS of the "print"-specific implementation.



-------------------------------------------------
LINKING IN SEPARATE CSS FILES:



For printing and file conversion functions to honor CSS, you have to link in media-specific style sheets as follows (media="screen" and media="print"):

<head>
<link href="css-pfmpe.css" type="text/css"rel="stylesheet" media="screen" />
<link href="css-pfmpe-print.css" type="text/css"rel="stylesheet" media="print" />
</head>



-------------------------------------------------
ENCLOSURE OF MEDIA-SPECIFIC CSS CODE IN EACH FILE:



All the CSS declarations of your "screen" style sheet (css-pfmpe.css) must be enclosed as follows:

@media screen {

/* all css code here */

}



All the CSS declarations of your "print" style sheet (css-pfmpe-print.css) must be enclosed as follows:

@media print {

/* all css code here */

}



-------------------------------------------------
GENERAL APPROACH TO MODIFYING THE PRINT-SPECIFIC CSS FILE:



Assuming you have refined your screen-specific CSS to intended behavior, you would generally save a separate, further copy of your "screen" style sheet as the latter "print" implementation. You would then change the top "@media screen" expression to read instead, "@media print."

The general focus of modification within the print-specific CSS file is as follows:

1. Eliminating outer, left and right margins or padding from exterior (enclosing) block constructs (within which your further block constructs are displayed).

This reduces the left and right margins to default printing or file conversion values (which you may have no control over, even in the client application's preferences/settings). A screen-specific CSS implementation for instance will generally limit itself to some column width which, when/if printed, may result in huge left and right page margins. These are reduced by your modifications of the print-specific CSS, so that paper is used to best advantage.

2. Re-scaling fonts.

Owing to translation differences, screen fonts are generally too large for printed media.

Depending on the screen sizes you display, you may:

a. determine a general scaling factor to apply to your font-size specifications;
b. and manually apply that scale to converted font-size specifications.

3. Re-scaling images.

You will generally want to apply a manually calculated scale to your images as well.

a. This means that standard images (used in many pages for instance) may require separate image-specific styles, indicating size; and that height and width specifications must be avoided in scaled images, in your HTML markup.

4. Indicating page break preferences.

Print-specific page break specifications (not needed in your screen CSS) indicate whether page breaks can be inserted before, after or within block content.

5. Indicating whether to print content.

Content which you don't want/need to be printed can be marked, "display: none;".





-------------------------------------------------
TYPICAL CHANGES IN EACH PRINT-SPECIFIC CSS FILE:



The general manner of addressing each concern is:


1. Eliminating outer, left and right margins or padding from exterior (enclosing) block constructs (within which your further block constructs are displayed).

a. Follow a pattern of engineering with an outer enclosing block, determining either margins or padding, and/or width of the outer block.
b. Set the margins or padding to 0, and/or the width to 100% in the print-specific CSS.



2. Re-scaling fonts.

a. Determine a general scaling factor to apply to your font-size specifications.

For instance, if your screen output declares a font-size of 17px for a given style class, and experiments determine that the desirable size ratio for print output is 11px, open your calculator, enter "11," divide by "17," store the result (ratio) in memory, and multiply your further font-sizes by the ratio to get resultant sizes. You will discover a minimum size in this process. If the answer is less than the minimum, apply the minimum instead.

b. Once you have calculated each scaled font-size, use global search-and-replace, starting with the smallest sizes to convert, and progressing to the larger. This will avoid double-processing errors (modifying the result of previous scaling, versus your intention to scale only unscaled declarations.



3. Re-scaling images.

a. Apply image-specific styles, indicating height and width in the style declaration. Scale height, width and margins as needed for print output.



4. Indicating page break preferences.

Print-specific page break specifications (not needed in your screen CSS) indicate whether page breaks can be inserted before, after or within block content. These declarations are generally made for the base style, so that properties are inherited to subclasses (where exceptions can be declared, if desirable):

a. HEADINGS - TITLES, SUBTITLES

Break before, but not within, nor after (next paragraph sticks to title, or title breaks off to next page with succeeding paragraph).

hx.MyStyle or p.MyStyle
{
page-break-after: avoid;
page-break-befo auto;
page-break-inside: avoid;
}


b. IMAGE

Break before or after, but never within image.

img
{
page-break-after: auto;
page-break-befo auto;
page-break-inside: avoid;
}


c. LIST ITEM

Break before, after, or within (but not in area occupied by image).

li
{
page-break-after: auto;
page-break-befo auto;
page-break-inside: auto;
}


d. PARAGRAPH

Break before, after, or within (but not in area occupied by image).

p
{
page-break-after: auto;
page-break-befo auto;
page-break-inside: auto;
}



5. Indicating whether to print content.

a. Content which you don't want/need to be printed can be marked:

BaseClass or BaseClass.Subclass
{
display: none;
}

Typical objects of this treatment for instance might be RSS subscription links.



-------------------------------------------------
PRINTING BACKGROUND COLORS OR IMAGES:


Note that according to W3C standards, printing of background colors or images is optional to the end user; and that by default, each are disabled in printer configuration options. It may be desirable to enable background colors or images for saving an HTML page to PDF for instance, while it may be undesirable for printed output (owing perhaps to vast consumption of ink).

To enable either for a particular purpose, access your printer preferences.

Hi folks. I've just encountered some problems printing pages in Internet Explorer SP2. The pages print fine in SP1, and virtually every other browser I've tried.

An example page can be found he

http://www.unbc.ca/hr/jobs/staff/0504cu.html

The problem under SP2 is the menu is pushed over and overlaps the main page content.

Can anyone tell me if this might be caused by a quick of SP2? The fact that it renders and prints correctly in EVERY other browser I've tried leads me to point the finger at SP2, but I can't say for sure.

Can anyone offer any advice on this?

Cheers and thanks in advance,

Pablo

Hey guys,

I'm working on a website and I have been notified by the client that the page does not print correctly in IE. Prints just fine in Mozilla however. I tested this and sure enough it cuts off the rightmost 100 or so pixels. The entire page exists in a table that is centered and set to be 729 pixels wide. I tried attaching an extra stylesheet:
Code:

<link rel="stylesheet" type="text/css" media="print" href="dummy.css">

but that has no effect. Even when I use the other stylesheet to move the content to the top left corner of the page with no borders, it still prints the page centered and lops off the rightmost 100 or so pixels.

Any ideas?

(telling them to print in another browser is not an option unfortunately)

On our new test site for our colleges online catalog I've been charged with trying to fix an issue we are having with some versions of Netscape on some PC's(not mac) where our CSS printing style isn't working....We can't pin point what causes the problem and some pages have the error and others do not, some pages print fine in 7.1 and not 7.2 or 8.1 (in 7.2/8.1 almost everything longer than one page in depth does not print properly) and its really nerve racking.

If anyone has experienced a similar problem or knows of a possible solution I would be eternally in thier debt.

The link is http://www.ramapo.edu/test/catalog_06_07/

and the pages that have print problems in netscape are generally longer than a page in depth are mostly major requirements pages like.

http://www.ramapo.edu/test/catalog_06_07/academicPrograms/TAS/iss_req_major.html

When the problem occurs the printer will usually print a blank page with just the url and date (header/footer) or will print nothing but 1 or 2 blank pages with the url/date and this can be seen in preview (no need to waste paper).

Here is what it looks like when it properly prints:
http://phobos.ramapo.edu/~chdonnel/properprinting.jpg

Here is what it looks like when netscape masacres it:
http://phobos.ramapo.edu/~chdonnel/badprinting.jpg

Thanks in advance,
Chris

Aaaah!
another problem...

now i have 2 divs, left one floated, and right one set that it's left margine distances him from left div.

when i print that page from FF it's ok, but when i try to print it from IE it looks like left one isn't floating - divs are one beneath other (right one shifted to right for that margin value).

what now?
thanks

Hi

I need to print a webpage, but I dont want it to print the date and url and title of the page on the top and bottom of the page. And also is there a way that you can print a page with buttons, without printing the buttons?