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.
Related
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)
I am making a website in Joomla.
And on my front page I have some images, which are links.
I want these images a's to get a slightly green effect, like opacity + green and stil have the original images below.
Is this possible to do with only css?
I can get the opacity to work, but not the green color.
Hope some one can help me.
Here is my site. it is the the small images under "Referencer" and "Nyheder"
This is doable with CSS. The main trick is that the links currently aren't surrounding the img block because their display type is inline.
Assuming the following HTML:
<img src="..." />
This is the CSS you need:
a.greenish {
background: green;
display: inline-block;
}
a.greenish img {
opacity: 0.5;
}
Adjust green and opacity to taste, obviously.
See this lovely jsfiddle for an example. Note that this includes addition CSS in case you only want it to turn green when hovered.
You won't be able to do what you want with pure CSS easily. There is no "overlay" in CSS. You can manipulate the background color/opacity, but the image would always be on top of that so it would not achieve the effect you want.
What you will need to do is to make the image the background of the A, then change the background do a similar image with the effect already applied. The images are small so you could easily make them sprites with the over look all in the same image. I did exactly this on the social icons at the top of my company website - http://www.bnrbranding.com/
I'm try to wrap text around a image and I'm using an img class on my style sheet to do it. It's loading the style sheet correctly and all the other style attributes are working correctly but the image. It works fine without codeigniter but for some reason if I add the class tag to the image in codeigniter the image does not show up.
code is below:
//CSS//
.imgWrap {
margin: 8;
float: left;
}
//html//
<img src="<?php echo base_url{'../images/image_1.jpg'); ?>"
alt ="landmark" class="imgWrap" />
Firstly, base_url(), not base_url{).
Secondly, margins (and most other things in CSS) need units. Pixels (px), points (pt), picas (pc), even inches (in) if you desire. Have a look at http://www.w3schools.com/cssref/css_units.asp
Thirdly, for a good image wrap, you will want it positioned absolutely (perhaps relatively, depending on what you're doing), give it a display: block; and possibly explicitly define the width and height.
I have quite large text (font size 28) I'm trying to align vertically in a fixed-height container.
I'm doing this by eye and just setting a margin-top so that it gets to the right spot. However, when in Firefox, I need a margin-top of 20px, in Safari I need like 15px (else it's too far down). I saw that the discrepancy was because in Safari the text element is taller than in Firefox and includes a slight amount of whitespace on top that doesn't show up in Firefox (in Firefox, the top of the text element is exactly when the text starts).
I've tried all kinda of display combinations with line-heights and perhaps adding a width/height for the text and whatnot. Nothing works.
What can I do to make this consistent? I'd hate to use JS but it seems like the only option...
For cross-browser CSS normalization I'd recommend a reset - YUI3 has a good one, Twitter Bootstrap is another good one. It basically sets paddings and margins to 0 so all browsers will behave and only adhere to YOUR css rules and not their own default rules.
For vertically aligning text to containers, if it's a single line of text, use the line-height property, and set it to equal the height of the container.
For example:
CSS:
div {
height:300px;
width: 400px;
line-height: 300px;
font-size:28px;
background-color:#F0F0F0;
}
HTML:
<div>
Some vertically centered text
</div>
Example: http://jsfiddle.net/Djvv7/
You need to apply a css reset. Good practice to use one on all projects. The most famous I know of is: http://meyerweb.com/eric/tools/css/reset/