output from PHP = ok, from DOMPDF = wrong. (display)
Question
This output run fine in HTML / PHP:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<title>(PAbi)</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<link rel="icon" href="https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico" type="image/x-icon" />
<style type="text/css">html,body{margin:0;padding:0;background:#000;color:#fff;font-family:helvetica;}
.pie{position:fixed;width:100%;bottom:0;color:#000;background:#fff9f2;font-size:6.5pt;text-align:center;border-top:1px dashed #aa0000;}
#indice{width:430px;margin:auto;}
#indice dt{float:left;width:300px;overflow:hidden;white-space:nowrap;}
#indice dd{margin:0;float:left;width:100px;overflow:hidden;}
#indice dt span:after{content:".....................................................";}
</style></head>
<body><div id="cosmos"><br />
<h1 class="marin">index</h1>
<ul id="indice">
<dt><span>Índice</span></dt><dd>2</dd>
<dt><span>intro</span></dt><dd>3</dd>
<dt><span>functions</span></dt><dd>4</dd>
</ul></div>
<div class="pie">Aliens is here</div>
</body></html>
just as you can see, I need create the index page, then I need this "doits", I get this code from:
CSS Justify text, fill space with dots
But when I export to PDF with DOMPDF, the display go bad...
Thanks by any help to I can create the page "index" using doits to numbers of pages?, thanks!
2 answers
solution1
0 2017-07-12 19:28:46
Regards friends.
Using this code I can "create" my "page index" using:
- XHTML
- DOMPDF
- index info with "doits" to show page number
Problem is when you used from css [TAG:after{content:"...your string here...";}] DOMPDF forever put a newline and then display of "page index" is wrong in the document PDF.
maybe any person want used this option...
<?php
// I put excesive doits only by do test xD
$puntos = str_repeat('.', 999);
echo '<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head><title>(PAbi)</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<link rel="icon" href="https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="https://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico" type="image/x-icon" />
<style type="text/css">
table{width:650px;border-spacing:0.5em;}
#indice1 td{overflow:hidden;max-width:400px;border-radius:2em;padding:0.3em;}
#indice1 span:after{content:"'.$puntos.'";}
.numpa{text-align:center;width:20px;background:#d3dbfa;border:1px solid #000;}
.info{width:205px;background:#d1f6a5;border:1px solid #000;}
</style></head><body>
<table id="indice1"><tr>
<td class="info">ÍNDICE</td>
<td class="puntos"><span></span></td>
<td class="numpa">2</td></tr><tr>
<td class="info">Introducción</td>
<td class="puntos"><span></span></td>
<td class="numpa">3</td></tr><tr>
<td class="info">Características del servicio</td>
<td class="puntos"><span></span></td>
<td class="numpa">4</td>
</tr></table></body></html>';
?>
solution2
0 2017-08-15 23:05:36
Unfortunately Dompdf (current release being v0.8.0) is unable to handle that particular styling. The main issue is that Dompdf does not correctly reflow floats at the end of the line. But even if you force it using something like #indice dd + dt { clear: both; } #indice dd + dt { clear: both; } Dompdf does not appropriately clear the float and continues writing floats the additional floats to the same line.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.