[New 4.1.18] HTML Printer Improvements

###Changes

  • HTML Printer correctly handles <T> and <F> tags.
  • HTML Printer supports <BAR> tag.
  • HTML Printer supports <BMP> tag.
  • <div> and <span> HTML tags implemented.

###Styling

By using <div> and <span> tags it is possible to use inline html styles for formatting output.

[LAYOUT]
-- General layout
<div style="font-weight:bold;font-size:13px">
<BMP>c:\logo.bmp
<T>Ticket
<L00>Date:{TICKET DATE}
<L00>Time:{TIME}
{ENTITIES}
<L00>Ticket No:{TICKET NO}
<F>-
{ORDERS}
<F>=
<EB>
{DISCOUNTS}
[<J10>Total Gift:|{ORDER STATE TOTAL:Gift}]
<J10>Total:|{TICKET TOTAL}
{PAYMENTS}
<DB>
<F>=
<div style="font-size:15px;text-align:center;font-family:'Tahoma'">T H A N K   Y O U </div>
</div>
[DISCOUNTS]
<J00>{CALCULATION NAME} %{CALCULATION AMOUNT}|{CALCULATION TOTAL}

[PAYMENTS]
<J00>{PAYMENT NAME}|{PAYMENT AMOUNT}

[ORDERS]
-- Default format for orders
<J00>- {QUANTITY} {NAME}|{TOTAL}
{ORDER TAGS}

[ORDERS:Gift]
-- Format for gifted orders
<J00>- {QUANTITY} {NAME}|**GIFT**
{ORDER TAGS}

[ORDERS:Void]
-- Nothing will print for void lines

[ORDER TAGS]
-- Format for order tags
<J00> * {ORDER TAG NAME} | {ORDER TAG PRICE}

[ENTITIES:Table]
-- Table entity format
<L00>Table: {ENTITY NAME}

[ENTITIES:Customer]
-- Customer entity format
<J00>Customer: {ENTITY NAME} | {ENTITY DATA:Phone}

I’ve used two nested div tags to style whole ticket and Thank You line of the ticket.

Surrounding entire layout with a <div> tag will enable changing font size, weight and font type of whole ticket. You can use different styles for sections by configuring additional divs. <span> tag does the same but supports less styling options. The difference is it won’t line break content.

Supported Styles:

font-family
font-style
font-weight
font-size
color
background-color
text-decoration-underline
text-indent
text-align
margin-top
margin-right
margin-bottom
margin-left
padding-top
padding-right
padding-bottom
padding-left
border-color-top
border-color-right
border-color-bottom
border-color-left
border-width-top
border-width-right
border-width-bottom
border-width-left

3 Likes

HTML printing doesn’t seem to respect the line character count. My printer is 42 characters wide but the <F>- tag is being printed on more than one line.


Something else, which could be due to an error i the template. Nothing is being printed for {ENTITIES} and {ORDERS} tags.

Can someone please provide a working template so it can be easily modified and used as needed, thanks.

this is my layout, its a rather simple one, but it works fine for me…

[LAYOUT]
-- General layout
<ec>
<BMP>C:\Users\AleyGer\Documents\SambaPOS4\Images\Logo_Rest_BN.bmp
<T>
<EB>
<C00>Restaurante da Praça
<DB>
<L>
<J00>Data:{TICKET DATE}|Hora:{TIME}
<LF>
{ENTITIES}
<LF>
<F>-
{ORDERS}
<F>=
<EB>
[<J00>Sub-Total:|R${PLAIN TOTAL}]
{DISCOUNTS}
{TAXES}

<LF>
<J10>Total:|R${TICKET TOTAL}

{PAYMENTS}

<DB>
<F>=
<LF>
<C10>Obrigado pela preferença
<LF>
<LF>
<LF>

[DISCOUNTS]
<LF>
<J00>{CALCULATION NAME} %{CALCULATION AMOUNT}|R${CALCULATION TOTAL}

[TAXES]
<LF>
<J00>{TAX NAME} %{TAX RATE}|R${TAX AMOUNT}

