I need to create PDF’s based on designs from Sketch.com, where dimensions like font sizes and positions are given in pixels, and it seems to be using the standard resolution of 72dpi (A4 being 595×842).
It seems that WeasyPrint uses 96dpi for sizes given in pixels, when generating PDF’s.
The command-line API documentation indicates that there is a resolution parameter, but it only applies for PNG (and appears to be deprecated).
I see there is also a zoom parameter in the python API but it does not seem to be available in command-line, and anyway that would break dimensions given in physical units like cm and also my target page size, A4.
So how do I set the resolution to 72dpi? Or should I convert all units instead, applying a 4/3 factor on them?
I found a workaround inspired by the 62.5% font-size CSS trick – make 1rem in WeasyPrint = 1px in Sketch:
html {
/*
Make 1px on Sketch = 1rem in pdf
Normally we should set font-size: 1px, but we multiply by 4/3
as we are in 96dpi instead of the 72dpi from Sketch.
*/
font-size: 1.3333px;
}
body {
/* restore a decent default font-size */
font-size: 10rem;
}
After that I can use rem everywhere I would normally use px.
For people who prefer to keep the more usual 1rem = 10px, just multiply the html font-size by 10 above, or use font-size = 83.333% (i.e. 62.5% * 4/3).
Related
I want my grid to have 24 columns within a row of 1320px. I also want to have my default (body) font size set to 22px. Let me show you how I can do this easily with SASS/SCSS and Zurb Foundation... Wait, what?
Not easy. It's basically not possible to set the 'default' font-size to a different value other than rem-base without breaking the grid. If $rem-base: 16px and $base-font-size: 100% everything works fine – I just want bigger fonts. If $rem-base: 16px and $base-font-size: 22px the grid is calculated to have 1815px instead of 1320px. Sure, because setting html font size sets the rem unit and everything other font-size refers to rem.
Changing lines 345, 346 at _global.scss (V 5.2.1) and setting them to different vars like this
html { font-size: $rem-base; }
body { font-size: $base-font-size; }
doesn't affect font sizes for p, ul, etc.
So the question persists: how do I get a 1320/24 grid with 22px base size using Foundation5 SCSS?
Cheers
According to the _settings.scss file 'If you want your base font-size to be different and not have it affect the grid breakpoints, set $rem-base to $base-font-size and make sure $base-font-size is a px value.'
So that's what I've done and the font size increases, but the grid stays the same (although you will need to move the $rem-base so it's AFTER the $base-font-size.)
So it goes from:
// This is the default html and body font-size for the base rem value.
$rem-base: 16px;
$base-font-size: 100%;
To:
// This is the default html and body font-size for the base rem value.
$base-font-size: 22px;
$rem-base: $base-font-size;
It's not something I've done before but hopefully it helps you!
If you need to change the $base-font-size while keeping the grid stuff as it is, you have to set $base-font-sizeand $rem-base to the same value. There is no need to change the lines in the standard foundation _settings.scss.
E.g.
// This is the default html and body font-size for the base rem value.
$rem-base: 14px;
// Allows the use of rem-calc() or lower-bound() in your settings
#import 'foundation/functions';
// The default font-size is set to 100% of the browser style sheet (usually 16px)
// for compatibility with browser-based text zoom or user-set defaults.
// Since the typical default browser font-size is 16px, that makes the calculation for grid size.
// If you want your base font-size to be different and not have it affect the grid breakpoints,
// set $rem-base to $base-font-size and make sure $base-font-size is a px value.
$base-font-size: $rem-base;
I have an MVC 4 View where I am displaying a table of data. This table is rendered inside a <div> tag. What I would like to do is to display a background image that the div contents sit on top of. The image should comprise most, or all, of the div and be somewhat faint and subtle. In other words, it shouldn't stand out. It should almost look like a watermark. I don't have a lot of experience with MVC and HTML/CSS and am not sure how to do this.
I'm not sure what sort of image I should use (PNG, JPG?), or if it even matters and how to make it transparent enough to make it look subtle etc. I'm assuming CSS can handle much of this for me, just not sure where to start.
Oh it's easy. Give the div a class, eg:
<div class="table-wrapper">
At the end of the css file being used on your page, if their is one, write css like this:
.table-wrapper{
background-image: url(/path/to/image);
/* if the image repeats nicely, tile it, using background-repeat */
background-repeat: repeat; /* repeat-x, repeat-y and no-repeat are options */
/* alternatively, you could stretch it to fit the div, using background-size */
background-size: 100% 100%;
}
You shouldn't see much difference in size between a png or a jpg, as long as you don't use transparency. .pngs with transparency can get make a file big very quickly.
I suggest picking an image that matches the colour of the surrounding area quite closely. This way you can give the impression of a low-contrast or translucent image, without the file-size cost.
I did give a search before I started to ask this question as it is a very simple question. I have an image and I would like to have it as the only element on our webpage. There is no other content as this image conveys what we want to convey. Now we would also like to resize itself depending upon the device it is being displayed. I hope this is achievable through HTML though I would like to know if there is any other options.
Thank you,
Karsnen
What you're looking for is the background-size property. By applying background-size:cover to your <body>, the image will resize itself accordingly regardless of viewport dimensions.
Note: Your image may clip with the use of cover.
An alternative value for background-size can also be contain. If you apply background-size:contain instead, it'll still resize the image accordingly just as the former would.
Note: While this approach promises to never clip the image, it'll also show negative/dead space as well (which sometimes isn't ideal).
Your CSS should reflect the following:
body {
background-image: url('bg.jpg');
background-position: center center;
background-size: cover; /* or background-size: contain */
}
You can use an image as a web resource (“page”). You could simply link to it using something like href="test.jpg", or you could announce its URL directly. Browsers will display it somehow, possibly scaling it to fit browser window width.
The next simpler, and better, approach is to use a page with just an img element as its content. It can be made to scale to browser window width by setting its width to 100% (in HTML or in CSS). This way, it will keep its width:height proportion when scaled. The quality of scaling in browsers varies but is generally good, unless you scale upwards a lot. In this approach, the inherent width of the image should be sufficiently large (say 2,000 pixels) to avoid considerable upwards scaling.
To remove default spacing around the image (default page margins), it’s simplest to use CSS.
Example (with “...” to be replaced by useful information):
<!doctype html>
<meta charset=utf-8>
<title>...</title>
<style>
html, body { margin: 0; padding: 0; }
</style>
<img src="demo.jpg" alt="..." width="100%">
Set it as a background-image and use the appropriate background-size (e.g. contain):
html {
height: 100%;
}
body {
background: url('to/your/image.png') no-repeat;
background-size: contain;
}
Here's a demo.
I use this:
css
#body{
background:url(../img/bg.jpg);
margin: 0;
}
javascript
$("#body").css('width',window.innerWidth)
$("#body").css('height',window.innerHeight)
MediaWiki pictures can be set to a certain size with simple formatting.
However, tables will resize on the fly depending on the browser / screen size.
Can images be made to resize like tables?
(Images inside tables does not work!)
I had the same question and saw from the answers above (now they are below) that you cannot have several pics with different relative sizes. So I wrote a mediawiki extension allowing this: http://mediawiki.org/wiki/Extension:AdaptiveThumb
Dynamic resizing as the browser is resized:
Put the next line at the begining of the css file: .\skins\common\shared.css
img { max-width: 100%; height: auto; width: auto\9; /* ie8 */ }
Each resizable image will be placed inside a <div></div>
<div>[[Image:MyImage.png]]</div>
Read more here: http://www.mediawiki.org/wiki/Help_talk:Images
You could set up a CSS hack.
Mediawiki allows you to include some variables like alt-text, including in that variable a special string such as w100 or resizeable will allow you to target the element with CSS:
img[alt=~w100] { width: 100% !important; height: auto !important; }
Do note that since you are using alt for things it's not meant to be used and !important in the CSS (because MW sets the size as an element style), this is to be avoided as much as possible and meant to be used as last resort.
In short, no, there is no easy way to do this. It could conceivably be done with a bunch of fiddly Javascript, but I'm not aware of anybody having tried this and the implementation would not be trivial.
The short answer is no. The long answer is that you would have to write JavaScript that can determine the user's screen resolution and store it in a cookie.. This would have to be done most likely in common.js so that with the exception of the one in a billion user that has never been to the site and manages to navigate directly to the page with the dynamically sized image (I hope you're not going to put something like that on your main page), that information will already be there when they get to the page. The page could then use those variables to set the size to be {{#expr:(File height * % of screen you want it to take)*(screen height)}}x{{#expr:(File width * % of screen you want it to take)*(screen width)}}px. The host of my wiki says he is in the process of writing a new extension that may be able to do that as part of a request for a <div style="overflow-x: scroll; width: {{#expr:(File width * % of screen you want it to take)*(screen width)}}px;"> section I want to make. If you find something else before me, please update this post so I can see it. Thanks. :D
I generated a PDF file using wkhtmltopdf from a html page. The html page uses tables which have 1 pixel borders. If I open the PDF with Acrobat or Foxit they randomly miss to draw vertical borders, but they appear if I zoom in. So I guess it's some kind of rounding error, because the lines are too thin?
If I print the PDF it looks good.
And I just realized, it only happens if I set a background-color.
How can I fix this?
Here's a sample PDF. The border separating the characters "a" and "b" disappears depending on the zoom factor. I generated this file like this:
echo "
<html><body>
<span style="border: 1px solid black; background-color:red;">a</span>
<span style="background-color:red">b</span>
</body></html>"
| wkhtmltopdf.exe - test.pdf
Your line is not missing, it is just too small to render on the screen.
This is because PDFs are rendered according to their page size, not according to how large the features on the page are. Everything on the page is scaled up or down to make it fit into the PDF page, and so your line is being scaled down and thus disappearing: 1 / 3 = 0.333 = no line.
To fix this you have the following options:
Reduce the page size on wkhtml2pdf using: --page-size A4
Reduce the width & height of the page exactly using: --page-width 9in --page-height 6in
Make your line thicker.
Option 3 is probably preferable in this case. It's not a very elegant fix, but you don't have many options to play with. If you were writing the PDF on low-level then things could be done, but since you're using wkhtml2pdf then you are limited to what it allows you to set.
I had similar problem with borders of a table. What helped me was use of pt instead of px in my css.
See W3C:
But in general you would use a different set of units for display on screen than for printing on paper.
I'm assuming that you want thin line, or else you wouldn't have set the width to 1px.
The key to having thin, hairline borders displayed in PDFs made with wkhtmltopdf is to use SVG backgrounds like so:
.hairline-border {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><rect x='0' y='0' width='100%' height='100%' stroke='black' fill='white' stroke-opacity='1' /></svg>");
}
For a hairline separator (think <hr>), I use:
.hairline {
height: 0.5mm;
width: 100%;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%'><line x1='0mm' y1='0mm' x2='300mm' y2='0mm' style='stroke:black; stroke-width:0.25mm;' /></svg>");
}
and I use them like so:
<div class="hairline-border"></div>
And it's rendered correctly in Firefox and Safari/Chrome, and wkhtmltopdf at least keeps the line width as it is.
There's been some discussion that a base64 transform of the SVG would warrant greater compatibility on IE. Frankly, I couldn't care less if IE is happy or not but see Inline SVG in CSS, if you must.