I have worked for CV builder and CV print project on Bayt.com, and I had some difficulties with solutions I want to share it:

 

1. Background doesn’t work on print media.

I have multiple sections, every section title has background color, and when I print it I don’t view background color, but the best solution for it by use border, like:

<h2 class=” section-title”>

<span>Section Title</span>

</h2>

@media print {

.section-title {

Border-top: 35px solid #DADADA; // which mean height for the element title

}

.section-title span {

Margin-top: -35px; // which mean move text top

}

}

The solution by draw thick border, and move text up by using margin minus.

And the same I has an elements tags with change background color on hover it, so I fixed it too by border.

 

So try think for border if have any background issue in print media.

 

2. Border color doesn’t appear well like pc screen.

Because we use color light when I print it the color not view exactly like screen, so I tried use darker color for print, because the printer doesn’t view border color very well.

So if you have for example color: #ECECE, use #999 ( more darker ).

 

3. Font size and font color doesn’t appear well.

Make sure to use font size >=  12px, font-family; arial and color dark.

 

4. When you want to disable any block code in print, just use :

Display:none;

 

5. Reset the main element at the top of css, like:

@media print {

html,

body,

#frame,

#frame-popup,

#content,

#content-frame,

#content-frame-wrapper,

.sec {

float:none;

margin:0;

padding:0;

width:100%;

color:#000;

border:none;

background:#fff;

}

}

 

3 thoughts on “Some tricks for print media CSS

  1. Very bizarre that MyFonts lets you host your own font-face fonts…

  2. Soledad

    Your post, Some tricks for print media CSS | Islam Al-Zatary, is really well written and insightful. Glad I found your website, warm regards from Soledad!

  3. Merely wanna say that this is very useful , Thanks for taking your time to write this.

Leave a Comment