Posts A4PaperSize
Post
Cancel

A4PaperSize

Displays the paper size of A4 paper in pixels at different Pixels Per Inch (PPI)

DPI (dots per inch)

PPI (pixels per inch)

http://www.a4papersize.org/a4-paper-size-in-pixels.php

ppi2dpi and vice versa


PageBreak

source http://davidwalsh.name/css-page-breaks

1
2
3
4
5
6
7
@media all {
	.page-break	{ display: none; }
}

@media print {
	.page-break	{ display: block; page-break-before: always; }
}

the usage

1
2
3
4
5
6
7
# Page Title

<div class="page-break"></div>

<div class="page-break"></div>

page-break-before and page-break-after http://www.w3schools.com/cssref/pr_print_pageba.asp http://www.w3schools.com/cssref/pr_print_pagebb.asp


Non Printable Elements

source : http://stackoverflow.com/a/356123

1
2
3
4
5
6
7
@media print
{    
    .no-print, .no-print *
    {
        display: none !important;
    }
}

Add class=’no-print’ (or add the no-print class to an existing class statement) in your HTML that you don’t want to appear in the printed version, such as your button.

James Moberg writes : In addition to the “noprint” class, you can create a “noshow” class and allow specific information (copyright, URL, instructions, etc) to be printed but not readily viewable.

1
2
3
4
5
6
7
8
9
10
11
/* Screen Only */
@media screen {
.noprint {display:block !important;}
.noshow {display:none !important;}
}

/* Print Only */
@media print {
.noprint {display:none !important;}
.noshow {display:block !important;}
}

source - http://stackoverflow.com/a/10040368

made an action after print

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var printCustom = function() {
//before print
 	$("body").css('background','#ffffff');

 	window.print();

//after print
	$("body").css('background','#1c1c1c');
}

 function do_print()
 {
		printCustom();
 }

Print Pictures

each one should have height 842px and width 595px source http://stackoverflow.com/a/3341581

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
includes transition by tjvantoll

	$(function() {
			//transition
			$( "html" ).removeClass( "loading" );
	});

		var printCustom =function()
		{
			$("#floating").hide();
			$("body").css('background','#ffffff');
			window.print();
			$("body").css('background','#1c1c1c');
			$("#floating").show();
		}

		function do_print()
		{
			printCustom();
		}

<style>
/*transition by http://tjvantoll.com/2013/04/24/showing-a-css-based-loading-animation-while-your-site-loads/*/
	html {
	    -webkit-transition: background-color 1s;
	    transition: background-color 1s;
	}
	html, body {
	    /* For the loading indicator to be vertically centered ensure */
	    /* the html and body elements take up the full viewport */
	    min-height: 100%;
	}
	html.loading {
	    /* Replace #333 with the background-color of your choice */
	    /* Replace loading.gif with the loading image of your choice */
	    background: #333 url('loading.gif') no-repeat 50% 50%;

	    /* Ensures that the transition only runs in one direction */
	    -webkit-transition: background-color 0;
	    transition: background-color 0;
	}
	body {
	    -webkit-transition: opacity 1s ease-in;
	    transition: opacity 1s ease-in;
	}
	html.loading body {
	    /* Make the contents of the body opaque during loading */
	    opacity: 0;

	    /* Ensures that the transition only runs in one direction */
	    -webkit-transition: opacity 0;
	    transition: opacity 0;
	}
</style>

	<div id="floating" style="margin:0 auto;padding:0;display:block; position:fixed; top:30px">
		<div style="margin:0px 0 0 0;padding:0 0 0;">
			<div class="icon" style="margin:0; padding:5px ;float:left; background:#2ea3fb; border:1px solid #0099ee">

*   [
							![](img/print_icon.png)
						](javascript:void(0))

			</div>

		</div>
	</div>

	<center>
		![](img/pg01.jpg)

		![](img/pg02.jpg)
		![](img/pg03.jpg)

		![](img/pg04.jpg)
		![](img/pg05.jpg)

		![](img/pg06.jpg)
		![](img/pg07.jpg)

		![](img/pg08.jpg)
		![](img/pg09.jpg)

		![](img/pg10.jpg)
		![](img/pg11.jpg)

		![](img/pg12.jpg)
		![](img/pg13.jpg)

		![](img/pg14.jpg)
	</center>


A4 CSS page template by rafaelcastrocouto

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
source - http://codepen.io/rafaelcastrocouto/pen/LFAes/
<style>
body {
  background: rgb(204,204,204); 
}
page[size="A4"] {
  background: white;
  width: 21cm; 
  height: 27.5cm; 
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
  page-break-after: always; 
}
@media print {

  body, page[size="A4"] {
    margin: 0;
    box-shadow: 0;
  }
}
</style>

<page size="A4">Page1</page>
<page size="A4">Page2</page>
<page size="A4">Page3</page>
<page size="A4">Page4</page>
<page size="A4">Page5</page>

origin - http://www.pipiscrew.com/?p=1924 a4papersize

This post is licensed under CC BY 4.0 by the author.
Contents

Trending Tags