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

<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)

Img Element

Use this HTML element to print an image:

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

Example

<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>

Html Print Format