pdfChip specific CSS3 aspects

In pdfChip (almost) all valid CSS3 properties can be used. On top of that pdfChip implements a range of additional CSS properties, mainly in order to address certain requirements of the graphic arts industry. This chapter describes these custom CSS properties.

Page geometry boxes

PDF page geometry boxes can be specified inside the CSS @page{} rule. The following custom CSS properties are available:

-cchip-trimbox 
  • -cchip-bleedbox
  • -cchip-cropbox
  • -cchip-artbox

Page geometry boxes are defined in PDF coordinates: 0/0 is left bottom of the page Y goes up (rather than in screen coordinates where center is left top and Y goes down). Each of the page geometry box properties takes four values: The fist two define the coordinates of the lower left corner, the third the width and the forth the height of the box. The MediaBox is defined via the CSS @page size property.

Example for a typical A4 page:

@page {
    size: 230mm 317mm;
    -cchip-trimbox: 10mm 10mm 210mm 297mm;
    -cchip-bleedbox: 7mm 7mm 216mm 303mm;
    -cchip-cropbox: 0mm 0mm 230mm 317mm;
	} 

If a pdfChip-page geometry box property is set then:

  • the appropriate page geometry box is present in the output PDF
  • the appropriate value is available is JavaScript 'page' object

In order to use 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. in order to check if the BleedBox is set on the first page:

if (cchip.pages[1].bleedbox) {
	...do something with bleedbox...
	}

Rotating page content

In pdfChip you can use all CSS positioning properties. This includes properties for rotating page content which are not supported by all web browsers and are therefore not commonly used. For this reason they are listed here.

  • -webkit-transform: Sets the rotation factor
  • -webkit-transform-origin: Defines the origin for rotation

It is usefull to combine these properties with other positioning properties in order to set the origin accordingly.

Example for rotating content 45 degrees counterclockwise with an origin at 20mm / 100 mm (from top of the page).

.rotated-45 {
    position: absolute;
    left: 20mm; bottom: 100mm;
    -webkit-transform: rotate(-45deg);
    -webkit-transform-origin: left bottom;
	}

Page breaks

Another type of CSS properties that are espacially usefull in pdfChip are related to setting or avoiding page breaks, because page breaks naturally play a much more important role in PDF creation than in the desing of web pages.

  • page-break-after
  • page-break-before
  • page-break-inside

Below the most important values for each of these properties are listed

Value name
Result
Applicable in
auto
Default. Automatic page breaks
page-break-after,
page-break-before,
page-break-inside
always
Always insert a page break
page-break-after,
page-break-before
avoid
Avoid page break (if possible)
page-break-after,
page-break-before,
page-break-inside
left
Insert page breaks so that the next page is formatted as a left page
page-break-after,
page-break-before
right
Insert page breaks so that the next page is formatted as a right page
page-break-after,
page-break-before

The example below inserts a page break before the next element.

<p style="page-break-after: always" />

Defining colors for print - CMYK, spot or ICC based color

Device color spaces

CSS Property Value Range Resulting Color Space
-cchip-gray(g) g: 0.0 … 1.0 DeviceGray
-cchip-rgb(r,g,b) rgb: 0.0 … 1.0 DeviceRGB
-cchip-cmyk(c,m,y,k) cmyk: 0.0 … 1.0 DeviceCMYK

Device independent color spaces (ICC based and Lab)

CSS Property
Value Range
Resulting Color Space
-cchip-icc-gray('ICCPATH', g)
g: 0.0 … 1.0
ICC based Gray
-cchip-icc-rgb('ICCPATH', r,g,b)
rgb: 0.0 ... 1.0
ICC based RGB
-cchip-icc-cmyk('ICCPATH', c,m,y,k)
cmyk: 0.0 … 1.0
ICC based CMYK
-cchip-lab(l,a,b)
l: 0.0 … 100.0
ab: -128.0 … +127.0
Lab
-cchip-icc-lab('ICCPATH', l,a,b)
"l: 0.0 … 100.0
ab: -128.0 … +127.0"
ICC based Lab

With 'ICCPATH' path to a local ICC profile.

Spot color (with Alternate color defintions using device dependent or device independent color spaces)

CSS Property Value Range Resulting Color Space
-cchip-gray('NAME',g [, tint]) g: 0.0 … 1.0, tint 0 … 1.0 Spot color NAME, Alternate DeviceGray
-cchip-icc-gray('ICCPATH', 'NAME',g [, tint]) g: 0.0 … 1.0, tint 0 … 1.0 Spot color NAME, Alternate ICC based Gray
-cchip-rgb('NAME',r,g,b [, tint]) rgb: 0.0 … 1.0, tint 0 … 1.0 Spot color NAME, Alternate DeviceRGB
-cchip-icc-rgb('ICCPATH', 'NAME',r,g,b [, tint]) rgb: 0.0 … 1.0, tint 0 … 1.0 Spot color NAME, Alternate ICC based RGB
-cchip-cmyk('NAME',c,m,y,k [, tint]) cmyk: 0.0 … 1.0, tint 0 … 1.0 Spot color NAME, Alternate DeviceCMYK
-cchip-icc-cmyk('ICCPATH', 'NAME',c,m,y,k [, tint]) cmyk: 0.0 … 1.0, tint 0 … 1.0 Spot color NAME, Alternate ICC based CMYK
-cchip-lab('NAME',l,a,b [, tint]) l: 0.0 … 100.0
ab: -128.0 … +127.0, tint 0 … 1.0
Spot color NAME, Alternate Lab
-cchip-icc-lab('ICCPATH', 'NAME',l,a,b [, tint]) l: 0.0 … 100.0
ab: -128.0 … +127.0, tint 0 … 1.0
Spot color NAME, Alternate ICC based Lab

