{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 Luminary・发光体 的问题《How can I define a CSS class to set the printed pa》','https://www.manongdao.com/q-620114.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
I have created a CSS style sheet which can print an HTML page in landscape mode using the following @media rule:
@media print{
@page {size: landscape;}
}
I do not want to print all HTML pages which load this style sheet in landscape mode. Ideally, I'd like to be able to specify a landscape class which would do this.
As the HTML is generated, I could always create a separate landscape.css file and append it to the header as needed, but I was hoping that there might be a cleaner way to do this with classes.
As a follow-up, I also tried the following with no luck:
@page rotated {
size: landscape;
}
@media print{
.rotate {
page: rotated;
}
}
I am probably just beating my head against a wall for a solution that only appears to work in webkit based browsers. The @page size: landscape setting does not appear to work in Firefox or (surprise, surprise) ie10.
Unfortunately, we are currently unable to utilize page type selectors for media queries beyond the supplied
:left,:right,:first, and:blankpseudo-classes.https://www.w3.org/TR/css3-page/#page-selector-and-context
The W3C is however considering the addition of other page pseudo-classes for future levels of CSS [
@page :nth(4) { ... }or@page (.class) { ... }]. I'm not sure why named pages were not able to work, but as of Jan 26, 2016, level 4 media queries (including the @page at-rule) may include ranges, negation, and custom media queries using scripting. Further, the size property is currently only supported in Chrome.https://www.w3.org/TR/mediaqueries-4/
This is the closest I was able to get using just HTML and CSS, which applies landscape orientation to even-numbered pages. I know this isn't an exact solution, and it only works in Chrome.
I would think that the best way to accomplish this would be to do the following:
I haven't tested this, so correct me if I'm wrong. Good luck!
I created a blank MS Document with Landscape setting and then opened it in notepad. Copied and pasted the following to my html page
List item
mso-paper-source:4;} div.Section1 {page:Section1;}
put text / images / other stuffThe print preview shows the pages in a landscape size. This seems to be working fine on IE and Chrome, You can see this also
I don't really understood what you did with:
Anyway, you want to print some pages in
landscapemode while other pages should be in default (portrait) mode. So I propose this:And we'll add
.special-pageforbody.(Through JS maybe) like:Checkout this jsbin
What we doing is writing specific styles for
printmode of a page through@media print, and we are rotating whole page180degso that it will work as in landscape mode if thebodycontains.special-pageclass.I couldn't find another way using
@pageand classes.The trick is in the
mediaattribute set that toprintlike this:Then use this CSS inside of that
styleelement:Here is a working example that allows you to print in both directions:
(Tested and working on Chrome, Edge & Firefox.)
Good luck and all the best.