Changing page orientation last - html

So far I'm only managing to handle the first page, but my focus is the last, the last I want to be in landscape orientation.
I used it on the first page,
#page :first {
size: A4 portrait;
}
#page {
size: A4 landscape;
}
I tried the most obvious, like # page: last but not available
is an example
http://jsfiddle.net/AFLPY/2/

As far as I'm aware there's no way to control it. (See edit below!!)
The spec only seem to offer :first without a :last counterpart.
References:
http://dev.w3.org/csswg/css-page/#at-page-rule
https://developer.mozilla.org/en-US/docs/Web/CSS/#page
Edit:
What about something like this example from the w3 spec?
In this example, the two tables are rendered on landscape pages
(indeed, on the same page, if they fit). The page type "narrow" is
used for the after the second table, as the page properties for
the table element are no longer in effect:
#page narrow { size: 9cm 18cm }
#page rotated { size: landscape }
div { page: narrow }
table { page: rotated }
with this document:
<div>
<table>...</table>
<table>...</table>
<p>This text is rendered on a 'narrow' page</p>
</div>
So, if you set an #id for the last element on the last page, you could perhaps style it that way?

Related

How to properly set print orientation in Angular application?

I need to create a printing service, that can be called from different components throughout my application. The service method accepts two parameters, the component that needs to be compiled and printed, and the printing orientation (Portrait or Landscape).
Everything works fine, except the orientation. Either it is not set, or it sticks with the secondly applied orientation. What I mean by secondly applied orientation is, I have two buttons for testing purposes. Each button calls different component and sets different orientation. If I click the buttons in the following order: Portrait orientation and then Landscape orientation, no matter what I press after that, the page is printed in Landscape, and vice versa.
So far, I have tried the following:
defined two different div elements conditionally generated (with ngIf directive). Each div contains <style></style> elements with appropriate page orientations. The style elements are not rendering, hence orientation is not changed
page orientation is defined within the component's style/stuleUrls metadata. This produces the problem with the secondly applied orientation as described above
add styling to the dynamically created components with ComponentFactoryResolver. The styling to the page is not applied
The component is dynamically generated using the ComponentFactoryResolver. For simplicity, I won't post that code. I will post it if it's needed.
This html is added in the app.component.html:
<div class="print-section">
<div *ngIf="printOrientation === orientationEnum.Landscape">
<style>
#media print {
#page {
orientation: landscape !important;
}
}
</style>
</div>
<div *ngIf="printOrientation === orientationEnum.Portrait">
<style>
#media print {
#page {
orientation: portrait !important;
}
}
</style>
</div>
</div>
The same code is added within the component style/styleUrls metadata.
I have also tried adding classes to the generated components dynamically, after the component is created:
let element: HTMLElement = <HTMLElement>componentRef.location.nativeElement;
this.printTemp.layout === PrintLayoutEnum.Landscape ? element.classList.add('landscape-print') : element.classList.add('portrait-print');
This doesn't affect the orientation at all.
Expected outcome is to change the orientation appropriately. Either by setting the style in app.component.html, or by applying the dynamically when the component is rendered with the ComponentFactoryResolver. I prefer the second options, but either one should be fine.
I got tunnel vision and I tried to over-complicate the solution. I created a style element with id. During the component creation with the ComponentFactoryResolver, I simply appended the desired style:
let styleElement = document.getElementById('print-style');
styleElement.append('#media print { #page { size: A4 landscape; } }')

Print site logo just on first page (#media print )

I need to create print version of website, and as I mention in title I need to display site logo just on first page. For example, if I print home page, and I get 5 pages, logo should be displayed just on first page.
is it possible with #media print ?
What I've tried so far but does not work
#media print {
#top-menu,
#main-navigation-sticky-wrapper,
#action-bar,
.teaser-cda,
.pre-footer,
.footer,
.post-footer,
.header .logo {
display: none;
}
#page:first {
.header .logo { display:block }
}
The correct syntax (according to MDN) for first page is:
#page :first {
/* .... */
}
You don't have a space between the two components. Be wary, however, as compatibility for #page :first is not well-defined.
It might not even be necessary though. I don't think block-level elements get repeated on every page, so you might just need to ensure that the logo is displayed in #media print { ... }.
You will also want to check the element and it's container elements to ensure that none of them have position: fixed as that may also cause the element to repeat on each printed page.
#page rule is a CSS at-rule used to modify different aspects of a printed page property. It targets and modifies only the page's dimensions, page orientation, and margins.
It can't have css class inside.
#page :first {...} it just allows you to add these previous styles on the first page but you can't also add a class inside.

css - Printed page text goes outside the block on page break

So i have this generated page i want to print - http://hubog-2017.com/print_prog_en
I break the page after each table. In the second table, one of the texts is too long and it breaks into two pages (Pages 2 and 3). Now the problem is that the text gets outside its TD and i see it on the THEAD.
I tried using word-breaks and padding's with no success.
Managed to get a partial solution by adding this CSS:
Its not exactly how i wanted it to look but at least the text is not breaking...
#page {
size: A4;
}
#media print {
html, body {
width: 210mm;
height: 297mm;
}
}

Print page in same size for all screens

maybe this question is too weird or even is off-topic, sorry for that but I have this doubt:
Exists a way to show a HTML page in the same size for all screens when the user types control + p (print page)?
For example my laptop have this screen resolution: 1600x900 and when I type control + p the HTML page look perfect (all in 1 page)!
Problem appears when I use a bigger(page appear in 2 or more pages) or smaller screen(page appear in 1 page but with a lot of blank spaces).
At the moment I tried with #page margins but not work at all, just in some cases, however here is the code:
<style>
#page :left {
}
#page :right {
margin-top: 0.2cm;
margin-bottom: 0.2cm;
}
body {
font-size: 9.5px;
}
</style>
PD. I'm using JavaScript, jQuery, HTML5, CSS3, Bootstrap.
Control + P means print, right?
Then yes, you should use the media query
#media print{
}
This a good explanation: https://www.smashingmagazine.com/2011/11/how-to-set-up-a-print-style-sheet/

How to give some space to every page in printing only using css

I want to give some space to top of every page which is applied in only in printing mode.
is it possible or not..?
I am using:
#page { margin-top : 30px; }
But it doesn't get applied..
Are there any other methods available in css..?
You can do the following way.
#media print
{
body {margin-top:30px;}
}
This will select and target only the print related CSS changes. Hope this helps.
*PS: I have taken Body element, but if you want, you can target specific wrapper that is part of your HTML and you can target it specifically only if you want that wrapper to start from top with certain spacing. You have the solution with logic. Use it to match your scenarios.*