I using wkhtmltopdf tool to convert html to pdf. On my linux computer it outputs everything right with css rules. But after installing the same tool on a Mac, the output does not look the same. The bold tag does not work. The margin to the top does not work and the font size over all looks smaller.
What can be the problem here? The html file is very simple and I think the wkhtmltopdf should behave the same way here independent of platform.
Here is a part of the html file:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<style>
td {
border:solid windowtext 1.0pt;
background:white;
padding:0cm 5.4pt 0cm 5.4pt;
height:19.65pt;
}
td.table_header {
background:#D9D9D9;
}
.text_right {
text-align: right;
}
table {
width: 100%;
border-collapse:collapse;
border:none;
line-height: 80%;
}
html {
background:white;
font-family: "Arial Unicode MS", sans-serif;
}
.header {
font-size:18.0pt;
text-align:center;
}
.address1 {
text-align:right;
}
.text {
line-height: 160%;
}
.space {
line-height:80%;
}
</style>
</head>
<body style="margin:100px 100px;">
Related
So I am trying to make different texts next to specific symbols (in the elevator-pitch div) but somehow the element skip rows and text end up below the images. Ideally I want each text to be nicely aligned next to the images (hence making the float).
Here is the code: https://codepen.io/andreassoteriou/pen/PoaLBjv
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>AndreasSoteriouCV</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Dancing+Script&family=Merriweather&family=Montserrat&family=Pacifico&family=Playball&family=Playfair+Display&display=swap" rel="stylesheet">
</head>
<body>
<div class="top-container">
<img src="andreassoteriou-modified.png" alt="andreas">
<h1>Andreas Soteriou</h1>
<h2>aspiring web developer</h2>
</div>
<h1>My Story</h1>
<div class="elevator-pitch">
<img class="creativity-img" src="https://cdn-icons-png.flaticon.com/512/1126/1126453.png" alt="creativity">
<h2>Creativity</h2>
<p>Why I am creativfdfdfdfdfdfdfdwerv4vrtyvrtyvrtyvyrytve</p>
</div>
<hr>
<div class="elevator-pitch">
<img class="logical-img" src="https://cdn-icons-png.flaticon.com/128/1935/1935467.png" alt="logical">
<h2>Logical</h2>
<p>Why I am creativggggfgotjgirtgfdffdffdfdfdfdfdfd</p>
</div>
<div class="story-container">
</div>
</body>
</html>
body {
margin: 0;
font-family: 'Merriweather', serif;
text-align: center;
}
.top-container {
background-color: #F8EDE3;
margin: 0;
height: 450px;
padding-top: 60px;
}
.top-container > h1 {
margin-top:40px;
font-size: 40px;
}
.top-container > h2 {
font-family: 'Dancing script', serif;
font-size: 30px;
}
.middle-container {
}
.elevator-pitch {
width: 25%;
text-align: left;
line-height: 1.5;
margin: 50px auto 50px auto;
overflow:auto;
}
.creativity-img {
float: left;
margin-right: 20px;
width: 30%;
}
.logical-img {
float: right;
width: 30%;
margin-left: 20px;
any idea on how I should tackle this? Most importantly, very curious as to why this happens!
Best regards,
Andreas
I was expecting the text to be nicely aligned next to the image as in the udemy course I am doing now:
please i need help
i have my html code which working very fine ,and trying to loadview it as pdf stream
but the output pdf file , not same as html , and text not above image , but get below it
my controller code
public function pdfdownload($id)
{
$id = Crypt::decrypt($id);
$course = Course::where('id', $id)->first();
$orders = Order::where('course_id', $id)->first();
$progress = CourseProgress::where('course_id', $course->id)->where('user_id', Auth::user()->id)->first();
$pdf = PDF::loadView('front.certificate.download', compact('course', 'progress'), [],
[
'title' => 'Certificate',
'orientation' => 'L'
]);
// return $pdf->download('certificate.pdf');
return $pdf->stream('certificate.pdf');
}
my html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css" media="all">
#import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
body{
margin: 0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
h1,h2,h3,h4,h5,h6{
margin: 0 0 15px;
}
.certificate-wrapper{
max-width: 910px;
border: 1px solid #007B83;
}
.certificate-wraper img {
max-width: 100%;
}
/* certificate Antipasto Pro */
.certificate_content {
position: absolute;
top: 182px;
right: 29px;
width: 480px;
}
.certificate_content h2 {
font-size: 29px;
text-transform: uppercase;
color: #29AFA7;
margin-top: 10px;
}
.certificate_content h3 {
text-transform: uppercase;
color: #29AFA7;
font-size: 21px;
}
.certificate_content span {
text-transform: uppercase;
}
.prisciples {
font-size: 25px;
margin-top: 39px;
}
.credit {
margin-top: 27px;
}
.prof {
margin-top: 28px;
}
.date_time {
display: block;
margin-top: 66px;
margin-left: 99px;
color: #000;
font-size: 18px;
}
.code {
margin-top: 22px;
display: block;
margin-left: 83px;
font-size: 14px;
}
/* certificate-end */
.position-relative{
position: relative;
}
</style>
</head>
<body>
<div class="certificate-wrapper">
<div class="certificate-wraper position-relative certificater-img">
<img src="certi-main-bg.png" alt="">
<div class="certificate_content">
<h2>Basma sherif abd alwahab</h2>
<h3 class="prisciples">Principles of Dento-alveolar Surgery
with Live Demo on Suture Techniques</h3>
<h3 class="credit">2 creidt hours</h3>
<h3 class="prof">Prof.Ahmed Elsharkawy</h3>
<div class="certi_abs_content">
<span class="date_time"> april</span>
<span class="code">code</span>
</div>
</div>
</div>
</div>
</body>
</html>
that how img show in html page
html view
that's how pdf stream output looks like
pdf stream
please i would really appreciates any help
, how to solve that
and why pdf not view same as html >?
I think your main issue is that laravel-pdf is a wrapper for mPDF which does not support flex.
See this list for css that is supported: https://mpdf.github.io/css-stylesheets/supported-css.html
I'm using verison 0.12.5 of wkhtmltopdf on Debian Buster. I cannot get it to do any of the following behaviors that control table display and pagination with CSS declarations:
Print table headers at the top of each page
Control page orientation (setting to Landscape)
Inserting a page break
The production table I am working with is very tall (100s of rows) and I need the table header to print at the top of each page. I would also like to avoid breaking in the middle of a row.
I have successfully gotten it to add a page break at the end of a table and I can specify the page orientation on the command line, but I need to control all of these behaviors using CSS (stylesheet or inline is fine) on the actual document.
Sample code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Page</title>
<style type="text/css">
thead { display: table-header-group }
tfoot { display: table-row-group }
tr { page-break-inside: avoid }
</style>
</head>
<body>
<h1>Title Here</h1>
<div>
<span id="filterModeLabel" class="FilterMode">Show all</span>
<table>
<thead>
<tr><th>FirstName</th><th>LastName</th></tr>
</thead>
<tbody>
<tr><td>John</td><td>Smith</td></tr>
<tr><td>John</td><td>Smith</td></tr>
<!-- Enough lines to push it onto two pages -->
<tr><td>John</td><td>Smith</td></tr>
<tr><td>John</td><td>Smith</td></tr>
</tbody>
</table>
</div>
</body>
</html>
I have also tried the following stylesheet variations with no luck:
#page {
size: letter;
size: landscape;
margin-top: .40in;
margin-left: .40in;
margin-right: .40in;
margin-bottom: .25in;
font-size: 10px;
#bottom-right { content: "Page " counter(page) " of " counter(pages)};
}
thead{
display: table-header-group
}
tfoot {
display: table-row-group
}
tr {
page-break-inside: avoid
}
table {
page-break-inside:auto;
word-wrap: break-word;
page-break-after: always;
border-collapse:collapse;
}
table tbody tr{
page-break-inside:avoid;
}
table.standard thead {
display:table-header-group;
font-size: 12px;
}
table tfoot { display: table-row-group; }
table tbody tr td
,table thead tr th {
font-size: 12px;
line-height: 10pt;
border: 1px solid black;
}
This is the call I am running on the command line:
wkhtmltopdf p1.html p1a.pdf
Here are screenshots of the result I get (top of pages 1 and 2):
Top of page 1
Split between pages 1 and 2
debian buster installs without patched QT
this resolved my issue.
wget https://github.com/wkhtmltopdf/packaging/releases/download/0.12.6-1/wkhtmltox_0.12.6-1.buster_amd64.deb
apt install ./wkhtmltox_0.12.6-1.buster_amd64.deb
Its very simple but even after looking at so many examples I cannot seem to get it right! As you can see in this Code Pen, I have a image! Now when I hover the image i want to do various things on the elements with classes .headline .text .title .subtitle. for some reason i am only able to affect any change at all on the .title class! What am i doing wrong?
my html:
body {
}
.container {
.headline {
color: red;
}
.foto {
background-color: lightblue;
cursor: pointer;
}
.foto:hover + .headline {
color:green;
}
.foto:hover + .title {
color:maroon;
position: absolute;
top: 3em;
left: 10em;
}
//text not working
.foto:hover + .text {
color:maroon;
}
.title {
color: darkgreen;
font-weight: bold;
p {
font-size: 2em;
}
}
.text {
color: blue;
}
.subtitle {
color: darkred;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.scss">
</head>
<body>
<div class="container">
<h2 class="headline">Sonderausstellungen</h2>
<div class="foto"><img src="http://oi63.tinypic.com/ifr19y.jpg"/></div>
<div class="title">
<p>Land von Indien</p>
</div>
<div class="text">
<p>Lernen wir Indien Kennen</p>
</div>
<div class="subtitle">
<p>Der Text hier is länger als da oben</p>
</div>
</div>
</body>
</html>
The element+element applies to the next immediate element you identify following the first element. It does not search through the DOM looking for the element.
For instance....
.foo+.bar {color:#f00}
<div class="foo"></div>
<div class="bar"></div> --- This gets selected
<div class="foo"></div>
<div class="zanza"</div>
<div class="bar"></div> --- This does not
So, your CSS should look like this:
.foto:hover + .title {...}
.foto:hover + .title + .text {...}
.foto:hover + .title + .text + .subtitle {...}
Or to avoid stacking so many selectors, you could use ~ to select sibling elements at the same level in the DOM:
.foto:hover ~ .title {...}
.foto:hover ~ .text {...}
.foto:hover ~ .subtitle {...}
Remember, your HTML is being read from top to bottom, and you are not able to target previous sibling elements with CSS. So right now, the way you have your HTML structured, you cannot select the .headline element based on the image :hover because the .headline comes first.
Hi I am using Dreamweaver and trying to get an image or button to change after it is clicked on. Essentially, I want an image to say follow before it is clicked on and say unfollow after it is clicked on like happens on Twitter, Quora etc.
Thanks in advance!
#Spencer: Are you using a JavaScript framework (e.g. jQuery or mootools)? You could add or replace a class for the button when it is clicked so that it'll have a different style to the button in its default state.
Update: Here's some sample code to get you started (see it in action here: http://jsfiddle.net/5HqFw/) --
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>questions/4527859</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#button').click(function() {
$(this).toggleClass("clicked");
});
});
</script>
<style type="text/css">
#button {
border: 1px solid green;
display: block;
padding: 5px;
text-align: center;
width: 100px;
}
.default {
background-color: white;
color: green;
}
.clicked {
background-color: green;
color: white;
}
</style>
</head>
<body>
<p>Button!</p>
</body>
</html>