jfreyre/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    How to use ?

Simple try to print this example ;)

  
## index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="print.css" />
    <style type="text/css" media="screen">
        body {
            color: red;
        }
    </style>
</head>
<body>
    <h1>HTML Ipsum Presents</h1>

    <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

    <h2>Header Level 2</h2>

    <ol>
     <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
     <li>Aliquam tincidunt mauris eu risus.</li>
 </ol>

 <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>

 <h3>Header Level 3</h3>

 <ul>
     <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
     <li>Aliquam tincidunt mauris eu risus.</li>
 </ul>

 <pre><code>
    #header h1 a {
        display: block;
        width: 300px;
        height: 80px;
    }
</code></pre>
</body>
</html>

## print.css
@media print {
    * {
        /* Définit un police "user-friendly" pour l'impression */
        font-family: Georgia, Times, serif;
    }
    #news, #menu {
        /* On cache les éléments inutiles pour l'impression */
        display: none;
    }
    @page {
        margin: 2cm;
    }
    /* Evite aux titres d'être affiché en bas d'une page */
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
    }
    /* Empêche les images de déborder */
    img {
        max-width: 100% !important;
    }
    /* Empêche aux listes et images d'être affiché sur plusieurs pages */
    ul, img {
        page-break-inside: avoid;
    }
    /* Les liens de la div #content seront affiché ainsi:
    text du lien <http://url_du_lien>
    */
    #content a[href^=http]:after {
        content:" <" attr(href) "> ";
    }

    /* Fun! Vient créer un qrcode de 100px affiché en haut à droit qui pointe sur votre site */
    body:before {
        content: url(https://chart.googleapis.com/chart?cht=qr&chs=100x100&chl=http://yourdomain.com&choe=UTF-8);
        position: absolute;
        right: 0;
        top: 0;
    }
    /* etc... */
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="print.css" />
	<style type="text/css" media="screen">
	body {
	color: red;
	}
	</style>
	</head>
	<body>
	<h1>HTML Ipsum Presents</h1>

	<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>

	<h2>Header Level 2</h2>

	<ol>
	<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
	<li>Aliquam tincidunt mauris eu risus.</li>
	</ol>

	<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>

	<h3>Header Level 3</h3>

	<ul>
	<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
	<li>Aliquam tincidunt mauris eu risus.</li>
	</ul>

	<pre><code>
	#header h1 a {
	display: block;
	width: 300px;
	height: 80px;
	}
	</code></pre>
	</body>
	</html>
	@media print {
	* {
	/* Définit un police "user-friendly" pour l'impression */
	font-family: Georgia, Times, serif;
	}
	#news, #menu {
	/* On cache les éléments inutiles pour l'impression */
	display: none;
	}
	@page {
	margin: 2cm;
	}
	/* Evite aux titres d'être affiché en bas d'une page */
	h1, h2, h3, h4, h5, h6 {
	page-break-after: avoid;
	}
	/* Empêche les images de déborder */
	img {
	max-width: 100% !important;
	}
	/* Empêche aux listes et images d'être affiché sur plusieurs pages */
	ul, img {
	page-break-inside: avoid;
	}
	/* Les liens de la div #content seront affiché ainsi:
	text du lien <http://url_du_lien>
	*/
	#content a[href^=http]:after {
	content:" <" attr(href) "> ";
	}

	/* Fun! Vient créer un qrcode de 100px affiché en haut à droit qui pointe sur votre site */
	body:before {
	content: url(https://chart.googleapis.com/chart?cht=qr&chs=100x100&chl=http://yourdomain.com&choe=UTF-8);
	position: absolute;
	right: 0;
	top: 0;
	}
	/* etc... */
	}