Text fields with paragraph indents have reduced width

[Andy]

Define a text field and set paragraph indents to something greater than zero. After publish to web, indents look ok but border of field is narrower by the amount of indents. Looks fine without PowerPac enabled.

[Clifton]

This IS technically a bug, but not necessarily a PowerPac or ToolBook issue.

Let me explain what is happening here.

1. When you create a page for export without the PowerPac enabled, the export process creates non-MSIE content which attempts to get around the box-sizing style issue by subtracting the padding (text indents) from the width of the object and then creates the export based on the result.
   
   
   So, if I draw a field at 300px and set the text indent (padding) to 0.5 inches (or 48px in the exported content), the result is that ToolBook calculates the size of the object as 300-48 or 252px.
   
   However, ToolBook is still quirky here because if the object has a rectangle, then the ToolBook forgets that it has to further subtract the width of the border in order to get exact cross-browser compatibility with respect to the size of the object as represented in the export. Plus, ToolBook just forgets about top and bottom padding and refuses to export those settings at all. All of this creates inconsistencies.
   
   The problem gets more complex with the IE content created. In this case, ToolBook creates quirks mode content which does not recognize a box-sizing style property at all.
   
2. When ToolBook content has the PowerPac enabled, the content is flagged as fully standards compliant. To ensure the any styles set by the developer retain expected sizing, we load a CSS stylesheet to force the box-sizing model to always use border-box as its sizing method. This way, no matter how we style something in the export using PowerPac functions like pgStyleObject(), we will get consistent results. The problem here occurs when you set a text indent on a field in author mode. ToolBook truncates the field width, while the PowerPac sets the box-sizing to border-box, which causes the field to appear incorrect in the export.

So, what is the solution?
Avoid using any of the ToolBook text indent features in author mode. Instead, add the function pgStyleObject() for the on load page event of objects that require text indents and specify them using this function. The results will always be perfect in all browsers.

Example:
Draw a field of any size and give it a name like "testCase". Add the PowerPac function pgStyleObject() for the on load page event of the field and set the paddingLeft style property as shown below.





pgStyleObject() fixes ToolBook padding issues

Image 1.png (47.87 KiB) Viewed 4621 times


You can review the official standards regarding the padding property at this link:
http://www.w3schools.com/css/css_padding.asp
All aspects of the padding property are supported using the PowerPac function pgStyleObject(), including paddingTop, paddingBottom, paddingLeft, and paddingRight.

While we have explored ways to allow developers to set text indents at author mode, the problem has been that ToolBook only exports left padding anyway and the other padding values are dropped at the ToolBook level. Plus ToolBook does not size fields correctly at export time when a border is set. While some of these anomalies are corrected by the PowerPac, we decided to drop adding more code to fix additional issues and instead we make the recommendation to simply avoid using text indents at author level.

BTW: Using pgStyleObject() has lots of other benefits for text fields. You can change lineHeight, letterSpacing, and wordSpacing to further stylize the look and feel of the content. Of course, you can use stylesheets and userProperty() to set class names for your fields, but this is beyond the scope of this little article.

[Clifton]

We've made some changes so that the PowerPac can now support the text indents and line spacing in ToolBook authoring mode. These adjustments are available in v12.353 or greater. Please let us know your findings.

Be advised that it is still far more versatile and reliable to use pgStyleObject() to set text indents as well as many other style setting for ToolBook objects.

[Andy]

Thanks for the thorough explanation. I tried the beta and it addresses this issue in IE although not in Firefox 34.
I think I'll follow your advice and avoid indents.

[Clifton]

Please try v12.353 beta or greater.