Question: Can I make all or part of a text field use a different opacity?
Answer: Yes. To change the opacity of an entire text field, use the Opacity setting in the field’s Format tab. However, to have only part of a scripted field use a different opacity than the rest of the field, you can use the color attribute of a <font> tag in Field Scripting.
Required format: <font color="CMYK/A specs in hexadecimal format">
In addition to the standard CMYK elements, an "A" element must also be specified, separated from the CMYK elements by a forward slash. This "A" stands for Alpha Transparency, which is what is used in eDocBuilder to render opacity in a PDF. If "A" is at 100%, the text has no transparency. If "A" is at 0%, the text is completely transparent.
Unlike the typical <font cmyk=”C,M,Y,K”> tag, where C, M, Y, and K are replaced with their percentages between 0 (none) and 100 (all), the numbers in the <font color=”CMYK/A”> tag are hex color parts from 0 (none) to 255 (all). So, any CMYK/A numbers on your typical 0-100 scale must be converted to their percentile counterparts on a 0-255 scale. Then those numbers must be converted to their hexadecimal equivalent.
There are many online hex calculators that can do the conversion for you. One popular converter is found here: https://www.rapidtables.com/convert/number/decimal-to-hex.html.
Practical Examples
Example A:
This example shows how you can specify in HTML field scripting that part of your text be in 100% cyan at 50% opacity.
Step 1 process: Figure out how you would specify the CMYK part in an ordinary <font cmyk=“C,M,Y,K”> tag without needing to specify transparency.
Step 1 result: 100,0,0,0
Step 2 process: Add the /A part (opacity) of CMYK/A to the result in step 1.
Step 2 result: 100,0,0,0/50
Step 3 process: Use the CMYK/A values as percentages applied to 255. Round to the nearest whole number.
Step 3 breakdown:
- The C value is 100%. 100% of 255 is 255.
- The A value is 50%. 50% of 255 is 127.5, which rounds up to 128.
- The remaining values are 0%. 0% of 255 is still 0.
Step 3 result: 255,0,0,0/128
Step 4 process: Convert each of the numbers from Step 3 into hexadecimal format, with 2 digits. An online hex calculator may be helpful for this step.
Step 4 breakdown:
- The C value, 255, converts to “ff”
- The A value, 128, converts to “80”
- The remaining values, which are all 0, convert to “00”
Step 4 result: ff,00,00,00/80
Step 5 process: Add a # symbol to the beginning and remove all commas between. DO NOT remove the slash.
Step 5 result: #ff000000/80
Step 6 process: Put the step 5 result as the color attribute of a <font> tag.
Step 6 result: <font color=“#ff000000/80”>
Example B
This example shows how to use field scripting to make part of your text completely transparent.
Step 1 result: 0,0,0,0 (Normal 1-100 CMYK values)
Step 2 result: 0,0,0,0/0 (Step 1 + slash and A value in normal 1-100)
Step 3 result: 0,0,0,0/0 (Step 2 results as percentages of 255.)
Step 4 result: ff,ff,ff,ff/ff (Step 3 results in hex format)
Step 5 result: #ffffffff/ff (Step 4 results in correct format for color attribute of <font> tag)
Step 6 result for final script: <font color=”#ffffffff/ff”>
Example C:
Try it yourself! For this example, have part of your text field use a rose color at 80% opacity. The CMYK value of the rose color is:
C: 0
M: 80
Y: 60
K: 20
Scroll down for the answer!
<font color=”#00cc9933/cc”>
Note: This involves more complicated calculations than standard font tags in field scripting. If you need assistance implementing this, our Professional Services team will be able to help you.