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 available not only for
the content
property, but also 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. Please note that this URL is also resolved through the catalog resolver.
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 8.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
. You 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. You 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: