I'm loading basic HTML into DOMPDF. In landscape mode, all the pages after the first are overlapping.
Here is my (basic) HTML which renders fine in the browser:
<div id="certificates-layout-1" style="<?php echo $styles['outer-container']; ?>">
<div style="<?php echo $styles['inner-container']; ?>">
<div style="<?php echo $styles['fullname']; ?>">
<?php echo $data['fullname']; ?>
</div>
<div style="<?php echo $styles['fullcouncil']; ?>">
<?php echo $data['fullcouncil']; ?>
</div>
<div style="<?php echo $styles['session_date']; ?>">
<?php echo $data['session_date']; ?>
</div>
</div>
</div>
Here is my DOMPDF render logic:
$filename = (isset($params['filename'])) ? $params['filename'] : 'ubcdet_report_' . date('YmdHis') . '.pdf';
$lib = $_SERVER['DOCUMENT_ROOT'] . '/sites/all/libraries/vendor/';
require_once($lib . "dompdf/dompdf/dompdf_config.inc.php");
$dompdf = new DOMPDF();
$dompdf->load_html($report);
$dompdf->set_paper('letter', 'landscape');
$dompdf->render();
$dompdf->stream($filename, array("Attachment" => false));
exit(0);
I tried with A4 paper as well, same result.
I also tried moving the render() BEFORE set-paper and the overlapping issue goes away, but it will ONLY render as portrait (tried A4 here as well).
I have not tried outputing as actual file before rendering in browser for download, but I will.
This is what the result looks like...
Any suggestions appreciated. Thanks.
====================================
UPDATE Per Request from BrianS
Thanks for your attention. Here is a dump of the rendered HTML:
<html>
<head></head>
<body>
<div id="certificates-layout-1" style="font-family: Times New Roman; font-size:33px; text-align:center; page-break-after:auto;">
<div style="height:672px; width: 906px; border: thin solid #666666;">
<div style="font-size:45px; font-weight:bold; margin-top:96px; margin-bottom:10px;">John Smith</div>
<div style="margin-bottom:125px;">Council of Councils</div>
<div style="font-weight:bold;">April 16 - 19, 2015</div>
</div>
</div>
<style>
#font-face {
font-family: TimesBold;
src: url('/sites/all/modules/ubcdet/ubcdet_report/fonts/timesbd.ttf');
}
</style>
<style>
}
#page {
margin: 0;
}
html {
margin: 72px 76px;
}
body {
width: 1056px;
margin:0;
}
.hint {
background: none repeat scroll 0 0 #6AEA91;
font-size: 13px;
padding: 50px 10px;
text-align: center;
width: 250px;
position: absolute;
}
#media print {
.hint {
display:none;
}
}
</style>
</body>
</html>
I don't think there's anything too unusual in there, but maybe I'm wrong. Let me know if you need additional information. Thanks.
Heights are a tricky thing in dompdf when you're pushing against the page boundaries. For full-page blocks I recommend using positioned content. If this isn't possible I'd set DOMPDF_DPI to 72 (the fixed "pixel" depth of a PDF) so that you get a one-to-one translation from HTML to PDF.
In general I suggest using percents to better place an element within the page boundaries, except that dompdf is a bit more fuzzy around the page margins so you have to give a few extra pixels there if you need to fit content to a page (this is why I usually go for positioned content for full-page elements).
In your case let's work with a paper size of A4 in landscape (since you mentioned it). That paper size/layout gives you a height of roughly 595 pixels. Adding up all the heights your document totally blows past that (>1100 in a rough estimate) which means paging will occur. dompdf is dragging the last line of the container to the next page. So this explains the text layout for the initial block.
As for why the layout breaks so horribly after that ... I have no idea. Usually a layout break is due to poorly-formed HTML, but yours is just fine. Were I to guess I'd say a parent element is lost on page break resulting in null positioning information. This is something we'll have to look at.
Before I continue some notes:
You only need to set margins on the page level. If I recall correctly that defines the margin for the HTML element. The body margin is not defined and so default to 0px.
body height and width is always the height/width of the page content area; no need to set that unless you really want the body to not fill the page.
dompdf does not yet support box-sizing (otherwise this would all be much simpler). height and width are defined by the content box and extra margin/padding is added to the content box to get the full box size (plus keep in mind the mysterious extra padding required around the page margins).
I changed up your HTML/CSS a bit to make it do what you want. Simpler is better, especially for dompdf.
<html>
<head>
<style>
#page {
size: a4 landscape;
margin: 72px 76px;
}
body {
font-family: Times New Roman;
font-size: 33px;
text-align: center;
border: thin solid #666666;
}
.certificate-name {
font-size: 45px;
font-weight: bold;
margin-top: 96px;
margin-bottom:10px;
}
.certificate-title {
margin-bottom: 125px;
}
.certificate-date {
font-weight: bold;
}
</style>
</head>
<body>
<div id="certificates-layout-1">
<div class="certificate-name">John Smith</div>
<div class="certificate-title">Council of Councils</div>
<div class="certificate-date">April 16 - 19, 2015</div>
</div>
<div id="certificates-layout-2">
<div class="certificate-name">John Smith</div>
<div class="certificate-title">Council of Councils</div>
<div class="certificate-date">April 16 - 19, 2015</div>
</div>
</body>
</html>
When working with any tools you should always keep in mind it's strength and weaknesses ... and dompdf has its fair share of weaknesses.
Related
I want to add different styles to differents parts of a line in HTML and then print that line together. Imagine i have the next line:
Hello my name is Bogdan and i live in Spain.
I managed to add different styles to the line, but i can't manage to put all the parts together with different styles applied to each one of them.
<!DOCTYPE html>
<html>
<head>
<style>
<style>
div{
}.bold{ font-weight: bold;
}
.normal{ font-weight: normal;
}
.italic{
font-style: italic;
}
.left{
text-align:left;
float:left;
}
.container{
letter-spacing:-1px;
width: 372px;
font-family: Monaco,monospace;
font-size:19px;}
.center{
text-align:center;
}
.underline{
text-decoration: underline;
}
.doubleFont{font-size:38px;}
</style>
</head>
<body>
<div class = container>
<div class=>
<div class=>Hello my name is Bogdan</div>
</div>
<div class="underline bold">
<div class=>and i live </div>
</div>
<div class="bold">
<div class=>in Spain</div>
</div>
<br>
</div>
</body>
</html>
Replace the divs with spans like that:
<span>Hello my name is Bogdan</span>
<span class="underline bold">and i live </span>
<span class="bold">in Spain</span>
Spans are inline elements and wrap on one line. Divs always go on next lines unless set otherwise. Also consider setting bigger width on .container class.
My PWA in a desktop browser is not really cool (because i don't have a lot of information to show).
And I would like to limit the width to 768px.
I tried many solutions, but i can't to change elements in position "fixed" like v-navigation, v-footer, v-dialog, ...
they are always 100% of the width of the browser.
I tried this in app.vue or in index.html:
html,body,#app {
max-width:768px !important;
overflow: hidden;
}
and last time I tried this in index.html:
#mytable {
width: 100%;
overflow: hidden;
}
#mytable td{
width:50%
}
<table id="mytable">
<tr>
<td>
<div id="app"></div>
</td>
<td>other half</td>
</tr>
</table>
But no solutions works.
Thanks for your help
Marco
Your problem seems you need different layout in function of screen size. You have several solutions from media queries to simple margin. Here I will explain how to do what you want with just margin.
I advise you to use a div to wrap your content and do not apply all your style in your #app container. Why ? Because you can imagine for instance that you want a top bar that take all the width and a content that take only 768px. If you make your layout in only one block this will be very complex. Separation in several block is a good strategy to have a modulabe UI. So we will use this template. You can make whatever you want in the .content div.
<div id="app">
<!-- Here we can imagine a top bar -->
<div class="content">
<!-- Display whatever you want -->
</div>
</div>
First you need to prepare your app container to display your application in all screen. I suggest this css :
html,body,#app {
overflow: hidden; // If content is large it will display scroll bar
height: 100vh; // Tell to your browser to take 100% of the available viewport height
}
Then you can define the css of the .content block :
.content {
max-width: 768px; // Max-width you want
height: 100%; // Take all the height available
margin: 0 auto; // Display div at the center
}
Here is an example: jsFiddle
If you are very interested in layout design, I strongly advise you to look into flex box and css grid.
I've been trying hard, but I can't find the reason. Check www.kanionek.pl
How to get rid off the gap between the header and top of the window? There's .site: 15px auto, but even if I reduce it to 0 there's still 21px extra. Hope you can help.
I know I can use negative margin, but I would like to know the reason. Part of header:
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'dream' ); ?></a>
<header id="masthead" class="site-header" role="banner">
<div class="site-branding">
Part of template:
<?php
get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php while ( have_posts() ) : the_post(); ?>
css fragments:
.site{
max-width: 960px;
margin: 15px auto;
border: 2px solid #808080;
border-radius: 10px;
overflow: hidden;}
Header margin and padding set to 0 do not help.
Body padding and margin are set to 0 and the only trace is that when I change css body section line-height to "0" that gap is gone.
Something is adding a zero width no-break space right after the <body> tag, forcing the following block-display <div> down one line. Probably one of the many scripts. I couldn't tell what, but there you go.
To see it, open the Firefox inspector, right-click on the <body> tag, and click "Edit as HTML". Right after the tag there is (at least in my Firefox) a red dot which is the placeholder for that invisible character. You can copy it and paste it into something that will tell you the codepoint etc.
I solved the problem - maybe it will help someone some day. I could not locate exactly zero-width char, but being almost sure it should be in header.php, I opened it notepad++ and saved using utf-8 without BOM encoding.
I've searched and tried several of the solutions to no avail. I'm currently using jQuery 1.7.1 and Nivo Slider 3.0.1 .
You can see the website at http://www.wheelerbikeclub.net (this is a website I created last year and I'm just coming back to now).
None of the effects on my nivo slider in my home page are working. I know there was a point last year where they were, but then I changed something and now they don't and I cannot recollect what it is that happened.
I've made sure the number of columns/boxs/slices evenly divide my images. Does anyone have any idea what the issue is? Is it somehow related to the fact that I'm forcing my slider to cover the entire screen?
Thanks for any feedback, I greatly appreciate it!
I make calls for the jQuery followed by NivoSlider script in the head section
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.3.0.1.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
Then in my body in a wrapper I put
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="img/new_slides/slide_1-3.png" alt="" title="#slide_1-caption"/>
<img src="img/new_slides/slide_2-4.png" alt="" />
<img src="img/new_slides/slide_4.png" alt="" />
<img src="img/new_slides/slide_3-1.png" alt="" />
</div>
<div id="slide_1-caption" class="nivo-html-caption">
<strong>Find Out More</strong>.
</div>
</div>
There are four images and I'm just testing the caption with image one.
In my nivo-slider css I have (not the entirety, just where I think the problem might lay)
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
z-index:2;
}
.nivo-slice {
display:block;
position:absolute;
z-index:100;
height:100%;
top:0;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
overflow:hidden;
}
.nivo-box img { display:block; }
And in my main styles.css I have
.slider-wrapper { position:relative;
top: 0px;
left: 0px;
width: 100%;
position:fixed;
z-index:0; }
#slider-div { min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -30px; }
Hope that makes sense.
Hey I have a little problem I have a full page header but when I zoom in or reduce the screen size and slide along. It is not full page width it just leaves white space. May css code goes a follow.
.header {
background:#242424 repeat-x;
color:#ffffff;
width:100%;
height:74px;
font-family: 'Karla', cursive;
font-weight:bold;
font-size:15px;
}
The problem is caused by your <div class="medium-cont"></div> tag.
You are setting its width to 1400px in CSS which is causing the problem.
You don't need to use this element, instead set the background image of .medium-back.
<div class="medium-back">
<div class="register"></div>
<div class="medium-cont"></div> <!-- Remove this line -->
</div>
Change your .medium-back style to this:
.medium-back {
background: #19D89B url(images/medium-content.png) no-repeat;
height: 475px;
margin: 0 auto;
}
Then remove any other width:100%; styles you have on the outermost elements.