Header content is being clipped

anmol-yousaf commented 7 years ago

So I am trying to create pdf with a repeated header. Header height is dynamic since user adds elements to the header and can set the margin too. But since margin sets margin from the top to the body content header is not showing. Setting header position property to absolute makes it visible but the body content hides behind it and if I set the spacing property between header and body the header moves out of the page again and is not visible.

Here is the code:

html  = render_to_string('baskets/invoice.erb', layout: false, locals: { params: request_params })
options = {
  page_size: invoice_template.page_size,
  footer: { content: render_to_string('shared/footer', layout: false) } ,
  header: { content: render_to_string('shared/header', layout: false), spacing: 100 },
  margin: margins
}
pdf_content = WickedPdf.new.pdf_from_string(html, options)

unixmonkey commented 7 years ago

A couple of tips:

Make sure your header template is a full html document, including doctype: <!doctype html><head><title></title></head><body></body></html>. This prevents quirks mode rendering.
Set your HTML body for the main content to margin: 0, padding: 0, and add margins/padding in the header, to prevent overlap.
Experiment with tweaking, or letting the user set the spacing option.

Let me know how it goes. If you continue to have trouble, please post HTML (or your ERB templates with dynamic values replaced with text that illustrates the issue) and CSS.

anmol-yousaf commented 7 years ago

Yes, the document is of html type. But the issue is the header height is not fixed it is dynamic dependant on the elements added in the header and the margin option is adding margin from the top to body. So header content gets clipped.

unixmonkey commented 7 years ago

Ok, I thought you were mostly talking about having issues with margin overlap, but you need to be able to resize your header based on the amount of content in it.

I don't think there's a good fix for that, however you can probably come to a good-enough solution with some experimentation.

Is the font and font-size going to be variable, too? If not, you can try finding how many characters, on average it takes before content wraps to another line, then account for that. Here's a very simplified example, where the company name is the only thing of variable length:

def rows_for(company_name)
  thin_chars = 'fijlrt1,./[]!`^*()|\"'.chars
  wide_chars = ('A'..'Z').to_a + "@%".chars
  css_max_px_width = 150 # max width text can be before it starts wrapping.

  thin_char_count = company_name.chars.count { |char| thin_chars.include?(char) }
  wide_char_count = company_name.chars.count { |char| wide_chars.include?(char) }
  # assume med size for others not named above
  med_char_count = company_name.chars.count - thin_char_count - wide_char_count

  approx_px_width = (thin_char_count * 4) + (wide_char_count * 10) + (med_char_count * 8)
  rows = (approx_px_width / css_max_px_width.to_f).ceil
  rows # maybe add 1 for an extra blank line at bottom?
end

rows_for("Dave's Web Design") # => 1
rows_for("Premier Antarctic Expeditions, Incorporated") #=> 2

Then use that to calculate header height, something like this maybe:

options = {
  header: {
    spacing: rows_for(company_name) * 80 # spacing needed per line
  }
}

This is only an idea, and maybe not even a very good one, but it's what I could think of right now.

Let me know if something like this works, or how it goes!

unixmonkey commented 7 years ago

BTW, all numbers used above (4, 8, 10, 150, 80) are totally guesstimated. I didn't do any real measurements. Experiment and find out what works for you.

unixmonkey commented 7 years ago

Any luck?

anmol-yousaf commented 7 years ago

Yes, I have calculated the estimated height of the header and added it in the margin-top. Thanks.

unixmonkey commented 7 years ago

Great!

Would you mind sharing a little bit about how you are doing that here to help others?

anmol-yousaf commented 6 years ago

As you suggested to count the chars and guesstimate the height of the header. I took that idea and wrote a function that gives me the maximum height from all the elements that would be rendered in the header. I assigned an estimated height to each element.

mileszs / wicked_pdf

Header content is being clipped #682