The attr() function: Properties Values Collected from the Edited Document.

The `attr()` function: Properties Values Collected from the Edited Document.

In CSS Level 2.1 you may collect attribute values and use them as content only for the pseudo elements. For instance the :before pseudo-element can be used to insert some content before an element. This is valid in CSS 2.1:

title:before{
  content: "Title id=(" attr(id) ")";
}

If the title element from the XML document is:

<title id="title12">My title.</title>

Then the title will be displayed as:

Title id=(title12) My title.

In oXygen Author the use of attr() function is not available only for the content property but for any other property. This is similar to the CSS Level 3 working draft: http://www.w3.org/TR/2006/WD-css3-values-20060919/#functional. The arguments of the function are:

`attr(`	`attribute_name`,
	`attribute_type`,
	`default_value)`;

	`attribute_name;`
	`attribute_type;`
	`default_value;`

attribute_name

The name of the attribute. This argument is required.

attribute_type

The type of the attribute. This argument is optional. If it is missing the type of the argument is considered string. This argument indicates what is the meaning of the attribute value and helps to perform conversions of this value. oXygen Author accepts one of the following types:

color: The value represents a color. The attribute may specify a color in different formats. oXygen Author supports colors specified either by name: red, blue, green, etc. or as an RGB hexadecimal value #FFEEFF.
url: The value is an URL pointing to a media object. oXygen Author supports only images. The attribute value can be a complete URL, or a relative one to the XML document.
integer: The value must be interpreted as an integer.
number: The value must be interpreted as a float number.
length: The value must be interpreted as an integer.
percentage: The value must be interpreted relative to another value (length, size) expressed in percents.
em: The value must be interpreted as a size. 1 em is equal to the font-size of the relevant font.
ex: The value must be interpreted as a size. 1 ex is equal to the height of the x character of the relevant font.
px: The value must be interpreted as a size expressed in pixels relative to the viewing device.
mm: The value must be interpreted as a size expressed in millimeters.
cm: The value must be interpreted as a size expressed in centimeters.
in: The value must be interpreted as a size expressed in inches. 1 inch is equal to 2.54 centimeters.
pt: The value must be interpreted as a size expressed in points. The points used by CSS2 are equal to 1/72th of an inch.
pc: The value must be interpreted as a size expressed in picas. 1 pica is equal to 12 points.

default_value

This argument specifies a value that is used by default if the attribute value is missing. This argument is optional.

Example 7.7. Usage samples for the attr() function

Consider the following XML instance:

<sample>
    <para bg_color="#AAAAFF">Blue paragraph.</para>
    <para bg_color="red">Red paragraph.</para>
    <para bg_color="red" font_size="2">Red paragraph with large font.</para>
    <para bg_color="#00AA00" font_size="0.8" space="4">
        Green paragraph with small font and margin.</para>
</sample>

The para elements have bg_color attributes with RGB color values like #AAAAFF. We can use the attr() function to change the elements appearance in the editor based on the value of this attribute:

background-color:attr(bg_color, color);

The attribute font_size represents the font size in em units. We can use this value to change the style of the element:

font-size:attr(font_size, em);

The complete CSS rule is:

para{
 display:block;
 background-color:attr(bg_color, color);
 font-size:attr(font_size, em);
 margin:attr(space, em);
}

The document is rendered as: