For a "font-size: 1cm" css rule, Wkhtmltopdf for OSX renders a 1cm font size, whereas Linux build renders a ~ 0.77cm size.
Here is my HTML code :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
body {
font-size: 1cm;
line-height: 1cm;
font-family: sans-serif;
}
</style>
</head>
<body>
TEST ME 1<br />
TEST ME 2<br />
TEST ME 3<br />
TEST ME 4<br />
TEST ME 5<br />
TEST ME 6<br />
TEST ME 7<br />
TEST ME 8<br />
TEST ME 9<br />
TEST ME 10<br />
TEST ME 11<br />
TEST ME 12<br />
TEST ME 13<br />
TEST ME 14<br />
TEST ME 15<br />
TEST ME 16<br />
TEST ME 17<br />
TEST ME 18
</body>
</html>
Command :
wkhtmltopdf testPdf.html testPdf.pdf
Any idea?
Thanks!
I think this is related to #2463 issue. For linux version you can use that command wkhtmltopdf testPdf.html testPdf.pdf --zoom 1.28.
Found the answer here : http://blog.gluga.com/2012/05/wkhtmltopdf-font-and-sizing-issues.html
Meter/inch units doesn't seem to be consistent as wkhtmltopdf renders the html inside a Webkit rendering engine, which can be configurated with different screen resolutions.
So, the solution is to set fix CSS width and height to the page container.
In my case :
body {
font-size: 1cm;
line-height: 1cm;
font-family: sans-serif;
width: 1600px;
height: 1050px;
}
did the trick.
NOTE: In my case, in order to have a accurate dpi rendering on a A4 landscape orientation on OSX, I have to set low values (width: 1120px; with 1cm left and right margin): that led to a smaller rendering on Linux, which I fixed with --zoom 1.8 (I guess any high value works, it will only make it match full page's width, not more).
Related
I'm learning to develop a Firefox add-on. I've made a simple dev-tools tab with an input box. I'm finding that I can type every character into the input box with the exception of "/" or "'". A forward slash or single quote will not populate. Nothing appears in the input box when I type these characters.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body{
margin:0;
}
.warpath-search{
width:100%;
background-color:#fcfcfc;
border:1px solid #f0f1f2;
padding:.3em;
}
.warpath-search label{
width:100px;
display:inline-block;
}
.warpath-search input{
width:400px;
}
</style>
</head>
<body>
<div class="warpath-search">
<label>Xpath:</label><input type="text" name="warpath-xpath" id="warpath-xpath" />
</div>
<script src="devtools-panel.js"></script>
</body>
</html>
devtools-panel.js:
input = document.getElementById("warpath-xpath");
input.addEventListener("keyup", () => {
console.log(input.value);
});
Gif:
If I load the plugin's HTML file directly in the browser I can enter the characters but when it is loaded as a plugin it's blocked.
Using Firefox: 70.0.1 (64-bit)
The problem seems to have something to do with a Firefox type-ahead feature. The following steps resolved the issue for me:
Open about:config in the browser
Click "I accept the risk"
Search for "accessibility.typeaheadfind.manual"
Change the value of this key from "true" to "false"
I am trying to load the css and js files as well as the image in the img directory from mainStyle.css but without secuss. I can not load the js file and the obama.jpg from the css stylesheet.
I am facing a problem to explain why am I getting Hell World! Say apple! green? I have set them before green but now they have the red value, despite that I am getting them rendered in green!!.
index.xhtml
<!DOCTYPE html>
<html xmlns="htpp://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<title>External resources</title>
<h:outputStylesheet library="css" name="mainStlye.css" />
<h:outputScript library="js" name="mainJS.js" />
</h:head>
<h:body>
<h1>Using external resources</h1>
<div class="message">Hello World!</div>
<div class="message">Say apple!</div>
</h:body>
</html>
mainStyle.css
body{
background: url("#{resource['img/obama.jpg']}");
}
.message{
color:red;
}
mainJS.js
alert('Javascript works fine');
Just use the relative path of the image in the css.
Furthermore, you wrote background instead of background-image.
Have a look here:
Can I use EL for external CSS files with JSF?
In your case, would be:
body{
background-image: url(../img/obama.jpg);
}
Does anyone know the best way to anti-alias svg text that will work in Firefox?
I tried text-antialias:true but this has no effect, and also I tried using a stroke paint but this just thickens up the font and is not what I like.
Example:
<!DOCTYPE html>
<html>
<body>
<svg height="100" width="500">
<text y="50" x="250" text-anchor="middle" style="font-size: 40px" >Hello</text>
</svg>
</body>
</html>
I have uploaded this to http://jsfiddle.net/KJhrY/
This example appears antialiased in IE9 on my PC (Windows)
Firefox 25 will have support for the mox-osx-font-smoothing attribute!
So for firefox 25 you can use:
.yourclass{
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Firefox 25 will probably be released somewhere at the end of Oktober was released on 2013-10-29.
Nightly builds can be found at http://nightly.mozilla.org/
Try "text-rendering" attribute.
text-rendering = "optimizeLegibility"
I'm using wkhtmltopdf 0.10.0 rc2 for Mac
I have an html like this one :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="print.css" rel="stylesheet">
<style type="text/css" media="screen,print">
.break{
display: block;
clear: both;
page-break-after: always;
border :1px solid red
}
.page-breaker {
display: block;
page-break-after: always;
border :1px solid red
}
</style>
</head>
<body>
<div class="container break">
page 1
</div>
<div class="page-breaker"></div>
<div class="container">
page 2
</div>
</body>
</html>
I simply try :
wkhtmltopdf test.html test.pdf
But it didn't produce a page-break, I doing something wrong ?
Possibly unrelated as your pdf generated ok with an earlier version of wkhtmltopdf. Either way, I had similar issues with page breaks not being applied correctly. My problem was parent elements of the page-breaked element having an overflow other than visible.
This fixed my issue:
* {
overflow: visible !important;
}
Of course, you can be more specific about the tags this applies to ;)
try using as follows
<div style="page-break-before:always;">
//your content
</div>
this should work.
I am usinf wkhtmltopdf 0.12.3.2
For me page-break-after works when a border is set, and when the breaker div is an immediate child of body.
.page-breaker {
clear: both;
display: block;
border :1px solid transparent;
page-break-after: always;
}
break-break-before does not work.
--print-media-type not needed.
I am using version wkhtmltopdf 0.12.0
For me, page breaks ONLY work with --print-media-type.
Without it, page break protection for images works, but not page-break-after or before.
I had to make a special css file for print media to get it work.
Setting the paper size to 'A3' or using the 'overflow: visible' didn't make any difference.
Also see WKHTMLTOPDF with pdfkit on Rails ignoring table page breaks
It is working fine after remove media print
Before:
#media print {
.page-break { height:0;page-break-after: always; margin:0; border-top:none;}
}
above code not working in new version.
Now
.page-break { height:0;page-break-after: always; margin:0; border-top:none;}
Update the wkhtmltopdf to version 0.12.5. Page break issue not occuring for me after updating.
Use --disable-smart-shrinking to avoid empty white space ( If you have any)
Use --zoom <value> to avoid page page (If entire page not showing)
I try a simple css3 media queries that will change background color when I change the browser to 480px width. It works fine when i put the files on my site, here: http://www.kangtanto.com/css3/ . But when I try the same files on my other site, with https, the media queries just won't work, the background color won't change when I change my browser size to 480px width. it is on my other site at https://dosenjaga.eepis-its.edu/home.html
this is my html code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" media="only screen and (max-width:480px)" href="css3.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Ini hanya mencoba saja lho</h1>
</div>
<div id="content">
Adding the specific code for devices inline might be a good way to use media queries if
you only need to make a few changes, however if your stylesheet contains a lot of
overwriting or you want to completely separate the styles shown to desktop browsers and those used for small screen devices, then linking in a different stylesheet will enable you to keep the CSS separate.
</div>
</div>
</body>
</html>
and this is my style.css file. On my other site I use style2.css, because there is a file with the same name on my server, so I gave it other name but the code is the same.
div#wrapper { width: 800px;}
div#header{
background-image:url(media_queries.png);
height: 93px;
position:relative;
}
div#header h1{
font-size:140%;
}
#content{
float:none;
width:100%;
background-color:#CCC;
}
#navigation{
float:none;
width:auto;
}
and this is my css3.css code
#media only screen and (max-width:480px){
div#wrapper { width: 400px;}
div#header{
background-image:url(media_queries.png);
height: 93px;
position:relative;
}
div#header h1{
font-size:140%;
}
#content{
float:none;
width:100%;
background-color:#8787C1;
}
#navigation{
float:none;
width:auto;
}
}
Thanks,
It is the problem of older versions of IE not the https, CSS3 is not supported in less then IE9. in IE9 it is working fine.
It's solved!!! I need to delete all my browser history by pressing Shift+ctrl+del on my fire