Mobile Form rendition of an XFA form is almost similar to PDF Form rendition in terms of behavior and appearance. Some of the dissimilarities are discussed in Mobile Form Vs PDF Form post. In this post, I’ll discuss one key difference that a form designer should take care while designing the XFA Template and that is where it is so critical to preview your templates from the designer itself.
Browsers or any screen presentation application for that matter translates all the measurements to pixels as screen can only understand pixels. So if you specify a text in html to be “10 pt (points)” it will be calculated to pixels and then rendered on the screen. Point or any measurement unit conversion to Pixel is not exact science. It depends on various environment parameters like OS, screen resolution of the device etc. Yet, there is a very good approximation for that conversion and that is 1 inch = 72 points = 96 pixels.
If Mobile Form adheres to the standard approximation then one can see the same pixel perfect rendition of the form on PDF, Browser and Designer. We ran few heuristics across all the browsers and devices and it turns out that if we follow the standard scale we might loose on fidelity side due to differences in the imaging model of browsers and PDF.
For example, the default width of borders around the field or any line is “0.0069 inch”, if you design a form using LiveCycle Designer, which is co-incidentally also the most frequently used border thickness. If Mobile Form follow the standard scale that is “96 pixels” for “1 inch”, then this thickness would translate into “0.6624 pixels”. PDF imaging model is sophisticated enough to handle such subpixel sizes. The detail on how it does is beyond the scope of this document. But the browsers ignore anything less than a pixel. So following standard scale will result into no boders or lines in most of the forms.
While conceptualizing the Mobile Form, the main idea was to enable form filling on the browsers rather than matching the pixel perfectness of the PDF. So Mobile Form upscales the form rendition to make “0.0069 inch” thick borders visible. It uses “1 inch = 72 points = 144 pixels“. At this scale the thickness turns out to be close to 1 pixel and that makes all the browsers happy.
Upscaling by 150% has its own side effects that the form designer should be careful of. Here is the two screenshots of the forms (posted at Adobe Forums) in pdf and in html. You can see the effect of scaling in Mobile Form.
PDF Version:
Image may be NSFW.
Clik here to view.
Mobile Form Version:
Image may be NSFW.
Clik here to view.
Since Mobile Form is upscaling everything, you should check your text sizes so they don’t look not too big after upscaling. Another thing to note is image, since Mobile Form upscale it by 150% just make sure its picture quality remains good enough.
