An HTML receipt has three main sections: header, main and footer. This is how a printable receipt looks like:
<html> <body> <header> ... </header> <main> ... </main> <footer> ... </footer> </body> </html> |
header: This element is mandatory and It can contain:
Zero or more Line elements
main:
Zero or more Line elements
footer:
Zero or more Line elements
There are three types of Line elements:
A separator is defined through a <div class="separator"></div>
Element. Its height, the blank space before and after can be set in the style
attribute:
<div class="separator solid" style="margin-top: 10px; height: 2px; margin-bottom: 10px;"></div> |
Three different styles of separator are available:
Blank separator: <div class="separator"></div>
Solid separator: <div class="separator solid"></div>
Dotted separator: <div class="separator dotted"></div>
There are two types of Line elements:
Simple Text Element:
<div> <p class="xlarge bold center">$10.50</p> </div> |
Labeled Text Element
<div> <label class="left bold">MID</label> <span class="right">1092839010</span> </div> |
The class attribute can be used to control text-align, text-style and text-size properties:
Class | Values |
---|---|
text-align | left, right, center |
text-style | bold, italic (default is normal) |
text-size | xxsmall, xsmall, small, large, xlarge, xxlarge (default is normal) |
Use this HTML element to print an image:
<div> <img class="center" src="https://hndpt.co/34r676D"/> </div> |
Handpoint allows developer to use a fixed width font, in order to so the font style needs to be added to the root html element.
<html style="font-family: roboto;"> ... </html> |
<html> <head></head> <body> <header> <div> <img class="center" src="https://hndpt.co/34r676D"/> </div> <div class="separator solid" style="margin-top: 10px; height: 2px; margin-bottom: 10px;"></div> <div> <label class="left">17/12/2019</label> <span class="right">11:00</span> </div> </header> <main> <div class="separator" style="height: 60px;"></div> <div> <p class="xxlarge bold center">xxlarge bold center</p> </div> <div> <p class="xxsmall bold center">xxsmall bold center</p> </div> <div> <p class="left bold large">left bold large</p> </div> <div> <p class="right italic large">right italic large</p> </div> <div class="separator dotted" style="margin-top: 10px; height: 2px; margin-bottom: 10px;"></div> <div> <label class="left bold">left bold</label> <span class="right">value</span> </div> <div class="separator solid" style="margin-top: 10px; height: 2px; margin-bottom: 10px;"></div> </main> <footer> <div> <p class="large bold center">ERROR MESSAGE</p> </div> <div class="separator solid" style="margin-top: 10px; height: 2px; margin-bottom: 10px;"></div> </footer> </body> </html> |