Ch. 031 Using Syntax Tags in HTML Field Scripting

The tags used for markup in HTML field scripting are similar to those used in standard HTML (see list of supported tags below) – if you know HTML you will have a head start. Either traditional HTML or newer XHTML style is usually accepted. The most important tags to know are <BR>, <P>, and <FONT>.

Supported tags:

<H1> to <H6>

Note: Numbered lists, bulleted lists and indentations are not supported, and if used, may not render as intended. Formatted text copied and pasted from programs such as Microsoft Word in many cases also will be not rendered properly. It is recommended to paste the text into Notepad and then copy and paste the same text from Notepad (this way it will be pasted without formatting). After that, the user should format the text using the richtext editor controls (again, without numbered/bulleted lists and indentations).

The XHTML equivalent <SPAN> is also understood, with a slightly different syntax. One way to get started is to use the richtext editor to layout your field approximately the way you want it, then go into tag mode (<>) to make fine adjustments, particularly for setting fonts.

When you use the richtext editor, you will generally get <SPAN> tags for areas you have set in a certain font, font size or color. These tags will usually look like this:

<SPAN style="font-face: Arimo; font-size: 12px; font-color: #334455">some text</SPAN>

SPAN tags can always be rewritten as FONT tags, which are more familiar and may be easier to use. Rewriting them as FONT tags is recommended. It is important to remember when using any tags to set the font of some text, that you are limited to the fonts you have uploaded as assets.

SPAN tags have one annoying detail. If you write an HTML string with span tags referring to fonts you have uploaded, then save the field and commit the changes, and re-edit the field: depending on the browser you are using, when you go back to the Field Scripting tag, your font names may disappear from the style attribute of SPAN tags, and you will have to put them back in. The same thing may happen to your specified color attributes. FONT tags are not affected in this way, therefore we recommend you use FONT tags.

Here is an example for HTML scripting, first shown with FONT tags, then with SPAN tags, then how the output will appear. Line breaks are shown only for clarity; you would not type them into the editor box, or you would get extra blank lines in your text.

<font face="trebucbd.TTF">
<font fontsize="12pt">@Name@</font><br>
@City@, @State@ @Zip@<br></font>
<font fontsize="10pt" face="Cousine-Bold">@email@</font><br>

<span style="font face: trebucbd.TTF">
<span style="font size: 12pt">@Name@</span><br>
@City@, @State@ Zip@</span<br>
<span style="font face: Cousine-Bold; font-size: 10pt">@email@</span><br>

Notice that the outer <font> or <span> sets the font (Trebuchet-Bold, uploaded into the assets) for the entire address area, and an inner one sets the font size for the top line. (The other lines get the default font size which is set on the format tab.)

Here is the same example expanded to use various kinds of color.

<font face="trebucbd.TTF" cmyk="100,50,0,18" fontsize="12pt" >@name@</font><br>
<font color="#ff3333">@addressone@<br>
@city@, <font color="green">@state@</font> @zip@</font><br>
<font fontsize="10pt" face="Cousine-Bold">@email@</font><br>
<font spot="gold:0,16,100,7">@website@</font>

<span style="font face: trebucbd.TTF" cmyk="100,50,0,18"><span style="font size: 12pt; color: red">@Name@</span><br>
@City@, <font color="black">@State@</font> Zip@<br></span><span style="font face: Cousine-Bold; font size: 10pt">@email@</span>

There are four different ways of specifying color:

With the cmyk attribute, taking four decimal values separated by commas, or eight hex digits. The decimal value can be specified in the format C,M,Y,K. For example 100,50,0,18 yields the blue color shown above. For increased precision of a cmyk attribute, even fractions may be used – for example 100,50.75,0,18. Hex digits may be used instead of the four decimal values. They are converted from the individual components of the cmyk process color desired. The example given, C=100% M=50% Y=0% K=18% would be specified as “#64320012” in hex digits.

Please note that cmyk is an attribute even in SPANs, and cannot be put into a style segment.

With the color attribute or color style segment, taking six hex digits. These hex digits are the red, green and blue components of the RGB color desired, ranging from zero to 255 each. The example shows a slightly pale red color, Red=255 Green=51 Blue=51.

With a spot color, using the “spot” attribute, a color name, and a cmyk attribute (taking four decimal values separated by commas, or eight hex digits). For example <font spot=“gold:0,16,100,7”> creates a spot color called “gold” using a CMYK appearance of 0% cyan, 16% magenta, 100% yellow, and 7% black. The spot color may not have spaces in its name in the field scripting. The CMYK appearance is used for display on a computer monitor when the output PDF is viewed. However, when the PDF is ripped by a pagesetter, “gold” will be on its own plate. The CMYK values can also be specified using eight hex digits, in the format <font spot=gold:#00106407>. You can further define the shade of ink for a spot color by adding a slash and then 2 hex digits, for example: <font spot=“gold:0,16,100,7/4B”>, which would yield a 75% gold color. If a hex digit contains a letter, that letter must be capitalized in the field scripting.

After you have named the spot color once using the syntax above, the CMYK appearance can be omitted from further uses, for example: <font spot=“gold”>. You can specify and use more than one spot color in the same field scripting area. If the same spot name is accidentally used with more than one CMYK appearance, the first appearance will be used, and if the name of a spot color defined in your field scripting matches the spot color name entered in the Format tab, they will refer to the same spot color.

Note: Spot colors can only be specified within <font> tags and will not work within <span> tags.

With a named color. These RGB colors are taken from the list of standard colors, shown on the next page.

Chart of standard named RGB colors