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 on this property see the link property section.
```
element{
    content: oxy_label(text, "Label Text", styles,
      "font-size:2em;color:red;link:attr(href);");
}
```

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_editor() and oxy_label() functions together to create a form control based layout.

Let's say we want to edit two attributes on a single element using form controls on separate lines:

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

We can use oxy_label() if we want only the Name label to be bold and also to properly align the two controls:

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..