PDF/XFA - Gradient and Pattern Border shading in HTML5 Conversions

Last week we received some dynamic XFA files from our customers who were trying to convert JavaScript supported dynamic XFA forms to HTML5 using our online converter tool.

We found some background colors were missing and some got altered in our conversion; The reason for erroneous output was the background colors of the forms on those files were shaded as gradient and patterned.

So I thought of writing this article to overcome this issue for any developers who are interested in implementing a custom XFA to HTML5 conversion tool.

Gradient Shading

In XFA Gradient shading is mainly divided into linear and radial; Both linear and radial shading require two colors to shade the rectangle area.

<border>
<edge presence=”hidden”/>
<fill>
<linear type=”toTop”>
<color value=”0,0,255″/> //end color
</linear>
<color value=”255,255,0″/> //start color
</fill>
</border>

In above example xml shade the area linearly from bottom to top starts with yellow and ends as blue; if color values is not present then main color would be black and secondary would be white;

Linear shading allows toTop, toBottom, toRight and toLeft shading capabilities to XFA borders; However radial shading allows either toEdge or toCenter as parameters.

Pattern Shading

Similar to linear shading pattern shading requires main fill color and shading color (a color which displays in pattern area)

Pattern allows horizontal, vertical, diaglonal left, diagonal right and cross diagonal parameters for shading the content;

Hopefully you have found this information is useful and if you would like to know any further information please read XFA specification 3.3 for additional content and further information.