I have an html page with simple css2 rules. All of the content is contained in a div, which is 930px wide. In the browser, this looks as expected, and when printing (from chrome) it fits neatly to the page with a decent font size.
Once I try to create a PDF from this file using weasyprint, the font look much bigger, and the document exceeds the page width.
HTML(string=html, base_url=server_base_url).write_pdf(target=target)
I'm not really sure how to debug the issue. Weasyprint does not seem to suppose print scaling, which is what I assume chrome is doing. Taking the document, rendering it, and then scaling it to fit on the page.
I tried using the zoom parameter of the write_pdf method .write_pdf(target=target, zoom=0.7), but it seems to zoom the page size AND the content size, so that is no help, really. I tried combining it with css to make the page bigger. So I zoom down with weasy and scale up with css
#page {
size: XXXin YYYin
}
This just ended up looking weird. So where do I go from here?
Have you tried using
#page {
size: Letter;
margin: 0in 0.44in 0.2in 0.44in;
}
You can adjust the margin as you like, but the Letter size should be the standard page size
page size
Related
I am using the following viewport meta in my html:
meta name="viewport" content="width=device-width, initial-scale=1
Which works perfectly for mobile devices. However, on the desktop version all assets, fonts and even the various elements are increased in size by 20%.
For example, see the image below. Even though the image is defined as being 300px by 300px in the devtools, if I take a screenshot and measure it in Photoshop it is in fact 360px by 360px.
The browser zoom is at 100%. What am I doing wrong?
/** EDIT **/
So, I found out that Windows sets the size of images and text to a default of 125%. That is why my website images and text were looking bigger. Now that I can see that is the case, how can I find a workaround so that even with the setting at 125% the images and text will display as intended? Is it even possible?
The problem is that a CSS px is not equal to a physical pixel. The definition is complicated, but in desktop browsers, the ratio between a CSS px and a physical pixel (A.K.A devicePixelRatio) is equal to the OS display scaling factor.
This is done in order to adapt to various screen resolutions and their distance to the observer. In my screen, the image in the codepen you sent is 600x600 physical pixels, because my screen is high PPI. I would have difficulty seeing text rendered with the default size in pixels.
If you really need to set the dimensions in physical pixels, you can just divide each dimension by `devicePixelRatio, but that creates accessibility concerns.
I worked it out in the end. In jQuery you can add the following to make your website display as intended:
$(document).ready(function(){
checkBrowserDpi();
}
function checkBrowserDpi(){
if(window.devicePixelRatio == 1.25 ) {
$("header, section, footer").removeClass("zoom100");
$("header, section, footer").addClass("zoom080");
} else {
$("header, section, footer").removeClass("zoom080");
$("header, section, footer").addClass("zoom100");
}
}
$(window).on('resize', function(){
checkBrowserDpi();
});
and then have two classes in your CSS file as follows:
.zoom100 { zoom: 100%; }
.zoom080 { zoom: 80%; }
In this particular case, it checks the device pixel ratio when the document is loaded and every time the window is resized and then sets the correct zoom to the header, section tags and footer for desktop browsers. You set the zoom to any tag you wish.
** EDIT **
As #D.Pardal points out this does create accessibility issues which I had not taken into consideration. That said, if you do want to mess with the devicePixelRatio then the method above works.
My site looks good from computer's browsers, I've tried all different browsers, they all look as I intended. But when I tried it from my Samsung Galaxy phone's Chrome browser, something is not right. There are alternating blue and white sections on my page, on the mobile phone's browser, the blue sections got cut off on the right side, left with white space [ it should be all the way to the right ], yet now it looks like this :
What should I do to make it look like from a computer's browser ?
You can view the source code of the page from your browser's "view source" function.
The site is at : https://gatecybertech.com
There area a number of ways to fix this.
Remove white space with CSS
To simply remove the white space you could add a
body {
background: #yourcolor;
}
Make image responsive
How ever I would suggest setting the width of your image with a size in vw. This will make your images responsive.
You could also do what the below answer says and use SVGs or media queries but I tested the using the size in vw and found it worked just fine
Application
This is how you can set your images width with vw
#yourimageid {
width: 2vw;
height: auto;
}
Hope this helped!
The problem is a few of your images.
e.g.
first the Ted Murphee image
then the gate frame .png image
What is happening is the rest of your content is resizing to a smaller screen, while the images stay the same size and create that "whitespace" to the right.
What can you do ?
use .svg images so they will resize depending on the screen size
add a #media query, and make the images resize when the browser size changes
I use a lot of absolute elements in my website design so that it will mold to whatever browser dimensions are being used, but there is a minimum size that I want to use. In other words, I want my website to become compact as the browser is being resized smaller but at a certain point I want the overflow:auto attribute to kick in and force the user to see the whole page using scrolling instead of compacting the page further.
Any ideas? I tried putting in an empty table with specific dimensions into an element with overflow:auto, but that didn't work. I am not a terribly experienced web-designer.
CSS
html, body {
min-width: 980px;
}
I'm designing a set of HTML pages to be printed, and I want elements of the pages to end up the same scale as each other. For example, there's a class of div whose width is defined as 200px wide appears on each of several pages. I want it to appear precisely the same size when each page is printed (suitable for, e.g., cutting out and superimposing).
I'm using a few things that work best in Chrome (mainly the CSS zoom rule to have smaller copies of elements elsewhere), so ideally I'd like to keep using Chrome. (This would be easier in Firefox, because it has an explicit scale ratio in the print dialog.) But it seems that on Chrome, keeping the same element a consistent size when printed from different pages is far from easy.
Chrome's PDF generation (which is what printing from Chrome does under the hood) appears to pick some section to define the page's width, and scale the rest of the page based on that. Or perhaps it tries to set the page size to fit an "optimal" number of elements on one page. If the outside framing elements of each page aren't the same size in all cases, then it seems like elements with screen size 200px can come out anything from 3-4 cm down to 1.5-2cm or maybe smaller.
Just using #page size doesn't help: I've got this CSS and it's not making any difference:
#media print {
# page size: 297mm 210mm
}
Does anyone have any thoughts for how to get things to print out with consistent sizes?
One extreme workaround I could apply is to make them all parts of one big HTML page, and use Javascript to mark certain parts as the only parts to be printed... I'm not even sure if that'd work, and it'd be rather cleaner to keen things on a few different pages. So are there any other ideas?
I found a solution. The key is to ensure that in each document, the "logical page" that Chrome splits elements into for printing is the same size. E.g. if one document has lots of 200x200px squares and Chrome decides to group them in a rectangle 5x4 to print landscape, then you need to make sure that Chrome will print every other consistent document split into elements of size 1000x800px.
For documents that are simply a number of spans or inline-block divs in sequence, it suffices to have a div set to exactly your chosen width (1100px), and ensure that that div occupies the full page width in print preview. Then just make sure your CSS contains something like:
#media print {
#page {
size: 297mm 210mm; /* landscape */
/* you can also specify margins here: */
margin: 25mm;
margin-right: 45mm; /* for compatibility with both A4 and Letter */
}
}
If this isn't sufficient, then putting everything inside one or more divs with fixed size (width: 1100px; height: 800px; overflow: hidden;) does the job, as a way to force Chrome to split into the pages you want (and therefore keep elements the same size when printed).
Allow different sizes, but control each size's margins and design!
When first answering I was using Chrome 32.0.1700.107 m
The W3 CSS3 standard established for page sizes works great with the "SAVE AS PDF" option directly from Chrome's plugin on the printing interface.
I have had years of trouble with different interfaces and go-around solutions for different proyects (for example: generating PDF's directly from server which was too heavy in processing and messy in code, or telling users to use windows printing interface, etc). This one is a great solution for me and seems to be definitive!
Here's a perfect example of the same page, with options for A4-size and Letter-size printing margins:
/* style sheet for "A4" printing */
#media print and (width: 21cm) and (height: 29.7cm) {
#page {
margin: 3cm;
}
}
/* style sheet for "letter" printing */
#media print and (width: 8.5in) and (height: 11in) {
#page {
margin: 1in;
}
}
You can replicate as many times as you wish using different paper sizes. Extra values (colors, hidden elements, etc.) would go outside #page.
In addition, if the paper size is A4 and protrait you can also use this
#page {
size: A4 landscape;
}
This operates in Chrome
your at-rules media queries are structured incorrectly. try:
#media print {
#page {
size:297mm 210mm;
}
}
that at least provides the correct syntax. as for the size property, it was dropped from css2.1 and browser support varies. you could always set width, margin, and/or padding
If you want to print to a pdf you could just use https://make.cm as they can handle the server load for you and clear up the complexity of getting stuff rendering correctly. I used it for a project and it was so much easier than having to deal with chromes print to PDF system
I just made a site for a bbq site and when you view the old75.com/home/contact/ page on a iphone, you will see that the content appears normal as the footer is in a more larger font. But the font size of the footer is the same as the content. Can anyone see why this could be? I have this problem on some other sites as well.
Try explicitly setting a font-size on your body. When I'm coding up a template, I always set the default font-size I want on the body and then override as needed.
body {
font-size: 1em;
}
This way I know that the browser isn't defaulting anything to what it thinks the font size should be. It also means that if you want to quickly boost/shrink the font-size later, you only have to change it in one spot.