Useful code snippets for defining barcode objects, using pdfChip specific CSS, importing PDF pages, setting page size and other things
The content offered below implements a very simple idea but could turn out to be real time saver for users creating their own HTML, JavaScript and CSS to be processed by pdfChip: it compiles a bunch of code snippets that deal with pdfChip specific ways of using spot colors, defining barcode objects, or making use of custom pdfChip specific CSS, JavaScript functions, and so on.
It will be still be necessary to read the documentation, and to know what one is doing - but once one gets the hang of it, the only piece missing often is: exactly which syntax has to be used to do this... Just keep the snippets provided below (both in text form as well as a downloadable file) open in your text editor, and help yourself whenever there is the need.
Page size and geometry
@page {
/* define ArtBox, TrimBox, BleedBox, CropBox as needed; optional */
/* valid units are px, pt, in, mm */
/* Note: the use of ArtBox is not recommended */
-cchip-artbox: 10mm 110mm 210mm 297mm;
-cchip-trimbox: 10mm 110mm 210mm 297mm;
-cchip-bleedbox: 7mm 107mm 216mm 303mm;
-cchip-cropbox: 0mm 100mm 230mm 317mm;
/* Size of the page, equivalent to MediaBox, origin always at 0/0 */
size: 230mm 417mm;
}
In order to work with page geometry boxes in JavaScript the syntax is:
cchip.pages[i].artbox
cchip.pages[i].bleedbox
cchip.pages[i].trimbox
cchip.pages[i].cropbox
e.g.
if (cchip.pages[1].bleedbox) {
...do something with bleedbox...
}
Click to copy
Defining fonts
/*
Note: for reliable results
- associate one font file with one font-family name
- avoid any automatic or heuristic mapping of fonts or font faces
*/
@font-face {
font-family: 'SourceCodePro-Regular';
src: url('./fonts/SourceCodePro-Regular.otf');
}
@font-face {
font-family: 'OpenSans-CondLight';
src: url('./fonts/OpenSans-CondLight.ttf');
}
Click to copy
Placing PDF pages
The URL for PDF supports the following features:
<URL>#page=<PAGE-NUM>&box=<BOXNAME>&boxadj=<LEFT>,<TOP>,<RIGHT>,<BOTTOM>
Place the first page of "sample.pdf"
<img src="sample.pdf">
Places the second page of sample.pdf
<img src="sample.pdf#page=2">
Places the second page of sample.pdf, imported page area is based on its TrimBox
<img src="sample.pdf#page=2&box=trim">
Places the second page of sample.pdf, imported page area is based on its TrimBox, slightly enlarged on left and right sides by 3mm
<img src="sample.pdf#page=2&box=trim&boxadj=3mm,0mm,3mm,0mm">
Import PDF pages ... :
in HTML:
<img src=“sample.pdf#page=2”>
in CSS:
background:url(“sample.pdf#page=2”)
background-image:url(“sample.pdf#page=2”)
Click to copy
Rotation and other transforms
.rotated-45 {
position: absolute;
left: 20mm; bottom: 100mm;
-webkit-transform: rotate(-45deg);
-webkit-transform-origin: left bottom;
}
/* recommended resource:
https://developer.mozilla.org/en-US/docs/Web/CSS/transform
*/
Click to copy
Setting pdfChip color definitions
.pdfchip_colordefinitions {
/*
DeviceCMYK examples
provide 4 values in the range 0.0..1.0
*/
color: cyan;
color: -cchip-cmyk(1.0,0.0,0.0,0.0);
color: magenta;
color: -cchip-cmyk(0.0,1.0,0.0,0.0);
color: yellow;
color: -cchip-cmyk(0.0,0.0,1.0,0.0);
color: black;
color: -cchip-cmyk(0.0,0.0,0.0,1.0);
/*
Lab D50 example
provide 3 values, first value in the range 0.0..100.0,
the 2nd and 3rd value in the range -127.0 .. 128.0
*/
color: pink;
color: -cchip-lab(67.74,70.68,-10.31);
/*
DeviceGray example
provide 1 value in the range 0.0..1.0
Note: 0.0 is black, and 1.0 is white
*/
color: gray;
color: -cchip-gray(0.3);
/*
ICC based Gray example
provide 1 value in the range 0.0..1.0
Note: 0.0 is black, 1.0 is white
first argument must be a valid path to the respective ICC profile
*/
color: darkgray;
cchip-icc-gray('../iccprofiles/gamma_2-2.icc', 0.3);
/*
ICC based RGB example
provide 3 values in the range 0.0..1.0
first argument must be a valid path to the respective ICC profile
*/
color: green;
color: -cchip-icc-rgb('../iccprofiles/sRGBIEC61966-2.icc', 0.0,0.5,0.0);
/*
ICC based CMYK example
provide 4 values in the range 0.0..1.0
first argument must be a valid path to the respective ICC profile
*/
color: green;
color: -cchip-icc-cmyk('../iccprofiles/PSOcoated_v3.icc', 1,0.0,1,0.0);
/*
spot color examples with CMYK alternate space
provide
- name of the spot color
- 4 values in the range 0.0..1.0
- [optional] tint value for the spot color
Note: for DeviceGray or ICC based alternate spaces adjust per syntax from above
*/
color: orange;
color: -cchip-cmyk('Spot P 34-8 C', 0.0,0.75,0.98,0.0);
color: green;
color: -cchip-cmyk('Forest Green', 0.81,0.0,0.92,0.22);
color: purple;
color: -cchip-cmyk('Deep Purple', 0.84,1.0,0.0,0.12);
color: magenta;
color: -cchip-cmyk('Magenta', 0.0,0.1,0.0,0.0);
color: black;
color: -cchip-cmyk('Die line', 0.0,0.0,0.0,1.0);
}
/*
First, define a -cchip-devicen rule to establish a DeviceN colorspace
Consists of:
• -cchip-devicen-name: name by which the DeviceN colorspace is referenced inside CSS
• -cchip-components: definitions of the colorants of the DeviceN colorspace via spot color definitions
In order to actually use the color, see '-cchip-devicen' below
*/
@-cchip-devicen{
-cchip-devicen-name: "test-colorspace-name";
-cchip-components:
-cchip-cmyk('Cyan', 1.0, 0.0, 0.0, 0.0)
-cchip-cmyk('Magenta', 0.0, 1.0, 0.0, 0.0)
-cchip-cmyk('Yellow', 0.0 ,0.0 ,1.0 ,0.0)
-cchip-cmyk('Black', 0.0, 0.0, 0.0, 1,0)
-cchip-cmyk('Fifth colorant', 0.5, 0.5, 0.5, 0.0)
-cchip-cmyk('Sixth colorant', 0.0, 0.5, 0.5, 0.2);
}
.pdfchip_devicen_colorspace {
/*
DeviceN color example
provide
- name of the DeviceN color space
- as many values in the range 0.0..1.0 as there are colornats in the DeviceN color space
*/
color: -cchip-devicen('test-colorspace-name', 1.0, 0.0, 0.0, 0.0, 0.0, 0.0);
}
Click to copy
Setting PDF ExtGState parameters (overprint, etc.)
.pdfchip_extgstate {
-cchip-flatness-tolerance : 5.0; /* >= 0.0; default: 1.0 */
-cchip-smoothness-tolerance: 0.0; /* 0.0 … 1.0; default: -1.0 */
-cchip-text-knockout: 1; /* 0 or 1; default: 0 */
-cchip-overprint: 1; /* 0 or 1; default: 0 */
-cchip-overprint-mode: 0; /* 0 or 1; default: 0 */
-cchip-stroke-adjustment: 1; /* 0 or 1; default: 0 */
-cchip-rendering-intent: perceptual;
/* absolute-colorimetric or relative-colorimetric or perceptual
or saturation; default: relative-colorimetric */
opacity: 0.5 /* 0.0..1.0; default: 1.0 */
mix-blend-mode: multiply;
background-blend-mode: difference;
/* normal | multiply | screen | overlay | darken | lighten | color-dodge |
color-burn | hard-light | soft-light | difference | exclusion | hue |
saturation | color | luminosity; default: normal */ }
Example:
.background-spot_orange-ICCbasedcmyk {
-cchip-overprint: 1;
-cchip-overprint-mode: 0;
-cchip-rendering-intent: absolute-colorimetric;
background-color: orange;
background-color: -cchip-icc-cmyk('./ISO Coated v2 (ECI).icc', 'Orange',0.0,0.8,0.8,0.0, 0.75);
}
Click to copy
Barcode objects (for 1D and 2D codes)
======= Syntax example for barcode objects: =======
<object type="application/barcode">
<param name="data" value="123456789012">
<param name="type" value="EAN 13">
<param name="modulewidth" value="0.33mm">
<param name="barwidthreduction" value="10%">
<param name="textplacement" value="none">
</object>
- important:
- height and width may be provided through CSS styling (e.g.: style="width:30mm; height:30mm;")
- for professional use it is best though to use modulewidth to define the size
- for any inkjet or similar processes, substantial barwidth redution will normally be necessary!
- need help or guidance? send an email to [email protected]
======= Types of barcodes / 2D Codes: =======
<param name="type" value="Code 11">
<param name="type" value="Code 2 of 5 Standard">
<param name="type" value="Code 2 of 5 Interleaved">
<param name="type" value="Code 2 of 5 IATA">
<param name="type" value="Code 2 of 5 Matrix">
<param name="type" value="Code 2 of 5 DataLogic">
<param name="type" value="Code 2 of 5 Industry">
<param name="type" value="Code 39">
<param name="type" value="Code 39 Full ASCII">
<param name="type" value="EAN 8">
<param name="type" value="EAN 8 + 2 Digits">
<param name="type" value="EAN 8 + 5 Digits">
<param name="type" value="EAN 13">
<param name="type" value="EAN 13 + 2 Digits">
<param name="type" value="EAN 13 + 5 Digits">
<param name="type" value="EAN/UCC 128">
<param name="type" value="UPC 12">
<param name="type" value="Codabar 2 Widths">
<param name="type" value="Code 128">
<param name="type" value="DP Leitcode">
<param name="type" value="DP Identcode">
<param name="type" value="ISBN 13 + 5 Digits">
<param name="type" value="ISMN">
<param name="type" value="Code 93">
<param name="type" value="ISSN">
<param name="type" value="ISSN + 2 Digits">
<param name="type" value="Flattermarken">
<param name="type" value="GS1 DataBar (RSS-14)">
<param name="type" value="GS1 DataBar Limited (RSS)">
<param name="type" value="GS1 DataBar Expanded (RSS)">
<param name="type" value="Telepen Alpha">
<param name="type" value="UCC 128">
<param name="type" value="UPC A">
<param name="type" value="UPC A + 2 Digits">
<param name="type" value="UPC A + 5 Digits">
<param name="type" value="UPC E">
<param name="type" value="UPC E + 2 Digits">
<param name="type" value="UPC E + 5 Digits">
<param name="type" value="USPS PostNet 5 (ZIP)">
<param name="type" value="USPS PostNet 6 (ZIP+cd)">
<param name="type" value="USPS PostNet 9 (ZIP+4)">
<param name="type" value="USPS PostNet 10 (ZIP+4+cd)">
<param name="type" value="USPS PostNet 11 (ZIP+4+2)">
<param name="type" value="USPS PostNet 12 (ZIP+4+2+cd)">
<param name="type" value="Plessey">
<param name="type" value="MSI">
<param name="type" value="SSCC 18">
<param name="type" value="LOGMARS">
<param name="type" value="Pharmacode One-Track">
<param name="type" value="PZN7">
<param name="type" value="Pharmacode Two-Track">
<param name="type" value="Brazilian CEPNet">
<param name="type" value="PDF417">
<param name="type" value="PDF417 Truncated">
<param name="type" value="MaxiCode">
<param name="type" value="QR-Code">
<param name="type" value="Code 128 Subset A">
<param name="type" value="Code 128 Subset B">
<param name="type" value="Code 128 Subset C">
<param name="type" value="Code 93 Full ASCII">
<param name="type" value="Australian Post Custom">
<param name="type" value="Australian Post Custom2">
<param name="type" value="Australian Post Custom3">
<param name="type" value="Australian Post Reply Paid">
<param name="type" value="Australian Post Routing">
<param name="type" value="Australian Post Redirect">
<param name="type" value="ISBN 13">
<param name="type" value="Royal Mail 4 State (RM4SCC)">
<param name="type" value="Data Matrix">
<param name="type" value="EAN 14 (GTIN 14)">
<param name="type" value="VIN / FIN">
<param name="type" value="Codablock-F">
<param name="type" value="NVE 18">
<param name="type" value="Japanese Postal">
<param name="type" value="Korean Postal Authority">
<param name="type" value="GS1 DataBar Truncated (RSS)">
<param name="type" value="GS1 DataBar Stacked (RSS)">
<param name="type" value="GS1 DataBar Stacked Omnidir (RSS)">
<param name="type" value="GS1 DataBar Expanded Stacked (RSS)">
<param name="type" value="PLANET 12 digit">
<param name="type" value="PLANET 14 digit">
<param name="type" value="Micro PDF417">
<param name="type" value="USPS Intelligent Mail Barcode (IM)">
<param name="type" value="Plessey Bidirectional">
<param name="type" value="Telepen">
<param name="type" value="GS1 128 (EAN/UCC 128)">
<param name="type" value="ITF 14 (GTIN 14)">
<param name="type" value="KIX">
<param name="type" value="Code 32">
<param name="type" value="Aztec Code">
<param name="type" value="DAFT Code">
<param name="type" value="Italian Postal 2 of 5">
<param name="type" value="DPD">
<param name="type" value="Micro QR-Code">
<param name="type" value="HIBC LIC 128">
<param name="type" value="HIBC LIC 39">
<param name="type" value="HIBC PAS 128">
<param name="type" value="HIBC PAS 39">
<param name="type" value="HIBC LIC Data Matrix">
<param name="type" value="HIBC PAS Data Matrix">
<param name="type" value="HIBC LIC QR-Code">
<param name="type" value="HIBC PAS QR-Code">
<param name="type" value="HIBC LIC PDF417">
<param name="type" value="HIBC PAS PDF417">
<param name="type" value="HIBC LIC Micro PDF417">
<param name="type" value="HIBC PAS Micro PDF417">
<param name="type" value="HIBC LIC Codablock-F">
<param name="type" value="HIBC PAS Codablock-F">
<param name="type" value="QR-Code 2005">
<param name="type" value="PZN8">
<param name="type" value="DotCode">
<param name="type" value="Han Xin Code">
<param name="type" value="USPS Intelligent Mail Package (IMpb)">
<param name="type" value="Swedish Postal Shipment Item ID">
Click to copy
Optional parameters for barcode objects
======= Optional parameters (default values are enclosed with **asterisks**): =======
<param name="format" value="A##B###C&">
String formatting
Provides control over how strings are formatted. For more details see section 4.6 Format in the Barcode Reference.
<param name="modulewidth" value="0.33mm">
**-1**, units: mm, in, mils, **pixel**
Module width
Provides control over the Module width. For more details see section 4.2 Module Width in the Barcode Reference.
<param name="hres" value="600">
**-1**
Horizontal resolution
Providing the horizontal resolution triggers an optimisation of the module width for best possible consistency of bars and gaps in the barcode and thus the barcode readability. For more details see section 4.2 Module Width in the Barcode Reference.
<param name="vres" value="600">
**-1**
Vertical resolution
Providing the vertical resolution triggers an optimisation of the module width for best possible consistency of bars and gaps in the barcode and thus the barcode readability. For more details see section 4.2 Module Width in the Barcode Reference.
<param name="textplacement" value="none">
above, **below**, none
Text placement
Provides control over the positioning of the human readable text relative to the barcode proper. Applies only to 1D codes.
<param name="textdistance" value="0.5mm">
**-1**, units: mm, in, mils, **pixel**
Text distance
Provides control over the distance of the human readable text from the barcode proper. Applies only to 1D codes.
<param name="bearerbars" value="topbottom">
**none**, top, bottom, topbottom
Bearer bars
Provides control over the presence and position of bearer bars. For more details see section 3.3 Barcode Glossary, Bearer Bars, 6.1.43 ITF-14 and 6.1.66 UPC SCS (Shipping Container Symbols)in the Barcode Reference.
<param name="bearerwidth" value="0.5mm">
**-1**, units: mm, in, mils, **pixel**
Bearer width
Provides control over the width of bearer bars. For more details see section 3.3 Barcode Glossary, Bearer Bars, 6.1.43 ITF-14 and 6.1.66 UPC SCS (Shipping Container Symbols)in the Barcode Reference.
<param name="notchheight" value="0.5mm">
**-1**, units: mm, in, mils, **pixel**
Notch height
Provides control over the notch height. For certain types of barcodes like e.g. "EAN 13", some of the bars are typically longer than the rest of the bars. This parameter provides control over by how much they will be longer.
<param name="barwidthreduction" value="1%">
**0**, units: %, mm, in, mils, **pixel**
Bar width reduction (BWR)
Provides control over the bar width reduction. For more details see section 4.3 Bar Width Reduction (Pixel Shaving) in the Barcode Reference.
<param name="quietzoneleft" value="0.5">
**0**
Quiet zone left
Provides control over the quiet zone on the left. For more details see section 4.4 Quiet Zone in the Barcode Reference.
<param name="quietzoneright" value="0.5">
**0**
Quiet zone right
Provides control over the quiet zone on the right. For more details see section 4.4 Quiet Zone in the Barcode Reference.
<param name="quietzonetop" value="0.5">
**0**
Quiet zone top
Provides control over the quiet zone at the top. For more details see section 4.4 Quiet Zone in the Barcode Reference.
<param name="quietzonebottom" value="0.5">
**0**
Quiet zone bottom
Provides control over the quiet zone at the bottom. For more details see section 4.4 Quiet Zone in the Barcode Reference.
<param name="quietzoneunit" value="X">
**X**, mm, in, mils, pixel. X: multiples of module width
Quiet zone unit
Provides control over the unit used for controlling the quiet zone. For more details see section 4.4 Quiet Zone in the Barcode Reference.
Click to copy
Minimal boilerplate HTML file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> ->->-> useful title <-<-<- </title>
<!-- referenced CSS or script files (adjust as needed):
<link rel="stylesheet" href="./folder/file.css" type="text/css" />
<script src="./folder/file.js"></script>
-->
<script>
function cchipPrintLoop() {
cchip.printPages( 1 ); // limit output to 1 page
console.log ("One and only page created (output is limited to 1 page)");
}
</script>
<style>
body, * {
background: transparent;
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
@page {
size: 216mm 303mm; /* A4 page with room for 3mm bleed on each side) */
-cchip-trimbox: 3mm 3mm 210mm 297mm;
-cchip-bleedbox: 0mm 0mm 216mm 303mm;
-cchip-cropbox: 0mm 0mm 216mm 303mm;
}
</style>
</head>
<body>
<div>
<p>Put some content here, or use JavaScript to generate some, or include some SVG</p>
<svg width="100mm" height="100mm" viewBox="0 0 100 100">
<g transform="translate(20,-5) scale(0.7)" >
<rect x="0" y="0" height="100" width="100" style="stroke:none; fill: -cchip-cmyk(0.2,0.0,0.0,0.0)"></rect>
<polygon
points="65,10 5,96 97,39 10,39 80,97"
stroke-linejoin="round"
style= "
fill:-cchip-cmyk('My spot color',0.4,0.0,0.8,0.0);
fill-rule:nonzero;
-cchip-overprint: 1;
stroke:-cchip-cmyk(0.1,0.9,0.0,0.0);
stroke-width:2;"/>
</g>
</svg>
</div>
</body>
</html>
Click to copy
Minimal boilerplate SVG file
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="216mm" height="303mm">
<style type="text/css">
@page {
size: 216mm 303mm; /* A4 page with room for 3mm bleed on each side) */
-cchip-trimbox: 3mm 3mm 210mm 297mm;
-cchip-bleedbox: 0mm 0mm 216mm 303mm;
-cchip-cropbox: 0mm 0mm 216mm 303mm;
}
</style>
<defs></defs>
<rect x="1.5mm" y="1.5mm"
width="213mm" height="300mm"
stroke="-cchip-cmyk(1.0,0.2,0.0,0.0)"
fill="-cchip-cmyk(0.0,0.1,1.0,0.0)"
style= "-cchip-overprint: 1; -cchip-overprint-mode: 1;"
>
</rect>
<foreignObject x="25mm" y="20mm" width="80mm" height="80mm">
<object xmlns="http://www.w3.org/1999/xhtml"
type="application/barcode"
style="margin: 0; padding: 0;
background-color:-cchip-cmyk(0.0,0.0,0.0,0.0);
color: -cchip-cmyk(1.0,0.0,1.0,0.4);">
<param name="type" value="Data Matrix"> </param>
<param name="data" value="Created from SVG file."> </param>
<param name="modulewidth" value="1mm"> </param>
<param name="quietzoneleft" value="1"> </param>
<param name="quietzoneright" value="1"></param>
<param name="quietzonetop" value="1"></param>
<param name="quietzonebottom" value="1"></param>
<param name="quietzoneunit" value="X"></param>
</object>
</foreignObject>
</svg>
Click to copy