A receipt or invoice is a document people keep. They file it, forward it to an accountant, or print it for expenses, and they judge it quickly: does it show who sold what, for how much, and what is owed? An HTML receipt that looks fine in a browser can still print badly, with a table squeezed to one side, a total lost at a page break, or a logo pushing the content off the page. Designing for A4 from the start avoids those problems. HTML to PDF renders a pasted snippet as an A4 PDF in your browser, so you can test the exact page your customer will receive before you send it.
Plan the page before you write the markup
Start on paper, or at least in your head, with the blocks a receipt needs in order: seller name and contact details, buyer name, a document title and number, a date, an item table, a totals section, and payment or thank-you notes. That order matches how a reader scans a receipt, and it matches how an accountant files one. Keep the header short. A business name, one line of contact details, and the word Receipt or Invoice are enough. A long address block, a slogan, and a row of social links push the items further down the page and add nothing a customer needs from a receipt.
Decide the currency and number format before you write any figures, and use it consistently. If prices include tax, say so next to the total rather than leaving the reader to guess. If a discount applies, show it as its own line between the subtotal and the total, so the arithmetic is visible. A receipt whose numbers cannot be checked by adding them up invites questions, even when the total is correct.
Build a table that survives the page
The item table is where most receipt designs fail. Use one table with clear columns: item, quantity, unit price, and line total. Four columns fit A4 comfortably. Six or seven columns, including codes, categories, and notes, usually do not, and the table ends up cramped or clipped. If you need extra detail, put it in a short line under the item name rather than in a new column.
Give table cells padding so text does not touch the borders, and give the header row a clear distinction, such as bold text and a bottom border. Right-align money columns so decimal points line up, and left-align item names so they read naturally. Keep item names short and factual. A name like "linen apron, natural" is easier to scan than a long product title copied from a catalogue, and it still identifies the item unambiguously.
Worked example: a fictional bakery invoice
Take a fictional example. The Example Corner Bakery, an invented business, is invoicing a fictional customer, Jordan Lee at jordan@example.org, for a small catering order. The HTML snippet contains the bakery name and a contact line, the title "Invoice", the invented invoice number INV-2041, and the date written in full. The table lists three invented items: twelve plain rolls at 1 each, one fruit cake at 18, and six cheese pastries at 2 each. The subtotal is 48, a delivery line adds 5, and the total is 53.
On the first conversion, the bakery notices the total row sits directly under the items without separation, so it reads as just another item. Adding a top border and bold text to the total row fixes that at a glance. On the second conversion, the delivery line looks ambiguous, so the bakery renames it "Delivery (one order)" to make clear it is a single charge, not a per-item charge. The final PDF is one clean A4 page that a customer can check in seconds: items, quantities, prices, and a total that adds up. That checking time is the real test of a receipt. If a customer cannot verify it quickly, the design has failed even if every number is right.
Totals, notes, and the bottom of the page
Place the totals block directly under the table, aligned to the right, with the same money alignment as the table columns. List subtotal, tax or charges, discounts, and total in that order, and make the final total the most prominent figure on the page after the title. Below the totals, add only what the customer needs next: a payment method or due date, a short thank-you line, and a contact address for queries. Resist the urge to add marketing copy to a receipt. A customer reading an invoice wants confirmation, not persuasion, and extra paragraphs bury the payment details.
Think about the bottom of the page too. A receipt that ends halfway down an A4 sheet looks unfinished, but padding it with filler to reach the bottom looks worse. Leave the white space alone. A short document on a full page is perfectly professional, and it prints cleanly without forcing content onto a second page.
For pricing background that helps you set the figures themselves, see how to calculate profit margin and break-even.
Honest limitations
An HTML receipt converted this way is a rendered page, and CSS and print support have limits. Advanced layout tricks, custom web fonts, and anything that depends on JavaScript will not reliably survive conversion, and scripts are stripped before rendering for safety, so totals must be calculated and written into the HTML in advance rather than computed on the page. The output is rasterised, so treat the PDF as the finished document and check it visually rather than assuming the text will behave like text from a word processor. Page size is A4, so a very long invoice will flow across pages; if your invoice regularly runs long, split it into a summary page plus an itemised attachment rather than letting a table break awkwardly. Finally, a well-formatted invoice is not a substitute for proper record-keeping: keep your own copy, and check local rules if your invoices need particular details or formats.
FAQs
What should an HTML invoice contain?
Seller and buyer details, a title and number, a date, an item table with quantities and prices, a totals block showing subtotal, charges, and total, and brief payment or contact notes. Anything beyond that should earn its place.
How do I keep a table from breaking badly on A4?
Use few columns, short item names, cell padding, and right-aligned money figures. Convert early and check the PDF, rather than perfecting the HTML in a browser and discovering page problems only at the end.
Can the PDF calculate totals for me?
No. Scripts are stripped during conversion, so any calculation must be done beforehand and written into the HTML as finished numbers. Double-check the arithmetic before converting, since the PDF will faithfully reproduce a wrong total.
Should a receipt fill the whole A4 page?
No. A short receipt that ends partway down the page is fine. White space at the bottom is better than filler content or a table stretched to fill the sheet.
If the finished invoice needs to travel with other documents, Merge PDF joins them in order, and Compress PDF can shrink a bulky combined file for emailing.
human review pending client designation