[PAYMENTS]
<J00>{PAYMENT NAME}|R${PAYMENT AMOUNT}

[ORDERS]
-- Default format for orders
<J00>- {QUANTITY} x {NAME}|R${TOTAL PRICE}
{ORDER TAGS}

[ORDERS:Gift]
-- Format for gifted orders
<J00>- {QUANTITY} {NAME}|Promoçao
{ORDER TAGS}

[ORDERS:Void]
-- Nothing will print for void lines

[ORDER TAGS]
-- Format for order tags
<J00> * {ORDER TAG NAME} | {ORDER TAG PRICE}

[ENTITIES:Tables Restaurante]
-- Table entity format
<C00>{ENTITY NAME}

[ENTITIES:Customer]
-- Customer entity format
<J00>Cliente: {ENTITY NAME} | {ENTITY DATA:Phone}

@slabos on that font size it can print 30 chars per line so you should either:

  • lower 42 to 30
  • use smaller font size.

The template I’ve posted on top should work now. I wanted to show just the Layout part but I’ve added remaining parts.

ok, thanks, this is what i was looking for >> http://doc.sambapos.org/doku.php/en/guide/printformattingcommands

@slabos we have better version of this document here

Tags <C00> and <J00> not centering and justifying text. <div style=> works fine. below is my template. Did I get anything wrong ?

From what I understand <C00>Check #{TICKET NO} should center the 3rd line.

[LAYOUT]
-- General layout
<div style="font-weight:normal;font-size:15px;font-family:'Tahoma'">
<BMP>C:\Users\int4\Documents\SambaPOS4\Images\abunaim.png
<L00>Date:{TICKET DATE}
<L00>Time:{TIME}

<C00>Check #{TICKET NO}
<F> 
<F> 
{ORDERS}
<F> 
<F> 
<EB>
{DISCOUNTS}
[<J10>Total Gift:|{ORDER STATE TOTAL:Gift}]
<div style="font-weight:bold;font-size:20px;font-family:'Tahoma'">
<J10>Total:|[=FF('{TICKET TOTAL}','#,##0.##')]
</div>
{PAYMENTS}
<F> 
<div style="font-size:20px;text-align:center;font-family:'Tahoma'">شكراً</div>
</div>
<DB>
[DISCOUNTS]
<J00>{CALCULATION NAME} %{CALCULATION AMOUNT}|{CALCULATION TOTAL}

[PAYMENTS]
<J00>{PAYMENT NAME}|[=FF('{PAYMENT AMOUNT}','#,##0.##')]

[ORDERS]
-- Default format for orders
<L00>{QUANTITY}	 {NAME}		[=FF('{TOTAL}','#,##0.##')]
{ORDER TAGS}

[ORDERS:Gift]
-- Format for gifted orders
<L00>{QUANTITY} {NAME}|**GIFT**
{ORDER TAGS}

[ORDERS:Void]
-- Nothing will print for void lines

[ORDER TAGS]
-- Format for order tags
<J00> * {ORDER TAG NAME} | {ORDER TAG PRICE}

[ENTITIES:Table]
-- Table entity format
<L00>Table: {ENTITY NAME}

[ENTITIES:Customer]
-- Customer entity format
<J00>Customer: {ENTITY NAME} | {ENTITY DATA:Phone}

@slabos it will be hard to align lines when you use both Latin and Arabic fonts on same ticket output. Can you try changing windows regional settings to Arabic?

as never puts me a space between two formats?

 <div style="font-size:15px;text-align:center;font-family:'Tahoma'">
    <C00>Ristorante Il Brigante
    </div>
    <div style="font-weight:bold;font-size:16px">
    <C00>via roma
    <C00>Tel. 6543634
    <F>-

I have a problem for my ticket, I copied your template and used it but it appeared as below

b

what could possibly be the problem ?

It looks like a printer setting. Its wrapping it and the justification is not printing correctly. Check your character width you may have a font either too large or character width set too large.

Can I use div style text align to add a couple spaces not align it completely to the left right or center?

Use something like:

<div style="margin-left:10px">

or

<div style="padding-left:10px">

(Html) how I can change and increase the printing size to A4 paper