Wednesday 26 September 2012

Print Style Sheet : What is Print Style Sheet ? How to Set up Print Style sheet ?

Print Style Sheet : What is Print Style Sheet ? How to Set up Print Style sheet ?


What is Print Style Sheet ?

A print stylesheet formats a web page so when printed, it automatically prints in a user-friendly format. Print stylesheets have been around for a number of years and have been written about a lot. Yet so few websites implement them, meaning we're left with web pages that frustratingly don't properly print on to paper.

How to set up Print Style sheet ?

The best method is to start from scratch and rely on the default style sheet of the browser, which takes care of the printed output pretty well by default. In this case, insert all declarations for printing at the end of your main style sheet, and enclose them with this distinct rule:

@media print {
   …
}








For this we have to do two things 

1. Include all screen styles in the separate @media screen {…} rule;
2. Omit the media type for the condensed style sheet: 
<link rel="stylesheet" href="css/style.css"/>

or we can write like this :

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

 Now ready to add print style sheet ? Thinking about how to write styles?? 
Check the below example: 

   * Remove unwanted elements */
#header, #nav, .noprint
{
display: none;
}

/* Ensure the content spans the full width */
#container, #container2, #content
{
width: 100%; margin: 0; float: none;
}

/* Change text colour to black (useful for light text on a dark background) */
.lighttext
{
color: #000
}

/* Improve colour contrast of links */
a:link, a:visited
{
color: #781351
}


Every thing done, Still have an issue with printing background colors  & Images ?
Here is the solution :

How to get Background Colors & Images in Pirnt ? 
How to get Background Colors & Images in Print pdf file created in Chrome ? 

It's simple,

Add 
"-webkit-print-color-adjust:exact; " property in body styles.

Ex:
body {background-color:#fff; font-family:arial; font-size:15px; background:white; -webkit-print-color-adjust:exact;

 




HTML5: The figure & figcaption elements

HTML5: The figure & figcaption elements

Definition and Usage

The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. While the content of the <figure> element is related to the main flow, its position is independent of the main flow, and if removed it should not affect the flow of the document.

The <figure> tag also supports the Global & Event Attributes in HTML5.

The <figure> element

W3C Says :

The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning.


The <figure> element is intended to be used in conjunction with the <figcaption> element to mark up diagrams, illustrations, photos, and code examples (among other things). The spec says this about <figure>:
 

The <figcaption> element

 W3C Says :

The figcaption element represents a caption or legend for a figure.

The <figcaption> element is optional and can appear before or after the content within the <figure>. Only one <figcaption> element may be nested within a <figure>, although the <figure> element itself may contain multiple other child elements (e.g., <img> or <code>). 


Using <figure> and <figcaption>

Want to know how to use ?? Code Examples?

<figure>
  <img src="/image-name.jpg" alt="Figue Example display">
</figure>
 
Figure with caption Like :
 
<figure>
  <img src="/macaque.jpg" alt="Macaque in the trees">
  <figcaption>Lorem Ipsum starts form here. Dummy text. <a href="http://www.google.coml">Google</a></figcaption>
</figure> 
 
 
Multiple Images with Caption :
 
<figure>
  <img src="/image1.jpg" alt="Kooaburra">
  <img src="/iamge2.jpg" alt="Pelican stood on the beach">
  <img src="/image3.jpg" alt="Cheeky looking Rainbow Lorikeet">
  <figcaption>Signle Caption for multiple Images <a href="http://www.google.com">Fig Caption</a></figcaption>
</figure> 

Differences between <figure> and <aside>
 
If the content is simply related and not essential, use <aside>.
If the content is essential but its position in the flow of content isn’t important, use <figure>. 
 
Text Source:
W3schols, W3C,