# Image Rendering Reference

## Navigation:

Index General Information Elements Utils Examples

## List Example

An example showing the different usages of the list tag.

- Template: templates/example2.xsl
- Record: records/empty.xml

## List Example (Template)

<xsl:stylesheet version="2.0" >
<xsl:template match="Record" >
<image height="300" width="400" >
<field height="150" width="150" x="10" y="10" >
<text font-family="Arial" font-size="15" line-spacing="10" >
Unordered List:
<ul line-spacing="10" spacing="5" type="disc" wrapped-line-spacing="1" >
<li>
Text Text Text
</li>
<li>
<span font-size="18,16,14" font-weight="bold" >
Text Text Text
</span>
</li>
<li wrapped-line-spacing="15" >
Text Text Text Text
</li>
<li font-size="12" line-spacing="0" >
Text
</li>
<li>
Text Text
</li>
</ul>
</text>
</field>
<field height="150" width="150" x="190" y="10" >
<text font-family="Arial" font-size="16" line-spacing="15" >
Ordered List:
<ol line-spacing="-4" spacing="2" type="DOT_BRACKET" wrapped-line-spacing="1" >
<li>
Text Text Text
</li>
<li font-size="24,22,20,18" font-weight="bold" wrapped-line-spacing="-3" >
Text Text Text
</li>
<li wrapped-line-spacing="20" >
Text Text Text
</li>
<li font-size="10" line-spacing="0" >
Text
</li>
<li>
Text Text
</li>
</ol>
</text>
</field>
<field height="56" width="380" x="10" y="170" >
<text align="center" font-size="12" >
Floating list:
<br>
</br>
<ul float="true" bullet-font-family="Wingdings" spacing="5" type="ü" >
<li>
Text Text 0
</li>
<li>
Text Text 1
</li>
<li>
Text Text 2
</li>
<li>
Text Text 3
</li>
<li>
Text Text 4
</li>
<li>
Text Text 5
</li>
<li>
Text Text 6
</li>
<li>
Text Text 7
</li>
<li>
Text Text 8
</li>
<li>
Text Text
</li>
</ul>
</text>
</field>
<field height="56" width="380" x="10" y="240" >
<text align="center" font-size="12" >
Floating list with image bullets (magnifier):
<ul float="true" spacing="4" bullet-image="../images/magnifier.png" >
<li>
Text Text 0
</li>
<li>
Text Text 1
</li>
<li>
Text Text 2
</li>
<li>
Text Text 3
</li>
<li>
Text Text 4
</li>
<li>
Text Text 5
</li>
<li>
Text Text 6
</li>
</ul>
</text>
</field>
</image>
</xsl:template>
</xsl:stylesheet>

## Generated Image

## Relative Positioning Example

An example showing how to relative position fields and the usage of the max-height attribute.

- Template: templates/example3.xsl
- Record: records/empty.xml

## Relative Positioning Example (Template)

<xsl:stylesheet version="2.0" >
<xsl:template match="Record" >
<image font-size="16" height="300" width="400" >
<field max-height="200" width="200" x="10" y="20" >
<text>
Fixed Position
</text>
</field>
<field max-height="100" width="200" x="10" >
<label>
Relative Position
</label>
</field>
<field max-height="100" width="200" x="10" y="200" >
<text>
Second fixed position
</text>
</field>
<field background-color="black" max-height="50" width="100" x="10" >
<text color="white" >
Relative 1
</text>
</field>
<field background-color="black" max-height="50" width="100" x="10" >
<text color="white" >
Relative 2
</text>
</field>
<field max-height="50" width="100" x="10" >
<text>
Relative 3
</text>
</field>
</image>
</xsl:template>
</xsl:stylesheet>

## Generated Image

## Single and Multi Line Example

This example shows the difference between the label tag (single lines only) and the text tag (multi-lines with auto-wrapping). It also shows how letter spacing changes the text output.

- Template: templates/example4.xsl
- Record: records/empty.xml

## Single and Multi Line Example (Template)

<xsl:stylesheet version="2.0" >
<xsl:template match="Record" >
<image height="300" width="400" >
<field x="10" y="20" width="200" height="105" >
<label font-size="16" font-weight="bold" align="center" text-decoration="underline" padding-bottom="15" >
Single Line label
</label>
<text font-size="14" align="right" line-spacing="8" >
Multi-line text with automatic wrapping, if the text does not fit into one line
</text>
</field>
<field x="10" y="180" width="300" height="100" >
<text letter-spacing="0" >
Normal letter spacing
</text>
<text letter-spacing="-0.08" >
Negative letter spacing
</text>
<text letter-spacing="0.5" >
Positive letter spacing
</text>
</field>
</image>
</xsl:template>
</xsl:stylesheet>

