HTML styling for ticket products

Both print-at-home and box office-generated tickets use standardized text styling. Yet by inserting HTML elements in the right places, you can add some custom formatting. There are times when a bold font would help emphasize information - or when a dividing line would help make a block of text more readable.

If you're familiar with HTML, adding a little code will be easy for you - but if you're new to HTML we recommend consulting with the Saffire support team. Newbies can also do some hands-on training at W3Schools.com.

Text Styling

HTML tags can help you define special types of text. You can use these in various locations throughout your products, such as:

• Price Types
• Product Name
• Website Description
• Custom Text on customer receipt (Sales Tab > Advanced Options)
• Ticket Note (Online & Box Office/Pre-Printed)
• Ticket Advertiser Text

<b>   Bold text </b>   

• This tag defines bold text, without any extra importance.

<strong>  Strong text </strong>   

• This tag defines text with strong importance. The content inside is typically appears bold.

<i>   Italic text </i>   

• This tag is often used to indicate a technical term, a phrase from another language, a thought, a ship name, etc.

<em>   Emphasized text </em>   

• A screen reader will pronounce the words in this tag with an emphasis, using verbal stress.

<u>   Underlined text </u>   

<mark>  Marked text </mark>   

<small>   Smaller text </small>   

<del>  Deleted text </del>   

<ins>  Inserted text </ins>   

<sub>  Subscript text </sub>   

<sup>   Superscript text </sup>   

Text styling examples

This text is normal
<b>This text is bold</b>
<strong>This text is important</strong>
<i>This text is italic</i>
<em>This text is emphasized</em>
<u>This text is underlined</u>
<mark>This text is marked</mark>
<small>This is smaller text</small>
This text is <del>deleted</del> then <ins>inserted</ins>
This is <sub>subscript</sub> and <sup>superscript</sup>

Inserting Images

Here's are a few places where you can use HTML to add an image to customize your products:

• website description
• custom text on the customer receipt
• advertiser text on the ticket face

Just copy the code below and change the INSERT IMAGE URL HERE to the actual URL of your image.

<img src="INSERT IMAGE URL HERE">

When you are inserting an image, keep in mind the size of the image. If it's a larger image you'll likely have to add some height & width attributes so that the image doesn't take over the product or template. 

<img src="INSERT IMAGE URL HERE" width="500" height="600">

Additional HTML

A few other HTML tags which might be useful:

• <p>   this defines a new paragraph </p>   
• <br>   this tag defines a line break - no end tag necessary
• <hr>   this inserts a Horizontal Rule (line break with a single pixel line across the text width) - no end tag necessary