Receipt Elements

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

Line elements

There are three types of Line elements:

Separator Element

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>

Text Element

There are two types of Line elements:

Simple Text Element:

<div>
    <p class="xlarge bold center">$10.50</p>
</div>

Labeled Text Element

The class attribute can be used to control text-align, text-style and text-size properties:

Class	Values

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)

Img Element

Use this HTML element to print an image:

Fixed width Font

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.

Handpoint Help Center

Html Print Format