I have a problem converting an HTML file to pdf, when trying to add a footer, the size rendered as PDF is not the one specified in the css.
The size of the footer must be exactly 155mm, but if I tell wkhtml2pdf to have a bottom border of 155mm, the footer starts almost at half of the page.
I have tried with a simpler html page of 50mm with 5 stripes of 10mm each, and with the switch -B 50mm I have a margin below the actual footer of 50mm
The command that I am running is: wkhtmltopdf.exe -B 150mm -L 0 -R 0 -T 0 --footer-html footer.html page.html page.pdf
To have the footer placed correctly, I have to use -B 119mm
Can someone help me or point me to the right direction ? I read many posts about that but could not solve my problem, it seems that windows installation act differently from Linux one, but I will only install it on windows host, so no problem about a windows-only solution
page.html
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Header</title>
<link rel="stylesheet" href="css/normalize.css?v=1.0">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
coucou
</body>
</html>
footer.html
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Footer</title>
<link rel="stylesheet" href="css/normalize.css?v=1.0" media="all">
<link rel="stylesheet" href="css/footer.css?v=1.0" media="all">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="bvr">
<div class="bvr-cut">
<div class="payment-recipient">
blahblah
</div>
<div class="payment-account">01-88205-8</div>
<div class="payment-amount">
<span class="val">3</span>
<span class="val">2 5</span>
</div>
<div class="payment-sender">
blahblah
</div>
</div>
<div class="bvr-cut">
<div class="payment-recipient">
blahblah
</div>
<div class="payment-account">01-88205-8</div>
<div class="payment-amount">
<span class="val">3</span>
<span class="val">2 5</span>
</div>
<div class="payment-sender">
blahblah
</div>
</div>
<div class="bvr-code">
<div class="col c12">
blahblah
</div>
</div>
</div>
</body>
</html>
footer.css
#charset "UTF-8";
#bvr {
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
background: #FC0;
font-family: "Helvetica-Neue", Helvetica, sans-serif;
height:155mm;
page-break-after: auto;
display: block;
clear: both;
border: 1px solid #000;
}
.bvr-cut {
float:left;
width: 230px;
background: #ccc;
}
.payment-recipient {
height: 72px;
position: relative;
background: #0cf;
}
.payment-account {
text-align: right;
font-weight: 600;
padding-right: 4.5em;
margin-bottom: .6em;
background: #12F;
}
.payment-amount {
background: #FCC;
text-align: right;
margin-bottom: .8em;
}
.payment-amount > span.val {
border: 1px solid #000;
padding-right: 2em;
}
.payment-sender {
position: relative;
background: #f0c;
}
.bvr-ref {
display: block;
background: #FF0;
}
.bvr-code {
background: #c0f;
}
After searching, I found out that the problem didn't come from wkhtmltopdf but to a processed size issue in windows systems.
If I run that code on unix based systems everything works great, but on windows it doesn't. In fact, font size (and any other size: height, width, etc.) in windows must be scaled with a 1.33 ratio in order to render exactly the same as it does in unix.
I couldn't find a link in english, but here a little explaination which worked great for me (search "1.33") in the webpage.
Basically, I created two classes in my css:
html: { font-size: 93.1%; }
body: { height: 88mm; }
/*–––––––––––––––––––––––– system hacks –––––––––––––––––––––––– */
/**
* Unix* system based servers render font much
* bigger than windows based server.
* Force windows font to 100% and rescale the
* linux rendering by the magic factor (1.33)
*/
.linux {
font-size: 70%;
}
/**
* base size: 88mm
*
* for wkhtmltopdf generation,
* body size must be multiplied by 1.33 factor on windows systems
*/
.win body {
height: 117.04mm;
}
And with a bit of php, I've added dynamically the class to the <html> tag based on server system.
Related
I have two nearly identical web pages. In fact, I copied the code for the first and saved it as the 2nd before just modifying some of the elements in the 2nd. The styles in the style tag were left exactly the same. They are displaying different font-sizes, and I haven't the foggiest idea why.
Without getting off on tangents about what I should be doing (e.g. using a stylesheet) or nitpicking my code (unless it actually answers the question), can someone please explain why I'm getting two different styles using identical style tags?
P.S. - I know I can fiddle and get them both to have the same style, but it drives me crazy not knowing why this is happening. Believe me, I would have already had them looking the same by now if it weren't for my obsessive desire to understand things I don't understand.
P.S.S. - Adding a meta tag for the viewport, as suggested in an answer to this question, did not work for me.
---DETAILS---
options.php, the desired style, looks like this in mobile Chrome on an LG phone...the screenshots below are from Opera (Chrome) DevTools with device toolbar toggled on with Galaxy S5 being emulated. (These screenshots are exactly what I am seeing on my real device, the LG phone):
admin.php, has noticeably smaller font-sizes. It's hard to see in these screenshots, but the img at the top stays exactly the same size. Also, notice that both screenshots are the same width:
Code for options.php (php renders it):
$admin_str = "<div class=\"a-div\">Admin Options</div>";
$body = "
<div id=\"hero-img\">
<img src=\"imgs/logo.png\">
</div>
<h1>Hi $esc_fName!</h1>
<h2 id=\"subheading\">What would you like to do next?</h2>
<div class=\"a-div\">Record------</div>
<div class=\"a-div\">Manage -----</div>
<div class=\"a-div\">Manage my account information</div>
<div class=\"a-div\">Add a ----</div>
$admin_str
<div class=\"a-div\">Log out</div>
";
echo <<<_END
<!DOCTYPE html>
<html lang="en">
<head>
<title>------- Options</title>
<meta charset='UTF-8'>
<style>
body {
font-family: sans-serif;
font-size: 100%;
}
#main-content {
width: 75%;
margin: 40px auto;
}
#hero-img {
width: 50%;
margin: 50px auto;
}
#subheading {
margin-bottom: 50px;
}
.a-div {
display: block;
margin-top: 20px;
}
a {
font-size: 21pt;
color: #000055;
text-decoration: none;
}
a:hover {
color: blue;
}
a:active {
background-color: #333333;
color: #E70B81;
}
</style>
</head>
<body>
<div id="main-content">
$body
</div>
</body>
</html>
_END;
Code for admin.php (php also renders it):
$body = "
<div id=\"hero-img\">
<img src=\"imgs/dtlogo.png\">
</div>
<h1>Hi $esc_fName!</h1>
<h2 id=\"subheading\">Administrative Options</h2>
<div class=\"a-div\">Add a new approved email</div>
<div class=\"a-div\">Back to main options</div>
<div class=\"a-div\">Log out</div>
";
echo <<<_END
<!DOCTYPE html>
<html lang="en">
<head>
<title>Administrative Options</title>
<meta charset='UTF-8'>
<style>
body {
font-family: sans-serif;
font-size: 100%;
}
#main-content {
width: 75%;
margin: 40px auto;
}
#hero-img {
width: 50%;
margin: 50px auto;
}
#subheading {
margin-bottom: 50px;
}
.a-div {
display: block;
margin-top: 20px;
}
a {
font-size: 21pt;
color: #000055;
text-decoration: none;
}
a:hover {
color: blue;
}
a:active {
background-color: #333333;
color: #E70B81;
}
</style>
</head>
<body>
<div id="main-content">
$body
</div>
</body>
</html>
_END;
UPDATE --Per the request by Donkey Shame, here are the computed font-sizes:
_______________________________
|______| 1st pg. | 2nd pg. |
|______|___________|___________|
| h1 | 40.133px | 32px |
|______|___________|___________|
| h2 | 36.133px | 24px |
|______|___________|___________|
| a | 38.133px | 28px |
|______|___________|___________|
UPDATE #2 --As Dejan suggested, I tried viewing the two sites in desktop mode, and they are the same even when they are not the same when viewed on mobile.
UPDATE #3 --After some tinkering, I got the two pages to have the same style when viewed on mobile. Of course, I never doubted I'd do that, and it still doesn't answer my original question regarding the original code, but it actually might have helped me to narrow it down to a very specific culprit. Here's what I did. I removed the font-size altogether from body. Then I changed the h1 and h2 both to divs. I edited the style tag to reflect those new divs. Then I set font-size: 5vw for the #heading div (the old h1). I set font-size: 3.022727vw (more on that 3.022727 later) for the #subheading div (the old h2). I set font-size: 3.5vw for the a elements. Here's where it gets strange again: If I change the 3.022727vw to 3.022726vw in both style tags, the 1st page has virtually no change (which is what should be expected), but the 2nd page does this (note how the #subheading changes the font-size of the a tags also):
admin.php - #subheading { font-size: 3.022727vw; }
admin.php - #subheading { font-size: 3.022726vw; }
It seems like a user-agent scaling issue. The solution to avoid such problems is to add viewport meta tag inside the <head> section (is it necessary?):
<meta name="viewport" content="width=device-width, initial-scale=1">
Without viewport tag:
Both pages with viewport tag:
I believe the issue is in applying body font-size as 100%. There're two ways of solving the issue: replace font-size: 100%; with font-size: 1rem; or with font-size: 16px; Bootstrap for example uses font-size: 1rem;.
If it doesn't help open Devtools of your browser, open a page with smaller font-size and inspect font sizes of and texts. It might be overwritten by some additional styles.
<style>
body {
font-family: sans-serif;
font-size: 1rem;
}
i've had email working within laravel for a few months now, but decided it's probably time to move them into a queue rather than slowing down users' page loads.
However, as soon as i switch to the database queue driver i get the following error:
local.ERROR: exception
'Symfony\Component\Debug\Exception\FatalErrorException' with message
'Method Swift_Message::__toString() must not throw an exception' in
/Applications/MAMP/htdocs/tp/vendor/laravel/framework/src/Illuminate/Mail/Transport/MailgunTransport.php:0
If i switch back to sync driver, everything works again.
Could this be something to do with permissions, or different users running different jobs?
For reference the queuing is:
Mail::queue('emails.new_team', [], function($message) use ($team)
{
$message->to('hiden#hidden.co', 'hiden');
$message->from('hiden#hiden.co', 'hiden');
$message->subject($team->name.' - Team Just Created!');
});
With new_team email containing (admin is one of my routes):
#extends('emails.baseemail')
#section('content')
<h2 style="margin-bottom: 20px; font-weight: 900; font-size: 25px;">Theres a new team!!</h2>
<div style="margin: 20px 0;">
Go to Admin
</div>
#stop
And Base email containing:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
#yield('specificMETA')
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<link rel="shortcut icon" type="image/x-icon" href="/img/favicon.ico">
</head>
<body style="font-family: 'Dosis', sans-serif; font-weight: 300; color: #666; background: #FDFDFD; margin: 0;" bgcolor="#FDFDFD">
<style type="text/css">
.button:hover {
background: #7f8c8d;
}
.cta:hover {
background: #2980b9;
}
</style>
<div id="header" style="position: inherit; z-index: 73411; font-size: 30px; line-height: 70px; color: #ecf0f1; width: 100%; height: 70px; background: #27ae60;">
<div class="centre_col" style="width: 1024px; margin: 0 auto;">
<div id="header_left" class="l" style="float: left;">
<img alt="tp" src="{{$message->embed(asset('img/tp.jpg'))}}">
</div>
</div>
</div>
<div id="content" style="margin-top: 20px;">
<div class="centre_col" style="width: 1024px; margin: 0 auto;">#yield('content')</div>
</div>
</body>
</html>
It turns out the problem was using asset() within the img tag in the base email.
so <img alt="tp" src="{{$message->embed(asset('img/tp.jpg'))}}">
becomes <img alt="tp" src="{{$message->embed('http://tp.co/img/tp.jpg')}}">
So far i've just had to hard code the path to the image.
Note that it has to be the full path, so i've chosen my live server's path.
This isn't ideal, so if anyone knows how to do relative paths within queued emails, please let me know and i'll accept that answer.
I'm currently working on a homepage using the Laravel PHP Framework and I'm running into CSS issues. I'm trying to accomplish a simple task of having two things in my 'header' tag,
1) An image of a logo on the left
2) A container to the right of the logo displaying a user's information
The logo is positioned fine on the left but when I try to position the container to the right of it, it is being positioned underneath the logo instead. I know my CSS is good unless I'm overlooking something entirely but I have a feeling that the Larevel Blade Templating is having an effect in how 'div' elements are being handled.
CSS(style.css):
body {
background:linear-gradient(#3C5D79, #2E4253) no-repeat;
color:white;
}
.container {
width:100%;
}
.header_container {
width:960px;
}
.main_logo_container {
width:313px;
margin:0 170px;
position:relative;
}
.admin_container {
display:inline-block;
float:left;
width:600px;
margin:5px 5px;
position:relative;
}
#extends ('layouts.default')
Admin View after user logs in (admin_index.blade.php):
#section('content')
<header>
<div class="header_container">
<div class="main_logo_container">
<img src="../images/logo.png" width="300" height="97" alt="Company Logo" />
<div class="admin_container">
<b> You have reach the admin page!</b>
</div>
</div>
</div>
</header>
#stop
layouts.default.blade.php(Main Blade Template):
<!doctype html>
<html>
<head>
<meta charset ="utf-8">
<link rel="stylesheet" href=" <?php echo asset('css/style.css')?>" type="text/css">
<style>.flash { padding: 1em; border: 1px dotted black; } </style>
</head>
<body>
#if (Session::get('flash_message'))
<div class="flash">
{{ Session::get('flash_message') }}
</div>
#endif
<div class="container">
#yield('content')
</div>
</body>
</html>
Any help is greatly appreciated since I'm trying to become more familiar with Laravel PHP.
Your logo container was too small because according to your DOM it also carries your text which is 600px wide for a 313px wide container hence the split on two separate lines.
I suggest you change your CSS to fix this and also remove the float: left directive. The display: inline-block here will be more efficient.
Therefore you will get this following CSS:
body {
background:linear-gradient(#3C5D79, #2E4253) no-repeat;
color:white;
}
.header_container {
width:960px;
}
.main_logo_container {
width: 100%;
}
.main_logo_container img {
display: inline-block;
}
.admin_container {
display: inline-block;
margin-left: 5px;
position:relative;
top: -40px;
}
And here is a demo to show you the working result:
http://jsfiddle.net/w7wqaw9L/
I am create pdf file using dompdf but float property not working. I changed DOMPDF_ENABLE_CSS_FLOAT to true. It works fine in normal php but its not working in laravel 4.
Here is my code.
<!doctype html>
<html lang="en">
<head>
<style type="text/css">
.left {
float: left;
outline: 1px solid green;
width: 6cm;
}
.right {
float: left;
outline: 1px solid blue;
width: 6cm;
}
</style>
</head>
<body>
<div class="left" style="float:left;">left boxes here</div>
<div class="right" style="float:right;">right boxes here</div>
</body>
</html>
Thank you.
use def("DOMPDF_ENABLE_CSS_FLOAT", true); into the dompdf_config.inc.php file
and use the css float into your pdf design, it works
I have this index.php file
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css">
</style>
</head>
<body>
<div id="container">
<?php include('includes/header.php');?>
<?php include('includes/sidebar.php');?>
<?php include('includes/content.php');?>
<?php include('includes/footer.php');?>
</body>
</html>
and these including files.
header.php
<div id="header">
<img src="banner.jpg">
</div>
sidebar.php
<div id="sidebar">
Home<br />
Study<br />
Calendar<br />
Diary
</div>
footer.php
<div id="footer">
<p>haha</p>
</div>
and I have this css file.
#container{
margin:0px 0px 0px 0px;
width:1024px;
border:3px;
}
#header{
margin-left:50px;
border:3px;
}
#sidebar{
margin-left:30px;
float:left;
width:300px;
height:900px;
border:3px;
}
#sidebar a:link{
color : #ff6c00;
text-decoration : none;
}
#sidebar a:visited{
color : #ff6c00;
text-decoration : none;
}
#sidebar a:hover{
color : #00991d;
text-decoration : underline;
}
#content{
margin-left:30px;
float:left;
width:724px;
height:900px;
border:3px;
}
#footer{
border:3px;
text-align:center;
clear:both;
width:1024px;
}
The setting about the link on the sidebar is working properly. However, I change some margin and border so that I can check whether it's working or not, and it's not working. I refreshed the site and nothing new show up.
Could you help me figure out why this is happening?
First of all, you should try out changes in css, with some sort of development tools, and not with refresh (for obvious cache problems, and because you try out the setting before you commit them).
Examples for such tools are the chrome development tools for Chrome or Firebug for Mozilla.
Meanwhile, you can try refreshing with ctrl+R or some other 'hard refresh' method (browser dependent).
Last, but not least, you should also check if you actually managed to upload the eltered files to the server, and no error occurred during the process. Sometimes the ftp connection to a server breaks and the program fails to upload the file.