Non-breaking space in web-to-print documents

Text fields
16/07/2011

Some texts, like phone numbers, make sense only when the whole string stays together. Breaking the groups of digits into separate lines looks odd and confusing. By using non-breaking spaces and non-breaking hyphens we can force the web-to-print and dynamic imaging engine to keep a string of text together.

Lets try it on a business card web-to-print template. We have a paragraph text frame with multiple fields in it (phone, fax and mobile numbers) that are in the same line. Users will have no problems inputting numbers with the same amount of digits as in the template but, what if they need to provide longer numbers?

When the line gets too long for the paragraph frame, the last group of numbers, separated with an empty space, will be thrown into a new line. Needless to say, this does not look good on a business card.

In order to keep the whole phone number together, we need to force the web-to-print system to look at the empty space as non-breaking space. This can easily be done through the field editor.

Changes in the field editor

Navigate to the template page in your web-to-print portal and click on the field’s name to expand its field editor. In the Non-breaking drop down menu, choose Yes and Save your changes.

If you would to enter a longer number now, you’ll see that the whole number will get pushed into a new line rather than just the last group of digits like before.

But, the field editor only forces the variable part to be “glued” together and not the static label “mobile:” which is also part of the same field. This still doesn’t look good on our business card.

What we need to do is force the variable and static parts to stick together. To achieve this, we need to add a non-breaking space in the template file it self.

Changes in the CorelDRAW template file

Open the web-to-print template file in CorelDRAW and activate the non-printing characters visibility in text frames (Top menu / Text / Show Non-printing characters). This will enable you to see symbols for the empty spaces, new paragraphs etc. in the text.

Select the empty space between the static part of the field, which is the label “mobile:” and the variable part of the field, which is the phone number itself.

Navigate to Top menu / Text / Insert Formatting code / Non-breaking Space or hit Ctrl + Shift + Space on your keyboard.

This will replace the empty space symbol with a non-breaking space symbol. Save your template and re-upload it.

Note. You can use this same method to setup non-breaking text from CorelDRAW instead of using the field editor as explained above.

If you try a longer number for the field now, you’ll see that the number including its label will get pushed into a new line keeping the group together.
See also: