Member Avatar for KamiNuvini

Hi all,

I am converting an XML document to HTML/PDF. I use some of the Twitter Bootstrap 3 classes for layout, but since I pretty much go directly to PDF I have removed most of bootstrap's css (since I am not looking for a responsive layout, I want it to print to PDF exactly as it is viewed in HTML).

Now I seem to have removed a little bit too much CSS, but I cannot figure out exactly what is the cause. I have created a very minimal working (default css) + non-working (custom css) example. When I manually compare the CSS they seem to be identical.

Please read the HTML comments in my example, I have my own findings explained there. Would love some help in getting it fixed :)

The issue is - with the CSS as it is in the above example, when I print, the "Test" text should be on a new page (through the break-before class).
This doesn't work with my current CSS, however if you remove the <style> bit and uncomment the default css, it will work and move the "Test" text to a new page when printing.

Thanks!

Edited by KamiNuvini
  • 2 Contributors
  • 1 Reply
  • 502 Views
  • 6 Months Discussion Span
  • Latest Post Latest Post by gabrielcastillo

Dani AI

Generated

As narrowed the problem down to a stripped‑down Bootstrap stylesheet and correctly asked about the PDF converter, the useful diagnostic is: page breaks are controlled by paged‑media CSS, by the element’s layout context, and by the renderer that converts HTML→PDF. Common points that make a break rule be ignored:

  • The break rule is on an inline element (page breaks apply to block-level boxes).
  • A parent has overflow: hidden|auto|scroll or display: table|inline-block|flex; many engines will not break inside those contexts.
  • The rule uses only the newer break-before family while the converter only understands legacy page-break-before. Add both.
  • The rule is inside the wrong media (defined for screen but not for @media print) or is being overridden by a later rule.
  • The conversion engine (wkhtmltopdf/PhantomJS/older WebKit, etc.) has limited or buggy paged-media support.

Practical, copy‑paste test that usually reveals the issue:

@media print {
  .page-break {
    display: block;
    page-break-before: always;
    break-before: page;
    page-break-inside: avoid;
    break-inside: avoid;
  }
}
<div class="page-break"></div>
<div>Test</div>

Debug workflow: first check the browser Print Preview — if the break works there but not in the generated PDF, the converter is the culprit. If it fails in Print Preview, inspect computed styles (look for overflow, display, or an overriding rule), temporarily set the parent to overflow: visible and the break element to display: block (or add an explicit <div class="page-break">). When conversion fails but browser printing succeeds, consider a different converter or a paged‑media aware tool; if changing parent overflow or layout fixes printing but breaks layout, restructure content so the page‑break element sits outside the problematic container.

Member Avatar for gabrielcastillo

What are you using to convert over to PDF? I understand that converting to pdf has some limitations when dealing with css.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.