Images

This topic contains information about how you can reference images from your HTML or XML documents.

For HTML, the <img> tag is recognized as an image without any other styling in your CSS files:

...
<p> And this is the picture of a happy face: <img src="happy.png" />. </p>
...

For XML, you must add CSS rules that pick up the content of an attribute and use it as a source for the image:

...
<para> And this is the picture of a happy face: <imagedata fileref="happy.png"/>.</para>
...

The following example uses static content on the imagedata :before pseudo-element:

imagedata[fileref]:before {
    content: attr(fileref, url);
}

Note: It is important to use the url keyword when retrieving the attribute value. It signals that the value is a pointer to an external image.

Edit online

Supported Image Types

Oxygen PDF Chemistry supports the following types of raster images:

BMP (Microsoft Windows Bitmap)
GIF (Graphics Interchange Format)
JPEG (Joint Photographic Experts Group)
PNG (Portable Network Graphic)
TIFF (Tag Image Format File)

And the following types of vector images:

SVG (Scalable Vector Graphics)
PDF (PDF Documents)

PDF Images

You can reference PDF images the same way other image files are referenced:

<img src="my_doc.pdf"/>

To point to a single page from your PDF document, use the following syntax (this example points to page 5):

<img src="my_doc.pdf#page=5"/>

Edit online

Setting Image Width and Height

The image size can be determined from the number of pixels of the image, taking the image resolution into account (if available). There are cases where this computed size is not what you need, and you want to specify the size explicitly.

For HTML, it is enough to use the image attributes directly in your document.

<img src="my_image.png" width="300" height="250" />

For an arbitrary XML, you can indicate the image width and height through a rule that matches the element (or its :before or :after pseudo-elements) and sets the width and height CSS properties.

imagedata {
    display: inline;
    content: attr(src, url);
    width: attr(width, length);
    height: attr(height, length);
}

Or, if you use an image as a decorator, you can specify fixed dimensions in the CSS:

chapter title:before {
    content: url("my_artwork.png");
    width: 300px;
}

Note: For static content as in the example above, Oxygen PDF Chemistry tries to use the width and height set on the pseudo-element, then the ones that are set on the parent element, but only if the static content is composed of a single image. Mixing text and images in the content property disables the width and height specification.

If you want to limit the width of the images to a maximum size, you can use the max-width property. The image will be scaled down to fit the maximum size (if it is larger).

imagedata {
    ...
    content: attr(src, url);
    max-width: attr(width, length); 
    ...
}

Edit online

Image Resolution

Some raster images (pixels, not vector) may have a default resolution, set by the designer, using an image-editing software. Usually, the image size and resolution are set to look best on the screen. The advantage of a resolution set in the image itself is that it will have the same effective size on the screen and on paper. For example, if the image has 144 dots in width, and an embedded resolution of 72dpi, it will be two inches on screen and on paper.

The problems start to arise when the resolution is not set on the image, and the PDF processor has to decide what resolution to use to determine the size of the graphic. To solve this, the processor extracts the DPI from:

The image-resolution CSS property associated to the element that contains the image.
The -image-resolution command-line parameter.
The built-in fallback resolution of 96 DPI.

The recommended way to change this is by using the CSS Level 4 image-resolution property:

img {
    image-resolution: 300dpi;
}

Note: The image-resolution is inheritable, so you can associate it to the root element. It does not apply on the page generated content (margin boxes).

:root {
    image-resolution: 300dpi;
}

To reset the image resolution to the one set in the image itself, you can use the constant from-image instead of a DPI value:

title:before {
    content: url("chapter-decorator.png");
    image-resolution: from-image;
}

Tip: To change the resolution for images that appear in a page margin box, set this property on that margin box, or directly on the @page rule, to apply it to all page margin boxes:

@page front-page {
    image-resolution: 600dpi;
}

@page {
    @top-center {
        image-resolution: 600dpi;
        content: url("company-logo.png");
    }
}