ng:measureFont

ng:measureFont

The built-in function, ng:measureFont can be used in order to calculate the width of a text, when the font and font settings are known. It returns the width in 72 DPI (Dots Per Inch), which means that a value of e.g. 36 means a text width of 0.5 inches. So you need to divide the resulting number with 72 in order to get the width in inches and it should be divided by 72 and multiplied by 2.54 to find the width in cm.

 

So in short: It is not trivial to find out how long a specific text is, if the font is proportional i.e. the letter 'i' is more slim than e.g. 'M' and 'W' So this function can calculate exactly how long the text is.

The function has these parameters:

ng:measureFont(text, [fontName, size, bold, italic])


For the optional parameters: All optional parameters to the left of the parameter must be filled out, if you want to set it.

text

  • The text that is to be measured.

fontName

  • This parameter is optional. The name of the font as shown in the drop down font list e.g. 'Arial'. If the parameter is not specified, then the last used font is selected (which is overridden to the font used by the current element, if the function is executed in a text element).

size

  • The size parameter is optional. This is the font size, that is to be used for the measurement.  If the parameter is not specified, then the last used font size is selected (which is overridden to the font size used by the current element, if the function is executed in a text element).

bold

  • The bold parameter is optional. This is the bold option (i.e. true or false), that is to be used for the measurement.  If the parameter is not specified, then the last used bold option is selected (which is overridden to the bold option used by the current element, if the function is executed in a text element).

italic

  • The italic parameter is optional. This is the italic option (i.e. true or false), that is to be used for the measurement.  If the parameter is not specified, then the last used italic option is selected (which is overridden to the italic option used by the current element, if the function is executed in a text element).

 

Examples

Calculate the font size of the dynamic text

We have a dynamic input text, which we are to insert into an available width of 10 cm. We want to use the arial normal font with largest font size possible while keeping within the 10 cm boundary.

The text is in this case stored in the variable, $text.

We can calculate the width of the text given the font size of 10 like below.

The width in cm. of the $text in Arial normal size 10 is calculated as:

(ng:measureFont($text, 'Arial',10,false(), false()) div 72)*2.54

Adapt the font size to the input text

In this example we want to present a fully variable text in a box, that is 5 cm wide and the text should be as large as possible. We cannot set the font size as an xpath expression, but we can e.g. via a few comparisons decide for a good font size.

This can e.g. be done like below:

 NG2MeasureFont0002

 

In the example we use these design elements:

  • Variable elements to set the text, that we want to present and the width of the container (here 5 cm) in which the text is to be placed.

  • If element to verify how wide the text is with a specific font size.

  • A text element, that use the DynamicSize text style when outputting the text variable.

 

The flow above works like this:

  1. Set the font size to 48 dots.
  2. Test if the text gets too large with size 48: If so set the size to 24.
  3. Test if the text gets too large with size 24: If so set the size to 12.
  4. Test if the text gets too large with size 12: If so set the size to 6.
  5. Output the text

In this way 10 'i' are shown with a large font:

 NG2MeasureFont0003

 

While 10 'M's are shown in a smaller font size:

 NG2MeasureFont0004

    • Related Articles

    • ng:decrypt

      The built-in function, ng:decrypt is linked with the encryption functions: ng:encrypt and the workflow component, Set secure workflow variable. The function, ng:decrypt() can decrypt contents, that was previously encrypted with these functions. The ...

    • ng:resourceExist

      This function checks, if a resource in InterFormNG2 exists or not. The function returns a boolean: true or false. The ng:resourceExist Xpath function has this format: ng:resourceExist(resource,path) where: resource Resource is the type of resource in ...

    • ng:minimum

      InterFormNG2 includes the special built-in XPath function, ng:minimum. This function returns the smallest value of two numeric arguments. The function only accepts two numeric arguments - no more and no less. Examples: ng:minimum(-14,2) returns: -14 ...

    • ng:base64

      The built-in function, ng:base64() converts a string (text) into a base64 based string. This can e.g. be used, if you want to insert any kind of data into an XML node, without substituting any characters, that are not allowed. This function is ...

    • ng:spaceConcat

      The built-in function, ng:spaceConcat(), helps concatenate two strings with a space character automatically inserted between them. Here is an example: This XPath expression: ng:spaceConcat('First name:', 'Jon') outputs this string: First name: Jon ...