The oxy_label() Function

The oxy_label() function can be used in conjunction with the CSS content property to change the style of generated text.

The arguments of the function are property name - property value pairs. The following properties are supported:

text - This property specifies the built-in form control you are using.
width - Specifies the width of the content area using relative (em, ex), absolute (in, cm, mm, pt, pc, px), and percentage (followed by the % character) length units. The width property takes precedence over the columns property (if the two are used together).
color - Specifies the foreground color of the form control. If the value of the color property is inherit, the form control has the same color as the element in which it is inserted.
background-color - Specifies the background color of the form control. If the value of the background-color property is inherit, the form control has the same color as the element in which it is inserted.
styles - Specifies styles for the form control. The values of this property are a set of CSS properties:
- font-weight, font-size, font-style, font
- text-align, text-decoration
- width
- color, background-color
- link - For more information about this property see the link property section.
```
element{
    content: oxy_label(text, "Label Text", styles,
      "font-size:2em;color:red;link:attr(href);");
}
```
Instead of using the values of the styles property individually, you can define them in a CSS file as in the following example:
```
* {
    width: 40%;
    text-align:center;
}
```
Then refer that file with an import directive, as follows:
```
elem {
  content: oxy_label(text, 'my_label', styles, "@import 'labels.css';")
}
```
CAUTION:
Extensive use of the styles property may lead to performance issues.

If the text from an oxy_label() function contains new lines, for example oxy_label(text, 'LINE1\A LINE2', width, 100px), the text is split in two. Each of the two new lines has the specified width of 100 pixels.

Note: The text is split after \A, which represents a new line character.

You can use the oxy_label() function together with a built-in form control function to create a form control based layouts.

An example of a use case is if you have multiple attributes on a single element and you want use form controls on separate lines and style them differently. Consider the following CSS rule:

person:before {
  content: "Name:*" oxy_textfield(edit, '@name', columns, 20) "\A Address:" oxy_textfield(edit, '@address', columns, 20)
}

Suppose you only want the Name label to be set to bold, while you want both labels aligned to look like a table (the first column with labels and the second with a text field). To achieve this, you can use the oxy_label() to style each label differently.

person:before {
  content: oxy_label(text, "Name:*", styles, "font-weight:bold;width:200px") oxy_textfield(edit, '@name', columns, 20) "\A "
           oxy_label(text, "Address:", styles, "width:200px") oxy_textfield(edit, '@address', columns, 20)
}

Tip: A code template is available to make it easy to add the oxy_label function with the Content Completion Assistant by pressing Ctrl Space (Command Space on OS X) and select the

oxy_label code template..