With 'ICCPATH' path to a local ICC profile. Profiles have to be accessible in the file system, it is e.g. not possible to derive them via http.

In order to define colors in a way that a regular Browser will be able to display a color the definitions can be combined with regular HTML/CSS color definitions as shown below.

Example that defines a background color as spot color with the name "Spot" using an alternate color in ICC based CMYK C=0% M=80% Y=80% K=0% and ISO Coated v2 as source color space. The spot color is used with a tint value of 75%.

.background-spot_orange-ICCbasedcmyk {
		background-color: orange;
		background-color: -cchip-icc-cmyk('./ISO Coated v2 (ECI).icc',
		'Orange',0.0,0.8,0.8,0.0, 0.75)
		}

DeviceN color spaces

Defining DeviceN color spaces is a bit more complex than using other color spaces, which comes from the fact that DeviceN in principle is a (multi-component) color space conceptually defined in two steps:

  • First, one or several separation color space have to be established: often spot color colorants, but also process color colorants (one or even several None components could be possible).
  • Second, these separation color space are defined in a certain order and form within the DeviceN color space
  • In addition, the DeviceN color space itself also needs an alternate colorspace definition
@-cchip-devicen{
-cchip-devicen-name: "test-colorspace-name";
-cchip-components: -cchip-cmyk('Cyan'   ,1   ,0   ,0   ,0  )
                           -cchip-cmyk('Magenta',0   ,1   ,0   ,0  )
                           -cchip-cmyk('Yellow' ,0   ,0   ,1   ,0  )
                           -cchip-cmyk('Black'  ,0   ,0   ,0   ,1  )
                           -cchip-cmyk('Fifth colorant'  ,0.5 ,0.5 ,0.5 ,0  )
                           -cchip-cmyk('Sixth colorant'  ,0   ,0.5 ,0.5 ,0.2)
}

The alternates of the components can become defined in all supported spot color definitions (see chapter above).

A mixture of different alternate color spaces may become converted to CMYK-only alternate values.

Using and mixing different channels is similar to the usage of common color spaces, for example:

.devicen.c1  { background-color: -cchip-devicen('test-colorspace-name',1,0,0,0,0,0);  }
 .devicen.c2  { background-color: -cchip-devicen('test-colorspace-name',0,1,0,0,0,0);  }
    .devicen.c3  { background-color: -cchip-devicen('test-colorspace-name',0,0,0,0.25,1,0);  }

Limitations

  • pdfChip colors are implemented only for CSS/HTML but not for JavaScript. The following JavaScript is not possible for pdfChip colors:
  • note.style.color = "rgb(155, 102, 102)"
  • In some situations colors are converted to Device RGB:
    • Rasterization.
    • Colors are acсessed via JavaScript. E.g. if “mydiv.style.backgroundColor” in JavaScript it would be output as RGB even if it has accurately been defined as CMYK via '-cchip-cmyk' in CSS.
  • DeviceN is not supported inside rasterized content.

Extended Graphic State parameters

Special pdfChip parameters

CSS Property Value Range Default value
-cchip-flatness-tolerance >= 0.0 1.0
-cchip-smoothness-tolerance 0.0 … 1.0 -1.0 *)
-cchip-text-knockout 0, 1 0
-cchip-overprint 0, 1 0
-cchip-overprint-mode 0, 1 0
-cchip-stroke-adjustment 0, 1 0
-cchip-rendering-intent absolute-colorimetric, relative-colorimetric, perceptual, saturation relative-colorimetric


*) Special value -1.0 for pdfChip-smoothness-tolerance means “nothing was set in CSS and pdfChip should use it's own default"

Example that switches overprint and overprint mode ON and sets the rendering intent to "saturation" for a color.

.background-spot_orange-ICCbasedcmyk {
    -cchip-overprint: 1;
    -cchip-overprint-mode: 1;
    -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);
}

Transparency

The CSS3 property "opacity" can be used in order to define transparent PDF objects.

CSS Property Value Range Default value
opacity 0.0 ... 1.0 1.0

E.g. style="opacity: 0.5" sets opacity to 50%, the ca value in the result PDF's Extended Graphic State is thereby set to 0.5.

PDF as image in background

A PDF might be used as the background "image" inside of the background property in the same way as in HTML in the img tag. The PDF objects of the background "image" will show up in the destination PDF as page objects (not rasterized).

Please go to the chapter "pdfChip specific HTML aspects" for further information about selecting a PDF page or clipping a PDF page.