I am trying to put together a little contact form for my 3 year old son who has leukemia. I want to use it so people can send him notes of encouragement, and we can print them out and hang them in his room. I've got the form working and posting the data using DOMpdf. My issue is, the background image I am trying to use as the "stationary", refuses to scale out to 100% and regardless of what size I make it in my graphic software, it is not working. Any help is appreciated on what I am missing. Code below. For example, see: http://bebrave.me/#contact
<head>
<style>
body { background-image: url(http://www.bebrave.me/test.jpg); background-position: top left; background-repeat: no-repeat;
background-size: 100%;
margin-top:300px;
width:612px;
height:792px;
}
</style>
</head>
<body>
<table width="500px" border="0" align="center" cellpadding="0" cellspacing="0" id="Table">
<tr>
<td align="left">Dear Joshua,<br />
<?php echo $post->Message; ?></td>
</tr>
<tr>
<td align="right">Be Brave!<br />
-<?php echo $post->Name; ?></td></tr>
</table>
</body>
A few notes, these apply if you're using dompdf 0.6.0 beta 3 or the latest from github:
the background-size property is not yet supported in dompdf
you're adding a margin to the body, so the content of the body (including any background image) will be start after the margin is applied
dompdf applies a default page margin of 1.2cm
the default DPI in later versions of dompdf is 96. It's probably a bit easier to get a handle on the dimensions and placement if you drop that back to 72 so that it matches the PDF standard. If you use any other DPI dompdf will perform translation during the render.
dompdf does appear to diverge from modern browsers in regards to the application of the background image. This is probably something the dev team will want to look at in the future. However, since you're targeting dompdf you'll have to take into account its quirks.
Here's a re-written document that appears to do what you want. It's targeting the latest code available on github which I recommend you use considering the many improvements it includes. If you need to target a different release let me know and I can tweak the HTML.
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Denk+One' rel='stylesheet' type='text/css'>
<style>
#page { margin: 0in; }
body {
font-family: Denk One, sans-serif;
background-image: url(http://www.bebrave.me/test.jpg);
background-position: top left;
background-repeat: no-repeat;
background-size: 100%;
padding: 300px 100px 10px 100px;
width:100%;
height:100%;
}
p {
width: 400px;
margin: auto;
}
.signature {
margin-top: 4em;
text-align: right;
}
</style>
</head>
<body>
<p>
Dear Joshua,<br />
You may not understand all that's happening. Sometimes, you may not even care.
Maybe you just want to do what you have to do to get better so you can
go back to being a three-year-old ... growing, learning, playing, loving.
It may be hard to understand, but you are a hero to your family and friends. You
are a hero to them because you show strength in the face of something so
scary. Stay strong, be happy, and and get better.
</p>
<p class="signature">
Be Brave!<br />
-BrianS
</p>
</body>
</html>
The resolution of your image should be 96 pixels per inch (PPI).
For example:
Format A4: Resolution 96ppi and 210mm x 297mm or 297mm x 210mm (horizontal or vertical, respectively)
Related
I know: opinion-based stuff shouldn't be asked etc., but this isn't about opinion, but for now simply about what still exists or rather what will still work today.
My concern: I am looking for a solution to generate one-page pdf files from PHP/HTML pages that get their content from a database and are rather heavily styled with CSS (also including tabular data and images). A function that lets you open or download the PDF when clicking on a link. The PDF should just basically look the same as the corresponding webpage at size A4 (I'll style it that way). As if you choose "preview/save as PDF" in MacOS' printing dialog, but without the user needing any particular software, working on any OS and browser.
I searched SO and the web, and I found a lot of old posts and pages (3 years and much older), like Convert HTML + CSS to PDF with PHP? , Generate PDF report from php and Generate PDF from HTML PHP I can't see in these posts if any of this is still up-to-date / working.
So I'd have to download all that stuff and build it into my pages, maybe only find out that it doesn't work anymore or isn't really applicable for my situation.
Could people who have experience with that kind of stuff please point me to places where I can find scripts/libraries which are able to do this and work with PHP 5.6 and 7? It doesn't have to support CSS3, I can restrict these pages to CSS2, and although I am using webfonts on that website, I can get along without them for the PDFs. Possibly for free, but also a not-too-expensive commercial solution would be okay. I'd be very grateful for any help.
You can use the mpdf library. It's very easy to learn. Here is the sample code.
It works perfectly.
You can get value from another page, using post method also. Your choice.
<?php $student_id = $_GET['student_id']; ?>
<?php
include("mpdf/mpdf.php");
$html .= "
<html>
<head>
<style>
body {font-family: sans-serif;
font-size: 10pt;
background-image: url(\"images/ok.jpg\");
background-repeat: no-repeat;
padding-top:10pt;
margin-top: 100px;
padding-top: 50px;
}
td { vertical-align: top;
border-left: 0.6mm solid #000000;
border-right: 0.6mm solid #000000;
align: center;
}
p.student_id{
padding-left : 140px;
padding-top : -27px;
}
</style>
</head>
<body>
<!--mpdf
<p class=\"student_id\">$student_id</p>
<sethtmlpageheader name='myheader' value='on' show-this-page='1' />
<sethtmlpagefooter name='myfooter' value='on' />
mpdf-->
</body>
</html>
";
$mpdf=new mPDF();
$mpdf->WriteHTML($html);
$mpdf->SetDisplayMode('fullpage');
$mpdf->Output();
?>
I have this PHP file that can 'create' course certificates with custom names passed through $_GET.
The goal is to get the file output into any printable format and download all of the certificates in one (.zip) file.
The problem is that the name's width are dynamic, and the name must match div width.
This is a sample code:
<html>
<head>
</head>
<body style="background-image: image; background-image-size: 100% 100%; width: 1200px; height: 1200px;">
<div class="name_1" style="width: 250px; height: 80px; margin-top: 400px; margin-left: 500px;">
<p><?php echo $_GET['name_1']; ?></p>
</div>
<div class="name_2" style="width: 250px; height: 80px; margin-top: 900px; margin-left: 500px;">
<p><?php echo $_GET['name_2']; ?></p>
</div>
</body>
I have achieved this dynamic text resizing to fit div width with jQuery.
The big problem is that I need to load page by page for 100+ pages to get this dynamic text re-sizing...
So, is there any way of re-sizing all the pages names and download all of them in one click?
Grab the page screenshot(s) using wkhtmltopdf framework, documentation here. It will execute the script on page load, you even have parameter to prolong time for script execution.
--javascript-delay (default to 200ms)
You have a PHP interface, but you can simply use PHP exec this way:
exec("wkhtmltopdf test.html output.pdf")
For creating ZIP libraries, you can find examples here.
FPDF and its derivatives have GetStringWidth() method. If you use the right font, you can get it from this method. A font must be selected using SetFont() before calling this method. There is a set of standard fonts included (Arial, Times, Courier, Symbol and ZapfDingbats), if yours is not one of them, you have to add it: http://www.fpdf.org/en/tutorial/tuto7.htm
$string = "This is a text";
$fpdf = new FPDF();
$pdf->SetFont('Arial','B',16);
echo $fpdf->GetStringWidth($string);
I need to fit and crop the image into it's wrapper.
<div class="box desktop-3 tablet-3 tablet-ls-3 mobile-3">
<div class="inner-box fullbox">
<a href='#module'>
<div class="image-wrap" >
<img src="../img/placeholder.png" />
</div>
</a>
</div>
</div>
css
.box {
width: 282px;
min-height: 282px;
padding: 10px;
float: left;
}
.inner-box {
width: 100%;
min-height: 282px;
top: 10px;
right: 10px;
bottom: 10px;
left: 10px;
padding: 20px;
}
.fullbox {
padding: 0px;
}
.image-wrap {
...
}
i've tried to put the image as the background like you see below, but that didn't worked for me. I want to have a image section from the image that it fits into the box.
.image-warpper {
background-image: url(...);
background-repeat: no-repeat;
background-size: contain;
}
Do i have to crop the image via php or is it possible to scale or crop it in css?
Thanks
"Do i have to crop the image via php..."
Depending on the Image file-size its strongly recommendable to use PHP for this purpose.
Remember the clients browser will always load the complete image to resize it to the css given values.
So even if you got a style telling the image shall never exceed 100x100px the client's browser will load the full size image.
That could take "very long" if its a giant image (referring to the file size).
There are pretty nice classes/libs you can use with PHP to get a comfortable and easy way to play with images. And your page will be much faster then.
For example i recently found:
http://wideimage.sourceforge.net/
Super sweet thing. Supports chaining and stuff.
You should be able to do this:
.image-wrap img { max-width:100%; height:auto; }
This will constrain, and scale down the image, and set it to be 100% wide, according to however wide the parent element is.
Having in mind that you'll use an img html tag, make the image wrap div in position:relative and overflow:hidden and the image with position:absolute and height:100%, width:auto (or width:100% and height:auto). This way the image will be cropped in the parent container and keep its ratio.
See this demo and resize the frame to see how the image is cropped and resized in various dimensions.
We are in the process of redoing our whole website. The current website is over 7 years old, but seems to have a CSS bug that only appears in Webkit-based browsers (Chrome and Safari). We would like to fix that bug as it may take a while before the new site is ready.
We have a table with fixed width:
<table width="1000" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF">
<tr>
<td class="left" width="200" valign="top">
Contents of the menu here.
</td>
<td valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
Contents of website here.
</table>
</td>
</tr>
</table>
The CSS of the relevant elements and classes is as follows:
td {
font-size: 11px;
}
td.left {
width: 200px;
padding-top: 50px;
background-color: #EFEFEF;
}
td.top {
height: 16px;
align: right;
padding-bottom: 2px;
}
The issue is that Webkit calculates the td with class left to be 161 pixels instead of 200 pixels. I can resolve this issue by adding either style="display: block" or style="min-width: 200", but when I do that, Webkit resizes the first table to 1039 pixels rather than 1000, causing the rest of the page to shift all over the place. It seems to totally ignore the fixed width requirements.
I would like to know if there is a way to fix this without drastically changing the structure of the website. If you need to, you can play around with the CSS on the website in question. Note that the bug only appears in Chrome and Safari. I have checked many bug reports for Webkit and many Stack Overflow questions, but none of them seem to quite match my problem.
I think the problem are the images in the righthand "sponsoren" table.
Setting min-width to the left table, and width:150px to the div-tag in the "sponsoren"-table, is working for me.
Wow, don't use tables on such elementary script, go with divs:
<div style="width:1000px; background-color:#ffffff; float:left; clear: both;">
<div style="width:200px; float:left;">
Contents of the menu here.
</div>
<div style="width:800px; float:right;">
Contents of website here.
</div>
</div>
This should fix your problems.
Try to add class class to your table and :
table.yourclass {
width: 1000px !important;
}
I am looking for something that would allow me to render an uploaded image with a 3D perspective and a wrap effect like here.
This will be in the form of a cropping preview using a jQuery library such as jCrop
Currently I was able to achieve the 3D perspective using Reflex.js but looking for a more subtle solution with the wrapping effect as well.
Any help will be appreciated :)
Thanks in advance!
Your requirement of IE9 support basically mandates a canvas approach if you want to keep it client-side. You could of course do the rendering server-side and AJAX load the rendered image back in which will work in every browser.
If you decide that you can dump IE versions less than 10 (or at least just show them the normal photo without the transform then you can do the wrap-around effect with a combination of CSS 3D Transforms and CSS2 clip. Something like:
<!DOCTYPE html>
<style>
body { margin: 100px; position: relative; }
.edge { width: 20px; height: 196px; background-size: auto 100%; position: absolute; left: 30px; top: 2px; transform: perspective(600px) rotateY(-45deg); transform-origin: right; }
.panel { position: absolute; left: 31px; top: 0; clip: rect(auto,auto,auto,20px); }
.panel>img { width: 350px; height: 200px; transform: perspective(600px) rotateY(30deg); transform-origin: left; }
</style>
<div class="edge" style="background-image: url(my_image.jpg)"></div>
<div class="panel"><img src="my_image.jpg" /></div>
To break that down, we’ve loaded the user’s image and dropped it into the page, along with a div with the same image set as a background. That div is set to be a thin width and a height that’s almost as tall as the main image. We can use the background-size property to foce the background image to fit the div even if it’s taller.
We then absolutely position those two so that they’re next to each-other. The CSS2 clip property lets us clip off the left 20px of the image so that at this point the div and img look like one image together.
Finally, we set a perspective and transform-origin for each block and rotate them away from each-other around the Y axis. Because of the clipping we have to fudge the .edge block to be slightly smaller than originally (with a 200px tall image I had to drop it to 196px to look good) but that works pretty nicely for me.
Obviously you’d need to fill in the vendor prefixes (-moz-, -ms-, -o-, -webkit) and I’ll leave the shadow as an exercise for the reader (a simple background on the container would probably do).