2011-06-16

Codici a barre EAN-13 e EAN-8 con HTML CSS e font TrueType

Nel precedente post Barcode, EAN-13, EAN-8, Font TrueType, OpenOffice ho trattato la generazione di codici a barre di tipo EAN-13 ed EAN-8 sulla base di un foglio di calcolo OpenOffice pubblicato nel suo blog da Matteo Moro, che colgo l'occasione per ringraziare di nuovo. Questa volta voglio proporre una soluzione alternativa per utilizzare lo stesso font utilizzato in precedenza, voglio passare per HTML e CSS, per quanto riguarda la generazione dei caratteri rimando all'analisi delle formule presenti nel foglio di calcolo del post precedente, per il mio utilizzo specifico la necessità é stata quella di generare da un programma in Visual C++ il codici HTML che utilizzi un foglio di stile che faccia diventare le stringhe generate in codici a barre.
segue il codice HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<title>Bollini</title>
<link rel='stylesheet' type='text/css' href='bollini.css' />
</head>
<body>
<div class='larghezza'>
<div class='bollino ean8'>
<div class='articolo'>Articolo 1</div>
<div class='barre'>:CDEF*ddjf+</div>
</div>
<div class='bollino ean8'>
<div class='articolo'>Articolo 2</div>
<div class='barre'>:CDEF*ddii+</div>
</div>
<div class='bollino ean8'>
<div class='articolo'>Articolo 1</div>
<div class='barre'>:CDEF*ddjf+</div>
</div>
<div class='bollino ean8'>
<div class='articolo'>Articolo 2</div>
<div class='barre'>:CDEF*ddii+</div>
</div>
<div class='bollino ean8'>
<div class='articolo'>Articolo 1</div>
<div class='barre'>:CDEF*ddjf+</div>
</div>
<div class='bollino ean8'>
<div class='articolo'>Articolo 2</div>
<div class='barre'>:CDEF*ddii+</div>
</div>
</body>
</html>


segue il CSS del file bollini.css:

DIV.larghezza { width: 800px; margin-left: 0px; margin-top: 0px; }
DIV.bollino { width: 120px; height: 90px; text-align: center;  float: left; margin-left: 5px; margin-top: 8px; }
DIV.articolo { font-size: 100%; }
DIV.ean8 DIV.barre { font-family: 'Code EAN13'; font-size: 350%; }


I valori che ho definito nei vari attributi del CSS sono calcolati in base alle mie esigenze che devo rispettare le dimensioni dei bollini adesivi a mia disposizione, per adeguare la pagina risultante alle vostre esigenze dovete solo adeguare quei valori ai vostri bollini. Il primo tag DIV quello che appartiene alla classe larghezza è stato inserito per imporre la larghezza del foglio  che contiene i bollini.

Nessun commento:

Posta un commento