## Generated Image

## Span Example

This example shows the usage of the span tag for formatting text. Including condensing, different font size and text decorations.

- Template: templates/example8.xsl
- Record: records/empty.xml

## Span Example (Template)

<xsl:stylesheet version="2.0" >
<xsl:template match="Record" >
<image height="300" width="400" >
<field height="71" width="380" x="10" y="10" >
<text font-family="Times New Roman" font-size="30" >
Text
<span font-family="Tahoma" font-size="20" font-weight="bold" text-decoration="overline" >
Span
</span>
<span superscript="superscript" font-size="24" >
super
</span>
<span font-size="24" >
normal
</span>
<span font-size="24" superscript="subscript" >
subscript
</span>
</text>
<label font-family="Verdana" font-size="18" >
Label with
<span font-size="26" font-style="italic" text-decoration="underline" >
Span
</span>
<span font-family="Arial" font-size="14" text-decoration="linethrough" >
Span
</span>
</label>
</field>
<field height="60" width="380" x="10" y="90" >
<text condense="1,0.8,0.6,0.4" >
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
</text>
<label font-size="16,12" >
Label Label Label Label Label Label Label Label Label
</label>
<label condense="1,0.8,0.6,0.4" font-size="16" >
Label Label Label Label Label Label Label Label Label
</label>
</field>
<field height="140" width="180" x="10" y="150" >
<text condense="1,0.8,0.6,0.4" font-size="24" >
<ul>
<li>
Text Text Text Text
</li>
<li condense="1" >
Text Text Text Text
</li>
<li>
Text Text Text Text
</li>
<li condense="1" font-size="24,22,20,18,16,14,12" >
Text Text Text Text
</li>
</ul>
</text>
</field>
<field height="140" width="190" x="200" y="150" >
<text condense="1,0.8,0.6,0.4" font-size="24" >
<ol>
<li>
Text Text Text Text
</li>
<li condense="1" >
Text Text Text Text
</li>
<li>
Text Text Text Text
</li>
<li condense="1" font-size="24,22,20,18,16,14,12" >
Text Text Text Text
</li>
</ol>
</text>
</field>
</image>
</xsl:template>
</xsl:stylesheet>

## Generated Image

### Execution Status

Execution Problem
OptionException: 'overline' is not a valid value for option text-decoration. Possible values are: underline, linethrough or none
ImageRenderingException: at.mrdevelopment.toolkit.options.OptionException: Missing option: text-decoration

## CSS Example

This example uses a CSS file to format and define the template. The used CSS file is found under: css/example.css.

- Template: templates/example9.xsl
- Record: records/empty.xml

## CSS Example (Template)

<xsl:stylesheet version="2.0" >
<xsl:template match="Record" >
<image height="300" width="400" >
<css href="../css/example.css" >
</css>
<field max-height="290" width="300" x="10" y="10" >
<label class="labelClass" font-size="16" >
Label class test
</label>
<text class="textClass" id="text1" >
id: #text1, class: textClass
<span class="spanClass" id="span1" >
id: span1, class: spanClass
</span>
<ul class="listClass" id="ul1" >
<li id="liClass" >
class: liClass
</li>
<li id="liClass" >
class: liClass
</li>
</ul>
</text>
</field>
<rect class="rectClass" id="rect1" >
</rect>
</image>
</xsl:template>
</xsl:stylesheet>

## Generated Image

## Table Example

This example shows the usage of a table.

- Template: templates/example10.xsl
- Record: records/empty.xml

## Table Example (Template)

<xsl:stylesheet version="2.0" >
<xsl:template match="Record" >
<image height="300" width="400" >
<field max-height="280" width="380" x="10" y="10" >
<table table-border="2" header-border="5" header-row="true" valign="bottom" >
<row>
<cell table-width="40%" >
<text>
Wide column
</text>
</cell>
<cell>
<text>
Test
</text>
</cell>
<cell>
<label>
Test
</label>
</cell>
<cell>
<label>
Test
</label>
</cell>
<cell>
<label>
Test
</label>
</cell>
</row>
<row>
<cell>
<text font-size="20" >
Wide column
</text>
</cell>
<cell cellpadding="10" >
<label font-size="20" >
Test
</label>
</cell>
<cell>
<text font-size="20" >
Test
</text>
</cell>
<cell>
<label font-size="20" >
Test
</label>
</cell>
</row>
<row cellpadding="15" table-height="100px" valign="top" align="right" >
<cell>
<text font-size="16" >
Wide column
</text>
</cell>
<cell>
<label font-size="16" >
2
</label>
</cell>
<cell>
<text font-size="16" >
3
</text>
</cell>
<cell table-width="100px" >
<text font-size="16" >
Wide column
</text>
</cell>
</row>
<row>
<cell align="right" cellpadding="0" valign="top" >
<text font-size="16" >
Wide column
</text>
</cell>
<cell>
<label font-size="16" >
Test
</label>
</cell>
<cell>
<text font-size="16" >
Test Test Test Test Test
</text>
</cell>
<cell align="center" table-width="100px" valign="center" >
<label font-size="16" >
Test
</label>
</cell>
</row>
</table>
</field>
</image>
</xsl:template>
</xsl:stylesheet>

