Paging support in PDF added #41

gyfke · 2016-04-27T07:00:21Z

content: url()

Added support for images in css content property so you can reuse embedded images
Example:

    img.logo {
        content: url('data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAA...
    }

...
    <img class="logo">
...

Paging in PDF

Implemented css property page-break-inside. It supports two values: auto (default) and avoid

With default values there is no rules defined to transfer html-blocks or words to the next page. And pages can be splitted right through the text
With td { page-break-inside: avoid; } words which are located in the edge of pages will be transferred to the new page.
The same is for th, p, span and I guess for any text in any other tags (though I’ve checked only aforementioned)
With table { page-break-inside: avoid; } if table row is not fitted to the page, then the whole row will be transferred to the next page.
If row is bigger than page then it doesn’t make sense to transfer it and the value of page-break-inside will be ignored.

Known cosmetic issues:

If table's page-break-inside=auto and cell’s page-break-inside=avoid then an empty part of table cell can be rendered at the end of page
And all the text will be transferred to the next one
If table's page-break-inside=avoid and the row is bigger than the rest of page but can be fitted to the next page it will be transferred to the next page and will leave a lot of space on the previous one

Headers and footers

Added support for position: fixed, elements with fixed position are rendered on every page and can be used as headers/footers/watermarks.
It ignores page margins, so if you need to place 50px-height header and footer on the page with 20px margins you need to set top/bottom margins to 70px to leave proper margins for the main content. Example:

var config = new PdfGenerateConfig()
{
    MarginBottom = 70,
    MarginLeft = 20,
    MarginRight = 20,
    MarginTop = 70,
};
...

.header {
    position: fixed;
    left: 20px;
    top: 20px;
}

.footer{
    position: fixed;
    left: 20px;
    top: 750px;
}

<body>
    <div class="header">
        logo
    </div>
    <div class="footer">
        disclaimer
    </div>

    <p>
        page content...
...

Added support for position: fixed in pdf

ArthurHub · 2016-04-27T07:10:09Z

NICE!
Great work!
Can I interest you in taking this project as a direct contributor?

michalczukm · 2016-06-22T09:21:08Z

@ArthurHub could you publish nuget package update with this fix :) ?
We're actually having this problem in HtmlRenderer.PdfSharp 1.5.0.6

Ixonal · 2016-07-05T17:34:47Z

I'm looking to get this functionality as well, so it'd be much appreciated if the nuget package were to be updated.

netmann · 2016-09-19T14:02:20Z

page-break-inside: avoid doesn't include   tag inside  element during page height calculation. So page break doesn't work properly when   element is used.

e.g. Lorem ipsum dolor sit   amet, consectetur adipiscing elit

I would be grateful for fix

amreimer · 2016-10-05T21:10:28Z

I downloaded the demo code, which includes all the changes described here, however the resulting PDFs do not break as the description states. I used the "Breaking pages 1" and "Breaking Pages 2" sample code. I would be EXTREMELY excited if this code did work as described and illustrated above, it is exactly what I'm looking for. Until then I am trying all kinds of styles/methods.

I even downloaded all the code and built it myself without nuget with the same results.

HumanRob · 2016-10-25T09:27:00Z

@amreimer yes I've also been unable to get it to work - even when downloading and building the code myself. table { page-break-inside: avoid; } seems to work as expected, but I can't get td { page-break-inside: avoid; } to work at all - also tried it with span and p elements.

I'd be happy to look into fixing this myself, but because I can't get the feature to work at all it's kind of hard to know where to begin!

For the time being, to prevent words getting cut in half across pages I've had to wrap each paragraph in a table with page-break-inside: avoid; set, which almost but not quite achieves the same result at the cost of horribly mangling my html!

If anyone could provide steps to get this feature working, or even ideas on where I should start bug hunting, please let me know.

PawelMaj · 2016-11-15T22:32:06Z

@HumanRob @amreimer Hey! I have recently decided to join this project and started looking into the page-breaking code in specific (I have my own self interests in making it work haha). That being said, I think the words will break a page correctly if the immediate parent element has that attribute on it and if the parent element is smaller than the size of the page.

Should work
<td style="page-break-inside: avoid;">Hello</td>

Will fail
<td style="page-break-inside: avoid;">Hello</td>

Unfortunately I am a bit busy the next few weeks, but when I am free I will do my best to implement some generic page breaking that works with nested elements. Also if you only really care about making sure words are not split in half you can change the following code:

CssRect.cs ln307

From:

if (!box.IsFixed && box.PageBreakInside == CssConstants.Avoid)
{
     word.BreakPage();
}

To:

if (!box.IsFixed)
{
     word.BreakPage();
}

If I am correct (I may be wrong, I have only started to get into this code) this change will make sure that no words will ever be split on a page break.

grandpaSam · 2016-12-13T21:05:25Z

@PawelMaj I believe you actually mean:

CssLayoutEngine.cs ln307

luislhg · 2017-01-31T17:06:29Z

It is on CssLayoutEngine.cs ln307
And PawelMaj works as expected! Finally got this working, thanks! :)

SwiftDoge · 2017-02-28T14:55:34Z

I was having the issue of pages being split right through the text and adding this bit of css seems to have fixed the problemtable, tr, td { page-break-inside: avoid; font-size: 14px; }. This works without updating the html-rendered to the 1.5.1-beta1 version which is quite confusing to me, how is that possible? Did I just get lucky with my particular pdf? (Just a disclaimer I have close to no idea how this html-renderer works so apologies if this is a silly question )

