Paged Media « Intelligrape Groovy & Grails Blogs

Posts Tagged ‘ Paged Media ’

Add Page number using Page Property of CSS

Friday, August 20th, 2010
Posted by Uday Pratap Singh

In my recent project we need to generate the pdf document from HTML page. We are using iText renderer for doing this. The client had the requirement that each page bottom right need to have number on it. All these things need to be replicated on every page. So for doing this we need to know more about the CSS3 page properties . I found the solution in this documentation http://www.w3.org/TR/css3-page/ and http://www.w3.org/TR/CSS21/generate.html#counters
For doing this I did something like

@page {
        margin-top: 149px;
        margin-left: 2px;
        margin-bottom: 40px;
        margin-right: 2px;
        size: landscape;
        counter-increment: page;
 
     @bottom-right {
padding-right:20px;
        content: "Page " counter(page);
      }
 
    }

Its just so simple we added and incremental page counter in the page property which can be reset as well. As my counter was incrementing after each page so I defined counter-interment at page level, although depending on the cases you can increment the counter before or after occurrence of any element like.

.incrementClass:before {
   counter-increment: page;
}

in above example counter will be incremented before the incrementClass appears on the page.

Hope it helps

## Uday Pratap Singh ##
uday@intelligrape.com

http://www.IntelliGrape.com/
http://in.linkedin.com/in/meudaypratap

  • Share/Bookmark
Tags: , , ,
Posted in Grails, HTML-UI-CSS
No Comments »

Creating Paged Media with Different Paged Modes Using CSS3

Friday, July 30th, 2010
Posted by Vivek Krishna

In one of our projects, we had to create PDF documents from HTML. The iText renderer was an excellent solution to do that. However, the tricky part was that the cover page had to be of portrait orientation and the rest of the document, of landscape orientation. After doing a fair share of searching on the web, I came across the Documentation for CSS3 Paged Media.

This could be achieved by creating an @page rule with a page name and then, using the page name in the element, which was going to enclose the body, for which we needed a particular style.

For example, since I needed the landscape mode on the inner pages, I had to create a @page rule in the CSS file as

@page content{
           size: A4 landscape;
}

And a css selector,(say a div, which was going to enclose such pages)

div .content{
          page: content;
}

If the HTML was something like,

<content in portrait mode>
<div class=”content”>
My contents here
</div>
<content in portrait mode>

“My contents here” would appear in a landscaped page.

Hope this helps

Vivek
vivek[at]IntelliGrape.com

http://in.linkedin.com/in/svivekkrishna

  • Share/Bookmark
Tags: , ,
Posted in HTML-UI-CSS, Java tools
No Comments »