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; |
The name of the attribute. This argument is required.
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:
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
.
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.
The value must be interpreted as an integer.
The value must be interpreted as a float number.
The value must be interpreted as an integer.
The value must be interpreted relative to another value (length, size) expressed in percents.
The value must be interpreted as a size. 1 em is equal to the font-size of the relevant font.
The value must be interpreted as a size. 1 ex is equal to the height of the x character of the relevant font.
The value must be interpreted as a size expressed in pixels relative to the viewing device.
The value must be interpreted as a size expressed in millimeters.
The value must be interpreted as a size expressed in centimeters.
The value must be interpreted as a size expressed in inches. 1 inch is equal to 2.54 centimeters.
The value must be interpreted as a size expressed in points. The points used by CSS2 are equal to 1/72th of an inch.
The value must be interpreted as a size expressed in picas. 1 pica is equal to 12 points.
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: