Styling Images

The CSS 2.1 does not specify how an element can be rendered as an image. To overpass this limitation, Oxygen XML Editor plugin supports a CSS Level 3 extension allowing to load image data from a URL. The URL of the image must be specified by one of the element attributes and it is resolved through the catalogs specified in Oxygen XML Editor plugin.

image{
    display:block;
    content: attr(href, url);
    margin-left:2em;
}

Our image element has the required attribute href of type xs:anyURI. The href attribute contains an image location so the rendered content is obtained by using the function:

attr(href, url)

The first argument is the name of the attribute pointing to the image file. The second argument of the attr function specifies the type of the content. If the type has the url value, then Oxygen XML Editor plugin identifies the content as being an image. If the type is missing, then the content will be the text representing the attribute value.

Oxygen XML Editor plugin handles both absolute and relative specified URLs. If the image has an absolute URL location (for example: "http://www.oasis-open.org/images/standards/oasis_standard.jpg") then it is loaded directly from this location. If the image URL is relative specified to the XML document (for example: "images/my_screenshot.jpg") then the location is obtained by adding this value to the location of the edited XML document.

An image can also be referenced by the name of a DTD entity that specifies the location of the image file. For example, if the document declares an entity graphic that points to a JPEG image file:

<!ENTITY graphic SYSTEM "depo/keyboard_shortcut.jpg" NDATA JPEG>

and the image is referenced in the XML document by specifying the name of the entity as the value of an attribute:

<mediaobject>
    <imageobject>
        <imagedata entityref="graphic" scale="50"/>
    </imageobject>
</mediaobject>

The CSS should use the functions url, attr and unparsed-entity-uri for displaying the image in the Author mode:

imagedata[entityref]{
    content: url(unparsed-entity-uri(attr(entityref))); 
}

To take into account the value of the width attribute of the imagedata and use it for resizing the image, the CSS can define the following rule:

imagedata[width]{
  width:attr(width, length);
}