Html Print Format

Receipt Elements

An HTML receipt has three main sections: header, main and footer. This is how a printable receipt looks like:

1 2 3 4 5 6 7 8 9 10 11 12 13 <html> <body> <header> ... </header> <main> ... </main> <footer> ... </footer> </body> </html>

 

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:

1 2 <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:

1 2 3 <div> <p class="xlarge bold center">$10.50</p> </div>
  • Labeled Text Element

1 2 3 4 <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

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:

1 2 3 <div> <img class="center" src="https://hndpt.co/34r676D"/> </div>

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.

1 2 3 <html style="font-family: roboto;"> ... </html>

Example

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 <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>