Label: oxy_label() Function

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 that was used to insert it.
• 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 that was used to insert it.
• 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.

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)
}