|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<meta http-equiv="X-UA-Compatible" content="ie=edge"> |
|
<base href="./"> |
|
<script src="https://unpkg.com/jsbarcode@latest/dist/JsBarcode.all.min.js"></script> |
|
<style type="text/css"> |
|
|
|
body { |
|
font-size: 11px; font-family: 'Arial'; font-stretch: 80%; |
|
margin: 0; |
|
} |
|
|
|
section {border: solid 1px black; |
|
width:57mm; height: 32mm; |
|
page-break-after: always; |
|
position:relative; |
|
overflow: hidden; |
|
float:left; |
|
} |
|
section:not(.n1){zoom:20%;ba} |
|
|
|
p { margin:0 ; padding:0; white-space:nowrap;} |
|
.big, .plant {font-size: 210%; font-weight: bold;} |
|
.med, .prix {font-size: 180%; font-weight: bold;} |
|
|
|
p img {height: 10px; margin: 0 2px; vertical-align: middle;} |
|
p.hauteur img {height: 9px;} |
|
|
|
.plant, .type, .floraison, .comestible, .barcode { |
|
position:absolute; text-align:left; left:1.5mm;} |
|
.hauteur, .soleil, .eau, .sol, .prix { |
|
position:absolute; text-align:right; right:1.5mm;} |
|
|
|
.plant {top:0mm;} |
|
.type {top:6mm;} |
|
.floraison {top:10mm;} |
|
.comestible {top:14mm;} |
|
.hauteur {top:7mm;} |
|
.soleil {top:10mm;} |
|
.eau {top:13mm;} |
|
.sol {top:16mm;} |
|
.barcode {left:3mm; bottom:1.5mm;} |
|
.prix {right:4mm; bottom:3mm;} |
|
|
|
|
|
@media print { |
|
.hidden-print, .hidden-print * {display: none !important;} |
|
section { width:56mm; height: 30mm; border:none; float:none; |
|
margin: 2mm 0 0 1mm;} |
|
section:not(.n1){zoom:unset !important} |
|
} |
|
@page {margin: 2mm 0 0 1mm;} // margin for each printed piece of paper |
|
@page:first { margin-top: 0mm;} //fix for strange extra margin in chrome first page |
|
|
|
</style> |
|
<title>Etiquettes</title> |
|
</head> |
|
<body> |
|
|
|
|
|
|
|
<section class="etq n1"> |
|
<p class="plant">Calendula off.orange</p> |
|
<p class="hauteur">60 cm<img src="pics/height.svg"/></p> |
|
<p class="type">fleur annuelle</p> |
|
<p class="soleil">moyen<img src="pics/sun-shining.svg"/></p> |
|
<p class="floraison"><img src="pics/flower.svg" />de juin à novembre</p> |
|
<p class="eau">peu<img src="pics/water.svg"/></p> |
|
<p class="comestible"><img src="pics/restaurant2.svg"/>fleur, feuille</p> |
|
<svg class="barcode" jsbarcode-value="12345" |
|
jsbarcode-format="CODE128" jsbarcode-height="20" jsbarcode-width="1" jsbarcode-margin="0" jsbarcode-textmargin="-11" jsbarcode-fontoptions="small"> |
|
</svg> |
|
<p class="sol">tous<img src="pics/sand-soil.svg"/></p> |
|
<p class="prix">0.1 €</p> |
|
</section> |
|
|
|
|
|
<section class="etq n2"> |
|
<p class="plant">Calendula off.orange</p> |
|
<p class="hauteur">60 cm<img src="pics/height.svg"/></p> |
|
<p class="type">fleur annuelle</p> |
|
<p class="soleil">moyen<img src="pics/sun-shining.svg"/></p> |
|
<p class="floraison"><img src="pics/flower.svg" />de juin à novembre</p> |
|
<p class="eau">peu<img src="pics/water.svg"/></p> |
|
<p class="comestible"><img src="pics/restaurant2.svg"/>fleur, feuille</p> |
|
<svg class="barcode" jsbarcode-value="12345" |
|
jsbarcode-format="CODE128" jsbarcode-height="20" jsbarcode-width="1" jsbarcode-margin="0" jsbarcode-textmargin="-11" jsbarcode-fontoptions="small"> |
|
</svg> |
|
<p class="sol">tous<img src="pics/sand-soil.svg"/></p> |
|
<p class="prix">0.1 €</p> |
|
</section> |
|
|
|
|
|
<section class="etq n3"> |
|
<p class="plant">Calendula off.orange</p> |
|
<p class="hauteur">60 cm<img src="pics/height.svg"/></p> |
|
<p class="type">fleur annuelle</p> |
|
<p class="soleil">moyen<img src="pics/sun-shining.svg"/></p> |
|
<p class="floraison"><img src="pics/flower.svg" />de juin à novembre</p> |
|
<p class="eau">peu<img src="pics/water.svg"/></p> |
|
<p class="comestible"><img src="pics/restaurant2.svg"/>fleur, feuille</p> |
|
<svg class="barcode" jsbarcode-value="12345" |
|
jsbarcode-format="CODE128" jsbarcode-height="20" jsbarcode-width="1" jsbarcode-margin="0" jsbarcode-textmargin="-11" jsbarcode-fontoptions="small"> |
|
</svg> |
|
<p class="sol">tous<img src="pics/sand-soil.svg"/></p> |
|
<p class="prix">0.1 €</p> |
|
</section> |
|
|
|
|
|
<section class="etq n1"> |
|
<p class="plant">Cosmos bippinatus</p> |
|
<p class="hauteur">50 cm à 1,50 m<img src="pics/height.svg"/></p> |
|
<p class="type">fleur annuelle</p> |
|
<p class="soleil">beaucoup<img src="pics/sun-shining.svg"/></p> |
|
<p class="floraison"><img src="pics/flower.svg" />de mai à octobre</p> |
|
<p class="eau">peu<img src="pics/water.svg"/></p> |
|
<p class="comestible"><img src="pics/restaurant2.svg"/>fleur (en salade)</p> |
|
<svg class="barcode" jsbarcode-value="12345" |
|
jsbarcode-format="CODE128" jsbarcode-height="20" jsbarcode-width="1" jsbarcode-margin="0" jsbarcode-textmargin="-11" jsbarcode-fontoptions="small"> |
|
</svg> |
|
<p class="sol">tous<img src="pics/sand-soil.svg"/></p> |
|
<p class="prix">120 €</p> |
|
</section> |
|
|
|
|
|
<section class="etq n1"> |
|
<p class="plant">Aneth</p> |
|
<p class="hauteur">80 cm<img src="pics/height.svg"/></p> |
|
<p class="type">aromate annuel</p> |
|
<p class="soleil">beaucoup<img src="pics/sun-shining.svg"/></p> |
|
<p class="floraison"><img src="pics/flower.svg" />d'avril à juillet</p> |
|
<p class="eau">peu<img src="pics/water.svg"/></p> |
|
<p class="comestible"><img src="pics/restaurant2.svg"/>feuille, graine,fleurs</p> |
|
<svg class="barcode" jsbarcode-value="991049" |
|
jsbarcode-format="CODE128" jsbarcode-height="20" jsbarcode-width="1" jsbarcode-margin="0" jsbarcode-textmargin="-11" jsbarcode-fontoptions="small"> |
|
</svg> |
|
<p class="sol">leger<img src="pics/sand-soil.svg"/></p> |
|
<p class="prix">3 €</p> |
|
</section> |
|
|
|
|
|
|
|
<div class="hidden-print"> |
|
<button id="btnPrint">Print</button> |
|
<script src="script.js"></script> |
|
<script type="text/javascript"> |
|
JsBarcode(".barcode").init(); |
|
//JsBarcode("#bc1").init(); |
|
</script> |
|
</div> |
|
</body> |
|
</html> |
|
|
|
|
