Basic (and Useful) HTML & CSS

• <br /> Break (to start on a new line)• <hr /> Horizontal Rule (a line across the page)• <img /> Image (more on this later)• <ul></ul> Unordered List (bullet points)• <ol></ol> Ordered List (numbered)• <li></li> List Item (required for both unordered and ordered lists)

• <span></span> Enclosures to format fonts• <div></div> Enclosures to format borders (block-level)• <blockquote></blockquote> Similar to DIV, but has inherent properties• style="" Tag for formatting (always separate and end with a semi-

colon)• font-family: arial, "Times New Roman" "Free 3 of 9"• font-size: 12pt, 2em - play with the numbers until you find the right size• text-align: left, center, right (adjusts font within a block, not the block

itself)• border: 2px solid #000000 (2 pixels think, solid [not dashed], and

black [only option?])

Inserting an Image

• <img /> Image • src="" path to image (required)• width="" width in pixels (optional)• height="" height in pixels (optional)

Examples:Image on the web: <img src="http://chelmsfordlibrary.org/assets/images/cpl-

logo.gif" />Image on local computer: <img src="file:///C:/Users/reference01/Desktop/cpl-logo.gif

" />Image on network server: <img src="file:///S:\public_html\assets\images\cpl-logo.gif

" />

• Images from the web or network are easy to update once for all computers, but might be slower• Images from local computer are most reliable, but also need to be managed on each individual

computer• Slashes can go either way• Remember receipt printers (probably) only print in black & white• This lets you add QR codes, too!

Printing a Scannable Barcode

• This lets you print a barcode on a receipt, that can be scanned• Saves staff from retyping patron barcode if they don't have they're card• Will work with self-check machines too• Can use for patron or item barcodes

• Requires a barcode font to be installed on the computer (each computer)• http://www.dafont.com/barcode-font.font (shows plain text under barcode lines)• http://www.dafont.com/3of9-barcode.font (just barcode lines)

• Code to make it happen:<span style="font-family:'Free 3 of 9';font-size:40pt;">*%PATRON_BARCODE%*</span>(replace "font-family" with other font name if using a different style of barcode)

• Tips:• Barcode number (%PATRON_BARCODE%) must have an * before and after it to trigger scanner• There is a minimum size that will work, so play around• Will still work if the receipt gets crinkled

Special Macros and Conditional Printing

• “Sum” - Allows for summing of values throughout a slip. The sum sources can include a single leading non-digit character, such as a dollar sign. The fixed="2" in the example below tells the code to always include exactly 2 decimal places when placing the sum into the field.

In the “Line Item” box: <span style="display: none;" sum="sum1">%price%</span>

In the “Footer” box:

<blockquote style="font-size:11pt;text-align:center;border: 2px solid #000000;">

Cost of buying these items:<br />$<span sumout="sum1” fixed="2"></span><br />

Cost of using the library:<br />Priceless!</blockquote>

• This does not display in the preview window, or when not using Mozilla print strategy

Special Macros and Conditional Printing

• “Swap Slip” - Allows changing out parts of a slip based on a different part of the slip.

<div altgroup="print1" altid="main"><span altcheck="print1">%some_replace%</span><!-- Other slip stuff --></div><div altgroup="print1" altid="alt1" style="display: none"><!-- Alt slip stuff --></div><div altgroup="print1" altid="alt2" style="display: none"><!-- Second alt slip stuff --></div><div style="display: none"><span alt="print1" altshow="alt1">Code1</span><span alt="print1" altshow="alt2">Code2</span></div>

• This does not display in the preview window, or when not using Mozilla print strategy

Special Macros and Conditional Printing

• More information is on the MassLNC site at:

http://masslnc.cwmars.org/node/2528

• A PDF version is at:

http://www.chelmsfordlibrary.org/temp/EGReceiptTricks-MVLC.pdf