CSS not working with DOMPDF

Asked 2/8, 2013 at 4:8 Answered 2/11, 2023 at 19:37

I am using DOMPDF (v 0.5.2) to convert an html page to a pdf file.

The pdf file appears after the PHP script has run (as expected), but no styles are applied to any of the content. As far as I can find, the float property does not work with DOMPDF, so I have to do some work to get around that, but not even the font styles are being applied.

I have tried all three methods of including styles: attaching a style sheet,

<link href="styles.css" rel="stylesheet" type="text/css">

writing styles in the header,

<style>...</style>

and inline styles.

<div class="..." style="...">

The php file to create the pdf looks like this...

<?php 
ob_start(); 
?>
<html>
<head>

<link href="flhaha.css" rel="stylesheet" type="text/css">

</head>

<body>
... content (divs, etc) 
</body>
</html>
<?php 
require_once("../../scripts/dompdf/dompdf_config.inc.php"); 
$dompdf = new DOMPDF(); 
$dompdf->load_html(ob_get_clean()); 
$dompdf->render(); 
$dompdf->stream('test.pdf');
?>

There is an image within the content that loads fine and is displayed properly when the pdf opens, but still no styles.

Thanks in advance!

Edit #1: The tags above were meant to be "style", not "styles". Have fixed the typo.

Codification answered 2/8, 2013 at 4:8 Comment(3)

Your sample links aren't working for me. I don't see any reason why the styles would not be applied. Do you get any PHP errors or notices? Can you post some sample HTML+CSS? – Poundfoolish 2/8, 2013 at 16:33

@BrianS, the server (bluehost) was down today. Is back up now and the links are working fine. Sorry about that! – Codification 3/8, 2013 at 3:39

I realized after a while it was probably your host. I did eventually get access. – Poundfoolish 5/8, 2013 at 19:26

dompdf v0.5.x does not support floats. v0.6.0 does, though it is still an experimental feature that has to be enabled in the configuration. After testing your document I can say that dompdf doesn't handle it very well. If you want to stick with dompdf you might consider tables since your document is somewhat tabular in nature.

Poundfoolish answered 2/8, 2013 at 19:6 Comment(5)

I agree that I should go to tables. I've always preferred divs, but it's no big deal to change it. You mention "sticking with dompdf", is there something else out there that I can use to write pdfs via php code? dompdf was the most popular choice it seemed, so that's what I went with. – Codification 3/8, 2013 at 3:41

There are a number of PHP-based libraries: mPDF, TCPDF, html2pdf. And if you want something more powerful you can go with a headless browser executable, like PhantomJS. – Poundfoolish 5/8, 2013 at 19:25

I ended up going with mPDF and it worked great! Much better CSS support, and easy to use. One thing to keep in mind (for future people referencing this thread) is that the 'float' style does NOT work in mPDF with <span> tags (only with <div> tags). The reason DOMPDF wasn't working is my CSS was written ".page" instead of "div.page" but that still only fixed SOME of the issues. mPDF wins. Thanks for your answers! – Codification 6/8, 2013 at 15:10

Sorry to see you go (I'm one of the devs). But ... I totally understand. Other libraries work better in some use cases right now. – Poundfoolish 6/8, 2013 at 15:28

@Codification this worked for me too. I moved from dompdf to mPDF. – Targum 8/10, 2020 at 8:56

Internal stylesheet can be created by including the styles in between <style> element not <styles> element.

below stmt is wrong:

<styles>...</styles>

It should be :

<style> ... </style>

and inline styles should given as shown below:

<div class="className" style="color:red;text-align: left;">

and external style sheet should be included as shown below:

<link rel="stylesheet" type="text/css" media="screen" href="styles.css" />

If external style sheet is not working then check the source file path.

Bollard answered 2/8, 2013 at 4:15 Comment(1)

media="all" is probably what you'd want, since pdfs are printed. – Cunaxa 5/10, 2018 at 16:56

Simple solution is, Put your css in separate (.php) or any other server scripting file and include it in your pdf file. eg. You have pdf.blade.php file for pdf

<!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">
    <meta name="description" content="">
    <meta name="author" content="">
    {{-- <link rel="icon" href="/favicon.ico"> --}}

    <title>Starter Template for Bootstrap</title>
<style type="text/css">
@include('pdf.style')
</style>
  </head>
  <body>

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="container">

      <div class="starter-template">
        <h1>Bootstrap starter template</h1>
        <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
      </div>

    </div><!-- /.container -->
  </body>
</html>

Suppose you have css file style.css, So next step is to copy your css file content and paste it in new style.blade.php And you almost done!!

Now include it in your pdf file eg.

<style>
  @include('style')
</style>

thats the simple trick worked for me.

Cholesterol answered 16/9, 2016 at 8:30 Comment(0)

When running on my local I am able to get styles applied when styles are included in the head. e.g. in html.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>

@font-face {
  font-family: 'DanielBlack';
  src:  url('https://mywebsite/path/to//fonts/daniel-black-webfont.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: normal;
  src: url(http://themes.googleusercontent.com/static/fonts/opensans/v8/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
}

* {
  font-family: "Open Sans";
}

.daniel {
  font-family: "DanielBlack";
}

.size3 {
  font-size: 3rem;
}
        
h3 {
  color: red;
  font-family: DanielBlack;
}
</style>

</head>
<body>
  

<h1 class="daniel">h1 with daniel class</h1>
<h1>h1 with no class</h1>

<h2 class="daniel">h2 with daniel class</h2>
<h2>h2 with no class</h2>

<h3 class="daniel">h3 with daniel class</h3>
<h3 class="daniel size3">h3 with daniel and size3 class</h3>
<h3 class="size3">h3 with size3 class</h3>
<h3>h3 with no class</h3>

<span class="daniel">span with daniel class</span>
<span>span with no class</span>

<p class="daniel">p with daniel class</p>
<p>p with no class</p>

Some text no tag
</body>
</html>

then in index.php

<?php
require 'vendor/autoload.php';

// reference the Dompdf namespace
use Dompdf\Dompdf;
use Dompdf\Options;

//load html
$html = file_get_contents('./html.html');

// add options
$options = new Options();
// $options->set('defaultFont', 'Daniel Black');
$options->set( 'isRemoteEnabled', true);
$options->set( 'setTempDir', '/tmp');
$options->set( 'setFontCache', '/tmp');
$options->set( 'setFontDir', '/tmp');
$options->set( 'setLogOutputFile', '/tmp');
$options->set( 'setIsFontSubsettingEnabled', true);

// instantiate and use the dompdf class
$dompdf = new Dompdf($options);

$dompdf->loadHtml($html);

// (Optional) Setup the paper size and orientation
$dompdf->setPaper('A4', 'landscape');

// Render the HTML as PDF
$dompdf->render();

// Output the generated PDF to Browser
$dompdf->stream();

?>

The key thing to note here is the significance of the font-weight value on the @font-face declaration. It is important that the weight is higher than normal in order for the custom font to be applied to header styles i.e. all heading tags. Otherwise the default font will be applied. If there is no default font applied it will fallback to the default font, Serif > Times New Roman with a font-weight of bold.

Brachiate answered 2/11, 2023 at 19:37 Comment(0)

Recommended topics

Hot tags