Understanding Print Properties in CSS

Hello guys. Welcome to our segment CSS. In the last segment we had checked and studied about CSS Visible property. How we can make any HTML element visible and show. With the help of static CSS and javascript, we checked the example with both visibility hidden and visibility visible properties. I hope you have practically performed both the examples and practiced it.  Okay, guys! so,  We will go ahead with our today's segment, our today's segment is on CSS print properties, print properties means whenever we try to print the webpage at that time how we can print it and in that what are the availabilities, which are properties that are made available to us in CSS. So, usually when we print, we have default three properties available. Page Break before, page break inside and page break after. Today we are going to see all three properties one by one. okay! If you see page break before, like the name suggests, it indicates that  to add a break in the page. Where? One is where we have applied this property, before that apply the page break, inside means where we are currently, there we have to apply the page break and after means where we are, where this property is being applied. After that 1 page break is applied. So, this is its basic meaning. Now we will see it in detail, what is page break. Like the page break before property is there. What does it do? The CSS property is used to add the page break before the element when printing the document means if in any division, I have added this page break property, page blank before so before that, one page break will be added. It inserts a page break before the specified element during printing the document. We cannot use this CSS property on absolutely positioned elements or any empty div element. Means if I have taken any such element which we have defined as absolute through CSS. There we cannot use this property, only the relative elements which are there, which are placed one after the other on our webpage. We can only apply this property over there. Next, if we have taken any division but inside the division, we have not added any data, we have not added any content. So that is an empty division. For example, div tag start and directly div tag end. In between, there is no content, so we cannot apply this property there. Okay, guys! so for page break before we compulsorily need a relative element. Such an element which is not absolute. It is not mandatory that it should be relative but it should not be absolute. It's position property. And the second is the div element should not be empty. For page break before there are a total five values which are available with us, auto, always, left, right and avoid. If you see them one by one. We have descriptions available for each of these values. Like auto. It is the default value which means Auto is a default value. Wherever we have added page break, page Break auto, the element after that. We will get a page break that has been added. Always means, this value forces a page break before the specified element. Means if I have given somewhere Page Break always. So, to our browser, when we open the print preview. There forcefully a page break is added. Avoid means that page break will be avoided and it will not be added there. Left means like if we have a book. We have left, right pages in the book. Usually when we apply print, usually our pages have two sides. If we do left, the page break is added on our left page. If we mention right, on the right page, the page break is added. Like it is mentioned here, this value forces either one or two page breaks before the element so that the next page will be depicted as the left hand page. Means if we have written left it is not necessary that only one page break will be added as per the requirement and as for the condition like if currently my page is already there on the left side, in the left only I am adding page break left, so maybe I will have to add the page break twice, so that the left page should also get over and the other side right page should also get over and my next content should start again from left page means from the new left page. If we are using the notebook, it has a left page, leaving the left page we are again coming to the left page. right? This is what is happening here. Same condition but in the right-handed page. If I'm giving the page back right, my page break will happen twice. But in such a way that my next content will be set on the right-hand side. So, for this we will perform one practical through Sublime Text. So, we will open the sublime text, html “Example page break before”.(pause) So, this is our program now we will add some content inside this program, like I will take the h1 tag “Hello Everyone”. H2 tag “This is Learnvern”. And after that I will take a div and in this div I will add some content for example “This is Learnvern…”.(pause for 15 seconds) Okay. So, we have added here a sort of a paragraph. So here h1, here h2, this is our paragraph, so this paragraph of ours is inside a div tag. And this heading also I will add inside a div; save, okay, so reload. So, our h1, h2 and after that one paragraph is coming. So basically, what we will do here is, now we will go in the style. Coming in the style, the div tag that we have used here, we will give that div tag a fixed font size for example, font size 20 pixel and our Page Break property that is their page break before, auto we will give. Now when we have to apply this, when we print it. So, let's say, if on one button we have to perform print. For that I will use the br tag. After br I will place one button here for example it is called button. On its on click event, we will call a method named print through javascript, print. So, now we will write a javascript also in it. So, after our body, after this we will directly add one script, in script we will have a function print.okay guys! To perform the print, we can write something like this in the javascript, window.print. That's it. So, this has come, in 20 pixels all our sizes have increased. And we have also got a print button here. As soon as I click on the Print button, my print is not performing. I will change the name of the function here. Print function, save, reload and this Print. The print is our keywords so that is the reason this is happening. As soon as I clicked on print, you can see that my print preview has opened up. So, before the division we have allowed the page break and given auto. So, you can see that my screen that is there my page is opening like a normal page here in print. Now what we will do is the same thing but we will comment this. Page break before and in this slide, we have got the values available, always. So now we will add always, reload, print. So, you can see that when my one div is getting over, after that the next div is going into a new page. It means that before our division, one page break is getting added, which means this is a page break that has been added and then the other content is jumping to the next page. Our next property is avoid, so we will comment this. Page Break before, avoid, reload, print. So, you can see that before my division Page Break is not coming. It means that our Page Break is getting avoided. Okay guys, got it?  Next value that is there is left and right, to perform the left and right we require a printer machine, in that if we give left property, in our current screen we will get this output, we are getting one page break that has been added. If this is our page, then our next content would be added to the left-hand side. Same way after page break before, if I add right so you can see that, on print, page break is getting added, normal. So, you can see here that the left and right output that is there, we are getting it almost the same as we don't have a printer available currently. This output is what we will get while printing. Our content will be printed on the left-hand side or it will get printed on the right-hand side. So, these are our values, auto. This is our default. It inserts the page break but if necessary. Always, always adds. avoid doesn't  add? And left and right, based on left, right it inserts on the left or right page. Same is our page break inside. Exactly how is our page break before it is the same property but the difference is page break before, our division where we have applied the page break, it adds a page break before it. What inside does is, on which element we have applied the page break, inside that element. Exactly on that place it adds the page break.okay!  Like we had seen in page break before on absolute content it doesn't get applicable. The same way on empty div it is not applicable. It inserts or avoids a page break inside the specified element during printing the document. Means when we are printing the page break will be added inside our element. Earlier we had five values available. But currently in page break inside there are only two values available, either auto or avoid. Either you add or avoid it but you know that in auto if it is necessary only then we get the page break added. For this we will generate one new program, whatever we have written here we will place it here as it is. We will save it, page break inside.html, here the properties that we have applied it will come; page break inside. The first property was auto so if this is our program, this is another program, inside. Okay, when we click here, we are getting the output but in auto, if necessary, it is added only then page break is getting added. But here the necessity is not there. So, it is not getting added, same way if I replace it with avoid, so definitely there the page break will not be added so if we even want to add the page break, it will not happen. So, in auto and avoid, we are getting the same output. Always is not the value here. But still, we will add it and see if we are getting the output or not. So, you can see that after adding always we are not getting any output. Means in inside auto and avoid are the only two values that are available with us. If we can add if there is a necessity only then it will be added otherwise in inside our page break will not be added. inside. Okay. Next, we will go ahead page break inside, auto and always we have seen. It will be auto and avoid actually. Next is our page break after, means in page break before, we were adding page break before the element, page break after will be added after our element means whichever is our element after that add the page break. Okay, guys!What is happening here, what is mentioned here is that this CSS property is used to adjust the page break after the element when printing the document. Means whichever is our element after that it will be added. It inserts a page break after the specified element during printing. Means if I have applied it on any exact division after that our page break will be added, for that also we will perform the same program; after, page break after and here we have the values auto, same which were available in before, same values are available here with us. So, we will add here auto, we will save this program, pagebreakauto.html. Page break after, the first value was auto, so with that we will run this program. Okay, so this is our page, as you know that in auto if it is necessary only then it will be added. So, you can see here that in the output nothing has been added. There is no Page Break that has been added. So, we will change our value now. Our next value is always; always, reload. So here we have made it always so you can see that the page break is getting added and our next content is going to the next page. Now you can see here that in our code, we have taken a div in that we have taken one h1 and h2 tag. So, page break after means adding the page break afterwards. So, after our this div one page break is getting added which you can see, the content after this is going in the new div, which is here.okay,guys! Even this content of ours is in one division. After this div also our one page break is getting added so that is our new content, going on the third page where only our print button is getting placed. So, the page break after means in which element we have placed after that the page break is added. Page break before means adding it before. So, this was our first content, there was nothing before that, so there was no empty page that was added before it when we had used page break before. But here we have added page break after, so after this element, after h1 h2 tag one content is getting added, one page break is getting added. So, here is our paragraph and after a page break on the third page only a button is added. So, this was our always and if in this place we use avoid; save, reload, print means our page blank will not be added. After avoid comes left same as it happened in right. Sorry, like it happened in page break before, the same property will be applied here. Our next page break that is there. It will be applied on the left-hand page. Okay, so you can see that the output that we are getting in always the same we will get. But our pages will be set on the left-hand side while printing and similarly if I add right somewhere, so in the right also I will get the same print. But while printing it will be printed on the right-hand side pages. So, these were our three types of page breaks in print property, page break before, page break inside and page break after. Inside and after. These 3 are our page breaks. We can add the page break inside of our html program. So, you can see all 3 properties, in before and after we have 5 values available but in inside, we have only 2 values available, auto and avoid. So, guys this was our page break. If you are getting any question or query in today’s segment or if there is anything that you are not understanding. You can tell us about it on forums.learnvern.com. We will try to revert to you with solutions to all your questions. In our next segment we will see about the cursor. Thank you.