The PDF template should match the Webpage template

Hi there,

Just getting into using InvoicePlane, and one minor thing I have noticed is the difference in design for the PDF and the Webpage templates. Here are two images for reference.

Personally, I prefer the Webpage template, it is a bit tidier in my opinion. I would love to see the PDF templates be modified in such a way that they more or less represent the same design as used in the Webpage template.

I do recognize that it is all editible by the user (although not the webpage nor PDF templates as easily as the email templates), but it would be nice if the defaults out-of-the-box looked more in sync with each other.

1 Like

There is a main reason why the PDF templates do not look the same like the web templates: a sheet of paper is not like a browser window. For sure you can generate a PDF from the web template but it will not be optimized for a standard sheet of paper (like DIN A4 or US Letter).

But a better solution for this is planned for v2.

Hi Kovah,

I believe I understand that. My concern was more around how it doesn’t appear that they were designed with consistency other than the similar fields. I understand they cannot be identical for obvious reasons such as whitespace and page sizes, but I found some admittedly small but also obvious (to me with mild OCD. haha.) inconsistencies that I do not believe should or would have any problems being improved upon due to the known limitations between the two mediums.

For example, some of the inconsistencies noted:

  1. On webpage, logo is in the upper left. On PDF, it is on the upper right.
  2. On webpage, Quote/Invoice number is on the far right in line with the logo. On PDF, the Quote/Invoice number shows right above the product line items not in line with anything.
  3. On webpage, the Date, Expiry, and Amount is dark black text. On PDF, it is slightly greyed out a bit.
  4. On webpage, the Date, Expiry, and Amount are separated by whitespace and does not contain colons after the line titles. On PDF, it is separated by almost no whitespace and contains colons after the line titles.
  5. On webpage, the product line items are separated by colour patterns in the table. On PDF, there appears to be no colour pattern at all.

These are just some of the inconsistencies I see. Admittedly minor, but also quite glaringly obvious when looking at both mediums side by side. As somebody with mild OCD, I probably care about this more than I should, but the fact remains that the two mediums are not even close to consistent.

In my humble opinion, but definitely up to each others own preferences, the PDF should resemble closer to the webpage in terms of layouts of the fields. I am completely understanding of the fact that it cannot be 100% identical due to limitations of whitespace and page size and such, but they can definitely be improved upon for consistency without leaving those types of changes to novices who are not as comfortable modifying the template files themselves. I am modifying them for my own, but have come to realize how time consuming it is for little gain. Would be nice to have that done once in core and then it’ll be more consistent for everybody.

You state that “a better solution for this is planned for v2”… what kind of solution are you referring to? I have my fingers crossed for at least an improved editor for the template files for all types including PDFs and webpage rather than just Emails as it seems to be now. Would make that so much easier for users.

I hope that clarifies that up a bit. Thank you for your time.

PS - When editing the template files in my server, I suppose I need to make backups of them before doing any future upgrades as they will likely be over-writable by the upgrade?

Yes I know what you mean.
The thing is that InvoicePlane is not a software I wrote from scratch. Its a fork of FusionInvoice which was abandoned by the original author. Since I released the first version a lot of things changed but I’m kinda scared of touching the templates. Its a lot of work to change them or fix the inconsistency you are talking about.
But as I don’t get any money from the project I have to limit my working time and focus more on the system itself and the support rather than the templates.

About the solution for v2: I imagined that the web preview does not display the items and invoice details on its own but displays the original PDF you sent to the customer - just with the options and payment buttons on top. That would be the easiest way.

BTW if you know anybody who could help us please let him know of the project.

Hi @Kovah,

That makes sense and is understandable. Thank you for doing what you do. :slight_smile:

I would be more than happy to work on improving the templates slowly but surely. I’ve already done some very small modifications myself (i.e.: adding spaces between the “P:” and the phone number, adding spaces between State (or Province where I’m from) and ZIP (or Postal Code where I’m from) to better follow the guidelines in my country for postal mail addresses, adding some spaces between the logo image and the text beneath it, etc.).

I could work on this over time and submit small modifications as needed if that helps you out in any way. How would I go about submitting changes I’ve made to you?

If you are familiar with Git you can submit a pull request but I think you can just upload the files somewhere and post a link.

where did you customize the code to make the logo go to the left? instead of staying in the right i would like to have it in the left as well…

HI @smora,

I’ve attached edited copies of the main PDF & HTML invoice templates as an example of what I’m currently using after making modifications to the originals. Perhaps run a diff on my file vs the default one and you’ll see what needs to be modified.

I hope that helps. :slight_smile: Good luck!

default-invoice-html.php (10.6 KB)
default-invoice-pdf.php (12.3 KB)

Thanks @DustinDauncey

Hi there,

I thought I’ll just notify you all of this article: https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/

At the moment I’m just cruising the surface here, but if I come up with something clever I’ll let you know! (Be patient though, I’m not a hardcore developer…)

1 Like