grandpaSam · 2017-03-03T21:53:45Z

@gyfke
I seem to be having and issue with fixed position. On the second page my header seems to draw over the content. I would like to have a header on each page which I believe the position fixed attribute is supposed to accomplish. This seems to work well on the first page where I can apply a margin on the body. But on the second page the margin no longer is applied and the header will draw over the content of the page. Am I using position fixed incorrectly?

cjfjones · 2017-04-24T10:55:59Z

@gyfke @grandpaSam - I'm having exactly the same issue, whereby on the first page, the margins are in relation to the fixed content (i.e. the header and footer). On the subsequent pages the margins are in relation to the page itself, therefore my subsequent pages have overlapping objects.

p.s. I am using this in combination with the paging tables.

vip32 · 2017-05-30T09:56:48Z

@ArthurHub is this available in current 1.5.0.6?

grandpaSam · 2017-07-12T19:14:28Z

I noticed that the example program has the same header margin problem as in the i described in my previous comment.

emilmork · 2018-01-15T13:44:49Z

Is there any chance this changes with page-break will get to an actual nuget package ? :)

Great work with this package anyway 👍

ksingamreddy · 2018-03-13T14:22:49Z

For page-break I tried with following code

td { page-break-inside: avoid; }
table { page-break-inside: avoid; }

which is working perfectly but I am getting some additional extra edges at end of the page as shown in the attachment.

Is there any way to get rid of extra edges ?

RylaiSlyfe · 2018-09-18T08:56:38Z

Bumping this. Am using the 1.5.1 prerelease and the page break for tables is working as expected, but with normal text it's still cut off

HenningKlokkeraasen · 2018-10-26T13:44:32Z

I experience the same issue as RylaiSlyfe.
I worked around it by wrapping all texts in a <table>, and styling it with
table,
th,
td {
page-break-inside: avoid;
}

Murphybro2 · 2019-01-23T14:59:06Z

I have the temporary solution of wrapping my text in tables. Not ideal to be honest....

karritos · 2019-04-16T17:43:59Z

Woow, works for me.
I used the third option
table { page-break-inside: avoid; }
And I updated in NuGet pakages:

This in the work project. Thanks

dlaczny · 2019-08-06T10:40:08Z

@ksingamreddy did you find out how to get rid of this edges?

ksingamreddy · 2019-08-07T10:07:32Z

@dlaczny we replaced HTML tables with divs to get rid of the edges.

Stepnicka · 2021-11-01T13:12:09Z

@dlaczny we replaced HTML tables with divs to get rid of the edges.

How did you manage to position your divs? I cant get absolute positioning, floats, flex or grids working in the renderer.

gyfke added 4 commits April 26, 2016 13:57

Support base64 images in css content property

530e9a0

Added paging support for pdf

44a0453

Added support for position: fixed in pdf

fixed rendering in WPF

fd6bc10

cleanup code

349e166

ArthurHub merged commit 48dd0c3 into ArthurHub:master Apr 27, 2016

gyfke mentioned this pull request Apr 28, 2016

HTML being cut off in PDF #38

Open

gyfke mentioned this pull request Jun 16, 2016

html to pdf rendering, text getting clipped #45

Closed

This was referenced Dec 9, 2025

"Obsolete and not implemted any more." exception with PdfGenerator.ParseStylesheet method #177

Closed

When using version PDFSharp 1.50.4545.0 type initializer throws an exception for adapters #143

Closed

Paging support in PDF added #41

Paging support in PDF added #41

Uh oh!

Conversation

gyfke commented Apr 27, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

content: url()

Paging in PDF

Headers and footers

Uh oh!

ArthurHub commented Apr 27, 2016

Uh oh!

michalczukm commented Jun 22, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Ixonal commented Jul 5, 2016

Uh oh!

netmann commented Sep 19, 2016 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

amreimer commented Oct 5, 2016

Uh oh!

HumanRob commented Oct 25, 2016

Uh oh!

PawelMaj commented Nov 15, 2016

Uh oh!

grandpaSam commented Dec 13, 2016

Uh oh!

luislhg commented Jan 31, 2017

Uh oh!

SwiftDoge commented Feb 28, 2017

Uh oh!

grandpaSam commented Mar 3, 2017

Uh oh!

cjfjones commented Apr 24, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vip32 commented May 30, 2017

Uh oh!

grandpaSam commented Jul 12, 2017

Uh oh!

emilmork commented Jan 15, 2018

Uh oh!

ksingamreddy commented Mar 13, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

RylaiSlyfe commented Sep 18, 2018

Uh oh!

HenningKlokkeraasen commented Oct 26, 2018

Uh oh!

Murphybro2 commented Jan 23, 2019

Uh oh!

karritos commented Apr 16, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dlaczny commented Aug 6, 2019

Uh oh!

ksingamreddy commented Aug 7, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Stepnicka commented Nov 1, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

20 participants

gyfke commented Apr 27, 2016 •

edited

Loading

michalczukm commented Jun 22, 2016 •

edited

Loading

netmann commented Sep 19, 2016 •

edited

Loading

cjfjones commented Apr 24, 2017 •

edited

Loading

ksingamreddy commented Mar 13, 2018 •

edited

Loading

karritos commented Apr 16, 2019 •

edited

Loading

ksingamreddy commented Aug 7, 2019 •

edited

Loading