Isolation label templates
- Last UpdatedSep 25, 2024
- 2 minute read
HTML templates
An Isolation Label HTML template is supplied with OSM. You can use the supplied template as it is, modify it, or create your own label template.
|
Template |
Filename |
Label size |
|---|---|---|
|
Standard template |
isolationlistlabelstandard.html |
283 pts x 383 pts |
Structure of label template
The basic structure of the HTML file for an isolation point label is the following:
<html>
<head>
<style></style>
</head>
<custom-front-page>
<body></body>
</html>
|
Code |
Description |
|---|---|
|
<html> |
<html> at the start and end of label layout. |
|
<head> |
<head> is the html document header. Add style in the style element. |
|
<custom-front-page> |
Optional. Use this element to create a custom front page for each label print. |
|
<body> |
<body> contains the label content for one label. |
HTML example
This is an example of HTML for an Isolation Point label.
<html>
<head>
<title>Label</title>
<style>
.label
{
position: relative;
padding:3px;
height: 383pt;
width: 283pt;
font-family: Arial, Helvetica, sans-serif;
}
.headerclass
{
font-size:24px;
font-weight: 700;
}
.big-text
{
font-size:26px;
}
.med-text
{
font-size:20px
}
.labelrow
{
font-size:14px;
font-weight: normal;
}
.labelcol
{
display: inline-block;
}
.label-comment
{
width: 60%;
}
.qrcode
{
height: 100px;
width: 100px;
}
</style>
</head>
<custom-front-page>
<br /><br /><br />
<div style="text-transform: uppercase; text-align:center;">Printing {{label-num-labels}} label(s) of color: {{label-color}}</div>
</custom-front-page>
<body>
<div class="label" style="{{style-page-break}}">
<div class="headerclass">
<span>{{label-plan-no}}</span><span style="float: right">{{label-list-no}}</span>
<hr />
</div>
<div class="headerclass">
<div>TITLE</div>
<div class="labelrow">{{label-list-title}}</div>
</div>
<table style="width:100%; border-bottom: 1px solid #000">
<tr>
<td style="vertical-align: bottom;">
<div class="headerclass">
<div>TAG</div>
<div class="big-text">{{label-point-tag}}</div>
</div>
</td>
<td style="text-align: right">
<img class="qrcode" src="{{label-qr-image-src}}" />
</td>
</tr>
</table>
<br />
<div class="labelrow">
<div class="labelcol">MAINTENANCE:</div>
<div class="labelcol med-text">{{label-point-pos-maintenance}}</div>
</div>
<div class="labelrow">
<div class="labelcol">START:</div>
<div class="labelcol med-text">{{label-point-pos-start}}</div>
</div>
<div class="labelrow">
<div class="labelcol">P&ID:</div>
<div class="labelcol med-text">{{label-point-pid}}</div>
</div>
<div class="labelrow label-comment">
<div class="labelcol">COMMENT: {{label-point-comment}}</div>
</div>
<div style="position: absolute; bottom:1px; width: 100%;">
<div style="float: right; bottom:1px; padding-right: 10px; font-size: 128pt">
<div class="labelcol">{{label-point-sequence}}</div>
</div>
<div style="text-transform: uppercase; position: absolute; bottom:1px;">
<span style="color:{{label-color}}">{{label-color}} label</span>
</div>
</div>
</div>
</body>
</html>