## Generated Image

## 2.7" server level 3 record example - Chili con carne

A 2.7" template for standard server level 3 records with with raised decimal place and rotated barcode, using Chili con carne record

- Template: templates/example13.xsl
- Record: records/chili-con-carne.xml

## 2.7" server level 3 record example - Chili con carne (Template)

<xsl:stylesheet version="2.0" >
<xsl:template match="Record" >
<xsl:variable name="price" >
<xsl:value-of select="article/field[@key='price']/@value" >
</xsl:value-of>
</xsl:variable>
<xsl:variable name="name" >
<xsl:value-of select="article/field[@key='name']/@value" >
</xsl:value-of>
</xsl:variable>
<xsl:variable name="description" >
<xsl:value-of select="article/field[@key='description']/@value" >
</xsl:value-of>
</xsl:variable>
<image height="176" width="264" font-family="Verdana" >
<field height="80" width="225" x="5" y="7" >
<text font-size="16" font-weight="bold" condense="1.0, 0.9, 0.8, 0.7" line-spacing="-1" padding-bottom="5" >
<xsl:value-of select="$name" >
</xsl:value-of>
</text>
<text font-size="14" font-weight="normal" condense="1.0, 0.9, 0.8, 0.7" line-spacing="-1" padding-bottom="5" >
<xsl:value-of select="$description" >
</xsl:value-of>
</text>
</field>
<field height="100" width="140" x="0" y="75" >
<text align="right" font-family="Lucida Sans" font-size="80" font-weight="bold" condense="1.0" >
<xsl:value-of select="substring-before($price, '.')" >
</xsl:value-of>
</text>
</field>
<field height="80" width="20" x="135" y="95" >
<text align="center" font-family="Lucida Sans" font-size="60" font-weight="bold" condense="1.0" >
.
</text>
</field>
<field height="90" width="80" x="135" y="79" >
<label align="left" font-family="Lucida Sans" font-size="52" font-weight="bold" condense="0.9" >
<xsl:value-of select="substring-after($price, '.')" >
</xsl:value-of>
</label>
</field>
<field align="center" valign="center" rotation="270" height="25" width="150" x="230" y="17" >
<barcode scale="1" humanReadableEnabled="false" type="code128" >
1234567890ABCD
</barcode>
</field>
<field height="14" width="100" y="160" x="5" >
<label align="left" font-size="10" font-weight="normal" >
<xsl:value-of select="article/@articleNumber" >
</xsl:value-of>
</label>
</field>
</image>
</xsl:template>
</xsl:stylesheet>

## 2.7" server level 3 record example - Chili con carne (Record)

<article articleNumber="9000275639319" >
<field key="pricePerUnit" value="4.98" >
</field>
<field key="unit" value="1 kg" >
</field>
<field key="price" value="2.49" >
</field>
<field key="description" value="Dose 500 g" >
</field>
<field key="name" value="Chili con Carne" >
</field>
</article>

## Generated Image

## 2.7" server level 3 record example - Red bull

A 2.7" template for standard server level 3 records with with raised decimal place and rotated barcode, using Red bull record

- Template: templates/example13.xsl
- Record: records/red-bull.xml

## 2.7" server level 3 record example - Red bull (Template)

