HTML Formatting for Receipt Templates

Overview

Evergreen receipt templates use HTML for formatting, allowing you to control how text appears on printed receipts. This guide covers the essential HTML tags and techniques you’ll need to create professional-looking receipts.

You don’t need to be a web developer to customize receipts. The examples in this guide can be copied and modified to suit your library’s needs.

Basic Text Formatting

Table 1. Common HTML Tags
Tag Purpose Example Output

<br/>

Line break (like pressing Enter)

Welcome!<br/>Thank you

Welcome!
Thank you

<hr/>

Horizontal line separator

Items:<hr/>

Items:
---

<b>…​</b>

Bold text

<b>Due Date</b>

Due Date

<i>…​</i>

Italic text

<i>Title</i>

Title

<u>…​</u>

Underlined text

<u>Important</u>

Important

<p>…​</p>

Paragraph with spacing

<p>New paragraph</p>

New paragraph

(with spacing above/below)

Text Alignment

To change text alignment from the default left justification:

Right Alignment

<!-- Right aligned -->
<p align="right">{{today | date:$root.egDateAndTimeFormat}}</p>

Output: The date and time appear aligned to the right side of the receipt
Example: 12/15/2024 2:30 PM

Center Alignment

<!-- Center aligned -->
<p align="center">Welcome to {{current_location.name}}!</p>

<!-- Alternative center tag -->
<center>Thank You!</center>

Output: Text appears centered on the receipt
Example: Welcome to Main Library!

Lists

Numbered Lists

Use numbered lists to display items with automatic numbering:

<ol>
  <li ng-repeat="checkout in circulations">
    <div>{{checkout.title}}</div>
    <div>Barcode: {{checkout.copy.barcode}}</div>
    <div>Due: {{checkout.circ.due_date}}</div>
  </li>
</ol>

Output Example:

1. The Great Gatsby
   Barcode: 31234567890
   Due: 12/29/2024

2. To Kill a Mockingbird
   Barcode: 31234567891
   Due: 12/29/2024

Bulleted Lists

Use bulleted lists for non-sequential items:

<ul>
  <li ng-repeat="checkout in circulations">
    <div>{{checkout.title}}</div>
  </li>
</ul>

Output Example:

• The Great Gatsby
• To Kill a Mockingbird
• Pride and Prejudice

Tables

Tables are useful for organizing billing information and creating aligned layouts:

<table width="100%">
  <tr>
    <td>Title:</td>
    <td>{{checkout.title}}</td>
  </tr>
  <tr>
    <td>Barcode:</td>
    <td>{{checkout.copy.barcode}}</td>
  </tr>
  <tr>
    <td>Balance:</td>
    <td>{{xact.summary.balance_owed | currency}}</td>
  </tr>
</table>

Output Example:

Title:      The Great Gatsby
Barcode:    31234567890
Balance:    $5.00

Advanced Formatting

Text Size

Control text size for better visibility:

Using Font Size Tags

<font size="1">Small text</font>
<font size="3">Normal text</font>
<font size="5">Large text</font>

Using Style Attributes

<div style="font-size:150%">Larger text</div>
<div style="font-size:200%">Even larger text</div>

Combining Styles

You can combine multiple formatting options:

Bold, Centered, and Large

<center><font size="4"><b>HOLD PICKUP</b></font></center>

Output: Large, bold text centered on the receipt

Using Style Attribute for Multiple Properties

<div style="font-weight:bold; font-size:150%; text-align:center;">
  Important Notice
</div>

Output: Bold, enlarged text centered on the receipt

Borders and Boxes

Create visual separation with borders:

Dotted Border Box

<div style="border:3px dotted #000; padding:10px;">
  Content inside a box
</div>

Output: Text surrounded by a dotted border with padding

Top and Bottom Borders

<div style="border-top:2px solid #000; border-bottom:2px solid #000;">
  Content with top and bottom borders
</div>

Output: Text with solid lines above and below

Special Characters in HTML

Some characters have special meaning in HTML and need to be encoded:

Table 2. HTML Character Entities
Character HTML Code Usage

<

<

Less than symbol

>

>

Greater than symbol

&

&

Ampersand

"

"

Quotation mark

Space (non-breaking)

 

Prevents line breaks

Working with Macros in HTML

Evergreen macros (the {{}} placeholders) can be embedded anywhere in your HTML:

<!-- Simple macro in text -->
<p>Welcome {{patron.first_given_name}}!</p>

<!-- Macro with formatting -->
<b>Card Number:</b> {{patron.card.barcode}}<br/>

<!-- Macro in table -->
<table>
  <tr>
    <td>Balance Due:</td>
    <td><b>{{xact.summary.balance_owed | currency}}</b></td>
  </tr>
</table>

Always test your HTML changes with the preview feature before saving. The preview shows how your receipt will look with sample data.

Best Practices for Receipt HTML

Practice Reason

Keep HTML simple

Receipts print on thermal printers with limited formatting support

Use relative sizes

Allows receipts to scale properly on different printer models

Test with actual data

Preview may not show all edge cases

Avoid complex CSS

Not all CSS properties work on thermal printers

Use consistent formatting

Creates professional, uniform receipts across all types

Troubleshooting HTML Issues

Problem Solution

Text appears as code

Check for unclosed tags (missing > or </tag>)

Formatting not showing

Verify HTML tags are properly nested

Receipt too wide

Remove fixed widths or use percentages

Spacing issues

Use <br/> for line breaks, not just Enter key

Special characters display wrong

Use HTML entities for <, >, & characters

Related Documentation

Next Steps

Now that you understand HTML formatting for receipts:

  • Return to Configuring Receipt Templates to apply your knowledge

  • Experiment with the preview feature to see results instantly

  • Start with small changes and build complexity gradually

  • Save backups of working templates before making major changes