All fonts on page are smaller due to Wkhtmltopdf - html

Wkhtmltopdf is shrinking all of the fonts from my HTML document, causing the entire document to appear smaller once converted to PDF.
What I've Tried:
--disable-smart-shrinking: This makes the fonts appear more normal, but cuts off the right side of the page.
I have tried adjusting the margins as well along with disabling smart shrinking, but it does not seem to bring back the cut off parts of the page.
Are there any other commands likely to make the fonts appear normal sized?

Related

IE11 font rendering ignoring margins on container blocks

I am currently modifying a site for IE11 compatibility and there is a major bug being caused by the CSS font-faces loading.
I am skinning on top of a theme, and am overriding the original theme's font-family for the body of the site. However, what is happening is the site loads with a default font family, the theme's font family is loaded and finally my skin's font family is applied.
What seems to be happening is that on load, the margins for the unstyled text are being set, then as the additional font styles are loaded, the margins remain the same, resulting in overlapping blocks. The blocks correct themselves when moused over, but this is far from ideal.
See the links below as an example:
http://i.imgur.com/N8V5hfA.jpg
After the page has loaded, divs overlap.
http://i.imgur.com/imRgjji.jpg
Once the element has been moused-over (This is the way the content should display on load).
Is there a way to make IE11 position divs properly depending on the size of the content?

How to Dim Chrome loading screen between page loads (to black out white flash)?

As a dimming/darkening work around to the notorious white flash in between Chrome page loads, how could the small default loading notification (below) be exploited to cover the entire screen?
In other words, is it possible to create an entire wall of text in between page loads such that a high contrast extension could then darken the entire screen just as it darkens a small portion here?:
This is quite hacky, but for good reason. All other solutions no longer work for Chrome 40+:
https://superuser.com/questions/580228/prevent-white-screen-before-loading-page-in-chromium
Google Chrome - Override White Blank page between webpage loads
https://superuser.com/questions/831742/how-do-you-change-chromes-background-color
No, it's not possible to change what that status bar shows, not without digging into Chromium's source (but then you could just change how about:blank looks).
The idea is indeed way too hacky.

What needs to be configured so that the texts don't wrap?

I'm building a website using WordPress. Although the pages are well suited for Mobile site, this particular page is displayed very congested. This is the page from the website website - http://www.cyberfosters.com/anspress/
If you click F12 using Chrome browser on this page and toggle the "Device Mode" you'll see how it appears on a mobile device, I'm going through the CSS files to find out what needs to be changed but I can't seem to find out.
What I want is that the page should appear on a mobile as it does on the website but just scaled down.
I was looking at your html and css and the problem seems to be very simple, your site is not build to small deviced because it uses a mix of width values in PX and %, the design must be set in % to work well on multiple devices without using special pages for mobiles and other for pc this is my recomendation.
Example if you put a 1090px image on a 800px screen resolution it will just not work so what we do is to set image width value to 100% in this case and so on that way the images get auto resized the easy way. Do the same with tables images divs spans etc

Some website images not displaying properly on iPhone

I've developed a responsive website, and just when I thought it was perfect and ready to launch, I found out that the images on the homepage are not displaying properly on iPhones (I developed the site while testing on an Android, so I was none the wiser about iPhone oddities until now). The images should be fitting into the width of the screen (I've set max-width: 100%; on them), but instead they are stretched and pixelated way beyond their actual resolution.
Curiously, images on any other page of the site display just fine. I thought the issue was rooted in the fact that the images on the homepage are actually set via a CSS background property, while images everywhere else are set in <img> tags in the HTML. So I commented out the "background" declarations in the CSS file and instead used <img> tags on the homepage, just like everywhere else. When I did that to the very first image, it displayed great. However, as soon as I switched the rest of the images to HTML, they all reverted back to the ugly that was present before.
My boss (who has access to an iPhone) sent me this video (apologies for it being out of focus, but you get the idea): https://www.youtube.com/watch?v=_vFJVZiBc3Q
The first four images he scrolls past ought to all fit above the fold, and you're only seeing the left ~1/10th of the actual image, that's how far it's stretched out.
I'm out of ideas here. Is there anything special I need to do for iPhones? With the <img> tag, these photos should be in the same format that the rest of the working images are in.
Thanks so much in advance!
As it turns out, it was a me-specific issue. Apologies for being vague above, I really had no idea what I should have been looking for when it came to iPhones. The images in question were contained in <div>s in which I specified a height in vh units. As a future reference for anyone reading this, you apparently shouldn't do that. Changing height to a percent unit fixed the issue, and it displays great on both Android and iPhone!

Serving identical double-sized images to retina display computers AND non-retina computers?

On my website, I have a 1300x200 image that I am forcing down to 650x100 using the simple width=650px parameter in the img tag. What happens when a retina Mac/iPhone/iPad user views my site. Will they see the full quality 1300x200 image, or will the quality artificially be reduced by half?
As far as whether or not this is efficient, it's just a 50k PNG. My site is otherwise mostly vectored with text/CSS. You could argue this is more efficient than messing with browser-agent detecting Javascript.
Ok folks, I went about answering it myself, and yes, if you use the width tag to half-size an img in HTML, the retina browser will display the full sized image.
I displayed the 1300x200 image half-sized using width on the top, and the plain 650x100 image on the bottom. Zoomed in using Safari on iOS 6.