<xsl:stylesheet version="2.0" >
<xsl:template match="Record" >
<xsl:variable name="price" >
<xsl:value-of select="article/field[@key='price']/@value" >
</xsl:value-of>
</xsl:variable>
<xsl:variable name="name" >
<xsl:value-of select="article/field[@key='name']/@value" >
</xsl:value-of>
</xsl:variable>
<xsl:variable name="description" >
<xsl:value-of select="article/field[@key='description']/@value" >
</xsl:value-of>
</xsl:variable>
<image height="176" width="264" font-family="Verdana" >
<field height="80" width="225" x="5" y="7" >
<text font-size="16" font-weight="bold" condense="1.0, 0.9, 0.8, 0.7" line-spacing="-1" padding-bottom="5" >
<xsl:value-of select="$name" >
</xsl:value-of>
</text>
<text font-size="14" font-weight="normal" condense="1.0, 0.9, 0.8, 0.7" line-spacing="-1" padding-bottom="5" >
<xsl:value-of select="$description" >
</xsl:value-of>
</text>
</field>
<field height="100" width="140" x="0" y="75" >
<text align="right" font-family="Lucida Sans" font-size="80" font-weight="bold" condense="1.0" >
<xsl:value-of select="substring-before($price, '.')" >
</xsl:value-of>
</text>
</field>
<field height="80" width="20" x="135" y="95" >
<text align="center" font-family="Lucida Sans" font-size="60" font-weight="bold" condense="1.0" >
.
</text>
</field>
<field height="90" width="80" x="135" y="79" >
<label align="left" font-family="Lucida Sans" font-size="52" font-weight="bold" condense="0.9" >
<xsl:value-of select="substring-after($price, '.')" >
</xsl:value-of>
</label>
</field>
<field align="center" valign="center" rotation="270" height="25" width="150" x="230" y="17" >
<barcode scale="1" humanReadableEnabled="false" type="code128" >
1234567890ABCD
</barcode>
</field>
<field height="14" width="100" y="160" x="5" >
<label align="left" font-size="10" font-weight="normal" >
<xsl:value-of select="article/@articleNumber" >
</xsl:value-of>
</label>
</field>
</image>
</xsl:template>
</xsl:stylesheet>

## 2.7" server level 3 record example - Red bull (Record)

<article articleNumber="9002490100070" >
<field key="pricePerUnit" value="5.56" >
</field>
<field key="unit" value="1 l" >
</field>
<field key="price" value="1.39" >
</field>
<field key="description" value="Dose 250 ml" >
</field>
<field key="name" value="Red Bull" >
</field>
<field key="sale" value="1" >
</field>
</article>

## Generated Image

## 2.7" server level 3 record example - Vöslauer

A 2.7" template for standard server level 3 records with with raised decimal place and rotated barcode, using Vöslauer record

- Template: templates/example13.xsl
- Record: records/voeslauer.xml

## 2.7" server level 3 record example - Vöslauer (Template)

<xsl:stylesheet version="2.0" >
<xsl:template match="Record" >
<xsl:variable name="price" >
<xsl:value-of select="article/field[@key='price']/@value" >
</xsl:value-of>
</xsl:variable>
<xsl:variable name="name" >
<xsl:value-of select="article/field[@key='name']/@value" >
</xsl:value-of>
</xsl:variable>
<xsl:variable name="description" >
<xsl:value-of select="article/field[@key='description']/@value" >
</xsl:value-of>
</xsl:variable>
<image height="176" width="264" font-family="Verdana" >
<field height="80" width="225" x="5" y="7" >
<text font-size="16" font-weight="bold" condense="1.0, 0.9, 0.8, 0.7" line-spacing="-1" padding-bottom="5" >
<xsl:value-of select="$name" >
</xsl:value-of>
</text>
<text font-size="14" font-weight="normal" condense="1.0, 0.9, 0.8, 0.7" line-spacing="-1" padding-bottom="5" >
<xsl:value-of select="$description" >
</xsl:value-of>
</text>
</field>
<field height="100" width="140" x="0" y="75" >
<text align="right" font-family="Lucida Sans" font-size="80" font-weight="bold" condense="1.0" >
<xsl:value-of select="substring-before($price, '.')" >
</xsl:value-of>
</text>
</field>
<field height="80" width="20" x="135" y="95" >
<text align="center" font-family="Lucida Sans" font-size="60" font-weight="bold" condense="1.0" >
.
</text>
</field>
<field height="90" width="80" x="135" y="79" >
<label align="left" font-family="Lucida Sans" font-size="52" font-weight="bold" condense="0.9" >
<xsl:value-of select="substring-after($price, '.')" >
</xsl:value-of>
</label>
</field>
<field align="center" valign="center" rotation="270" height="25" width="150" x="230" y="17" >
<barcode scale="1" humanReadableEnabled="false" type="code128" >
1234567890ABCD
</barcode>
</field>
<field height="14" width="100" y="160" x="5" >
<label align="left" font-size="10" font-weight="normal" >
<xsl:value-of select="article/@articleNumber" >
</xsl:value-of>
</label>
</field>
</image>
</xsl:template>
</xsl:stylesheet>

## 2.7" server level 3 record example - Vöslauer (Record)

<article articleNumber="9009700145104" >
<field key="pricePerUnit" value="0.35" >
</field>
<field key="unit" value="1 l" >
</field>
<field key="price" value="0.35" >
</field>
<field key="description" value="Vöslauer prickelnd, 1 l PET" >
</field>
<field key="name" value="Vöslauer Mineralwasser" >
</field>
</article>

## Generated Image