Scaling text

Scaling text is a function with which you can scale text to fit a certain width or height. This is particularly useful when you want to be certain the text fits a certain area (e.g. a name). The function scales the text so it fits the area, whilst maintaining the aspect-ratio. This means the text will not be distorted.

If you are using the editor to add scaling text, you can ignore all code examples on this documentation page, but the images and positioning are still relevant. Positioning and resizing the scaling text property can easily be done using the editor in the same way any element works.

Syntax

We have updated this element to be more flexible. For more information for migrating to the new syntax see this page.

The current syntax uses a custom html element which can be fully customized by css.

<print-one-scaling-text id='example-id'>{{text}}</print-one-scaling-text>

Extra information

Our text scaling function exclusively accommodates variable inputs, restricting the direct addition of static text before or after the variable. However, there is a workaround to achieve this. You can edit the scaling text element in the code editor to include prefixes and suffixes. It should look like: <print-one-scaling-text id='example-id' ...>Hey {{name}}!</print-one-scaling-text>

Currently our editor does not support this so unexpected things could happen by using this.