The HTML5 Invoice

written by jonathantneal on June 25, 2012 in CSS and JavaScript with 47 comments

One of my favorite developers to follow is Chris Coyier. His posts and tutorials at CSS-Tricks are a delight to read. Of his many innovations, one of my favorite is the handy, lightweight HTML Invoice. After using it myself, I thought I would share my own tribute to his work.

So here it is, HTML5 Invoice, a tool that helps you create invoices on the fly, anywhere, without any additional software. Pages are printed perfectly to 8.5×11 standard sheets.

Invoice

The output is precise. The CSS -webkit-print-color-adjust property is used to ensure the print is exactly what one would expect. The @page rule is used to normalize margins across printers. The markup is short and sweet. Validators, lifeless or living can appreciate the semantic usage of old and new HTML elements. The page is easily and fully customizable. Content editable is employed to update labels and values as the balance calculations refresh and beautify themselves through JavaScript. Branding can be modified with a click on the picture, or my simply dragging and dropping a new one onto the existing image.

Use it now, or download the source to give it a new style.