Referencing images and other graphics such as embedded SVG and MathML.

Graphics

Referencing images and other graphics such as embedded SVG and MathML.

Images

Images are very important in any printed material. This section contains information about
how you can reference them 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: <imgsrc="happy.png" />. </p>
...

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

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

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

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

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.

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.

<imgsrc="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 pseudo elements :before or :after) and
sets the width and height CSS properties.

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.

Background Images

You can use background images to impose a texture. You can use them to decorate an entire
page, or a specific element from your document.

Supported properties:

background-image

background-repeat

background-position

Page Background Images

You can set a background for a page. Usually you do this for the cover page to impose a full
page artwork, or to add graphics to the header and footer of the page. Here is an example of
how can you do it for the page:

Note: It is better to use SVG for the page artworks. It does not suffer from pixelation. If
you are limited to using raster images, you can fine tune their resolution by using the
image-resolution property.

Note: To separate the header and footer from the main content using visual effects (lines,
shadows, etc.), you can use a full page size artwork in SVG and set it to the default
page:

Element Background Images

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 it 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 in the image, and the PDF
processor has to decide what resolution to use in order 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 command line parameter -image-resolution .

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 on 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:

rbga - Used for transparent colors by specifying each color channel and the
transparency. For example, the following would result in the background color being magenta
since the red color from the parent div element will be visible through the
blue color of the p
element: