I need to make a force print on google chrome print option
i try to use this code on CSS and its force make portrait or landscape
but i need to make force to page size like A5 or A6
#media print{
#page {
size: portrait;
margin-top: 0cm;
margin-bottom: 0cm;
margin-left: 0cm;
margin-right: 0cm;
}
}
is it code for force option to select A5 or A6 option on print option like portrait or landscope
Screenshot:
I think this is what you are looking for. Just setting size: A4 landscape;
#media print {
#page {
size: A4 landscape;
max-height:100%;
max-width:100%
}
}
Depending on your img or whatever your trying to print you can also set your img under #page to make it fit better.
img {
width:100%;
height:100%;
display:block;
}
Related
I've to print out 2 html pages in a web-app. The first page must be printed out in A5 size , the second in A6 size. I tried to force the a5 print settings with
#media print{
#page {
size: A5 portrait;
margin: 0;
}
}
and the a6 print settings in the other file with
#media print {
#page {
size: A6;
margin: 0;
}
}
I try to print the A5 page , paper size doesn't change (but portrait mode is set)
add this CSS for A5,
You just have to give fixed size
example A5
#media print and (width: 14.8cm) and (height: 21cm) {
#page {
margin: 2cm;
}
}
/* style sheet for “letter” printing */
#media print and (width: 5.83in) and (height: 8.27in) {
#page {
margin: 1in;
}
}
/* A5 Landscape*/
#page {
size: A5 landscape;
margin: 10%;
}
/* A5 Landscape*/
#page {
size: A5 landscape;
margin: 10%;
}
You need install a printer driver and add a custom paper size.
It is impossible to change the paper size using css or JavaScript.
I am using an application to print the pages in potrait and landscape mode together.some pages are printing in potrait and some are in landscape.Printing the pages either in potrait or landscape looks good.But printing the pages in potrait and landscape together makes the pages with potrait to be congested.
This is the media query am using,
#media print {
html {
max-width: none;
width:100%;
float:left;
}
#nav-wrapper {
display: none;
}
div.pageBreak {
page-break-after: always !important;
}
#page{
size: auto;
margin: 0;
}
.landscape1 {
transform-origin: top left;
transform: translateY(1850px) rotate(-90deg);
overflow-x: hidden;
width: 1850px !important;
}
}
Media Queries offer matching against the device's orientation:
#media print and (orientation: landscape) {
/* landscape styles */
}
#media print and (orientation: portrait) {
/* portrait styles */
}
Work it in this way.
OR
Maybe you can try this custom css which someone tried online.
Here is a right CSS which work in the most browsers (Chrome, Firefox, IE9+).
First set body margin to 0, because otherwise page margins will be larger than those you set in the print dialog. Also set background color to visualize pages.
body {
margin: 0;
background: #CCCCCC;
}
margin, border and background are required to visualize pages.
padding must be set to the required print margin. In the print dialog you must set the same margins (10mm in this example).
div.portrait, div.landscape {
margin: 10px auto;
padding: 10mm;
border: solid 1px black;
overflow: hidden;
page-break-after: always;
background: white;
}
The size of A4 page is 210mm x 297mm. You need to subtract print margins from the size. And set the size of page's content:
div.portrait {
width: 190mm;
height: 276mm;
}
div.landscape {
width: 276mm;
height: 190mm;
}
I use 276mm instead of 277mm, because different browsers scale pages a little bit differently. So some of them will print 277mm-height content on two pages. The second page will be empty. It's more safe to use 276mm.
We don't need any margin, border, padding, background on the printed page, so remove them:
#media print {
body {
background: none;
-ms-zoom: 1.665;
}
div.portrait, div.landscape {
margin: 0;
padding: 0;
border: none;
background: none;
}
div.landscape {
transform: rotate(270deg) translate(-276mm, 0);
transform-origin: 0 0;
}
}
Note that the origin of transformation is 0 0! Also the content of landscape pages must be moved 276mm down!
Also if you have a mix of portrait and lanscape pages IE will zoom out the pages. We fix it by setting -ms-zoom to 1.665. If you'll set it to 1.6666 or something like this the right border of the page content may be cropped sometimes.
If you need IE8- or other old browsers support you can use -webkit-transform, -moz-transform, filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3). But for modern enough browsers it's not required.
You are good to go!!
I recently updated some pages to be more mobile friendly, but the problem is some of our users print off pages and they print using the medium breakpoint (tablet styles) rather than desktop styles. It does this in both portrait and landscape, and it happens in both firefox and chrome
I would like pages to print using the large breakpoint but I can't figure out how.
I even already have the following set:
#media print {
body {
min-width: 992px !important;
}
}
Desktop sample
Print sample
sample jsfiddle:
https://jsfiddle.net/jz56frqh/2/show
There are variables to change print sizing in bootstrap variables.scss:
$print-page-size: a3 !default;
$print-body-min-width: map-get($grid-breakpoints, "lg") !default;
If you want to do it manually in your CSS try this (change min-width to your desired size):
#media print {
body {
margin: 0;
padding: 0 !important;
min-width: 768px;
}
.container {
width: auto;
min-width: 750px;
}
}
scss ref: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss
I'm printing an HTML receipt via javascript:window.print()
Printing it to an Inkjet Printer makes everything all good. However on DOT-MATRIX Printer, Epson LX-300+II everything is different. It doesn't fit right, the texts are not aligned. I tried saving it to PDF and printing the PDF from Adobe Reader, the orientation seemed to be all good.
I already set the page size and tried resizing the fonts, but still I can't print it correctly. The Receipt's size, by the way, is 8.5 x 5.5in.
I tried formulating the CSS, but failed to get the correct result.
This is the CSS:
#media print {
html, body {
width: 8.5in;
height: 5.5in;
display: block;
font-family: "Calibri";
font-size: auto;
}
#page
{
size: 5.5in 8.5in;
}
}
Also whenever I tried adding #page { size: 8.5in 5.5in.; size: Portrait; } the printed paper is on landscape.
How can I set things right?
EDIT:
I tried
#page {
size: 5.5in 8.5in;
}
but it's printing the page on Landscape...
Solved the Problem!
In my Printer(LX-300-II), I defined a Paper Size which width is 8.5in and 5.5in in height. There is also a change in CSS Code:
#media print {
html, body {
display: block;
font-family: "Calibri";
margin: 0;
}
#page {
size: 21.59cm 13.97cm;
}
.logo {
width: 30%;
}
}
Since I have images in my Receipt, I made some width adjustments to fit it just right.
I hope this can help those people who is encountering this same problem.
You are using the size and height the wrong way around in #media print, try this:
#media print {
html, body {
width: 5.5in; /* was 8.5in */
height: 8.5in; /* was 5.5in */
display: block;
font-family: "Calibri";
/*font-size: auto; NOT A VALID PROPERTY */
}
#page {
size: 5.5in 8.5in /* . Random dot? */;
}
}
This Problem may come based on the Browser setup or Paper size setup. Check your browser font setting and paper size in printing properties.
EDIT : read further then the next 5 lines! My problem is not the logic of doing different css for mobile, tablet and desktop (#media query) - the problem is to change the IMAGE.SRC attribute FROM INSIDE CSS.
I'm trying to make a new fluid website and I'm trying to create 3 different header images:
Mobile header image (low res)
Tablet header image (medium res)
Desktop header image (high res)
(all the images also vary in aspect ratio)
How do I get this to work?
Currently I've tried to simply change the SRC in CSS for each CSS SECTION (mobile, tablet, desktop)
Like this:
#img_header {
src: url(img/header_m.png);
}
We all know that this doesn't work :D also I don't want to use background-image instead.
What is the proper way to do this?
Should I hack into the generated javascript code from Adobe Dreamweaver CS6 and change the .src from there ?
I'm sure there is a css way, so tell me guys. Thanks
UPDATE: I should have said that I already use media queries...
Here is my css:
/* Layout für Mobilgeräte: 480 px oder weniger. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 97.826%;
padding-left: 1.0869%;
padding-right: 1.0869%;
}
#div_header {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#img_header {
src: url(img/header_m.png);
}
/* Layout für Tablet-PCs: 481 bis 768 px. Erbt Stile vom: Layout für Mobilgeräte. */
#media only screen and (min-width: 481px) {
.gridContainer {
width: 93.451%;
padding-left: 0.7744%;
padding-right: 0.7744%;
}
#div_header {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#img_header {
src: url(img/header_t.png);
}
}
/* Desktoplayout: 769 bis maximal 1232 px. Erbt Stile von: den Layouts für Mobilgeräte und Tablet-PCs. */
#media only screen and (min-width: 769px) {
.gridContainer {
width: 89.1614%;
max-width: 1232px;
padding-left: 0.4192%;
padding-right: 0.4192%;
margin: auto;
}
#div_header {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#img_header {
src: url(img/header.png);
}
}
NOW that you have read everything, you should imagine that I can't change the img.src from inside css..., I think the only way to do so is to hack into the unformatted auto generated javascript from adobe DW cs6, isn't it ?
You can use CSS3 media queries for your desired results.....
And I think you should read this article it will help you :-
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
You can do different images by using media queries
Mobile
#media only screen and (min-width : 320px) and (max-width : 480px) {
Your image for mobile
}
Tablet
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px){
Your image for tablet
}
If you are using single image in diff resolution then you need not to do take 3 images. Take the bigger image (for desktop size) and write the below css
<header><img src="img/header_m.png" /></header>
CSS
header img{max-width:100%}
I believe you are aware of media queries http://css-tricks.com/css-media-queries/
To change foreground image
If you want to change foreground images for different devices then try z-index
.header{
background-color:red;
position:relative; height:auto}
img:first-child{
position:absolute; top:0; left:0;
z-index:-1; width:200px
}
img{
position:absolute; top:0; left:0;
z-index:10; width:200px
}
Change the z-index value for respective device width.
Demo here http://jsfiddle.net/5vpG7/70/
......................
Now used to media query css
#media screen and (min-width: 500px) and (max-width: 800px) {
// your css code here
}
more info about this
i've now set another div inside the div_header, and give that child div a background image and a hardcoded width and height ( matches the individual images ), so i've faked a tag that now have ability to define (backgound-) image source via css instead of defining attribute of image source ;)
thanks anyway for your answers