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
{{{scalingText width height horizontalAlignment verticalAlignment text [font]}}}
Width and height
Width and height are both numbers in pixels. The text will be scaled to fit the area defined by these two numbers.
Examples
900x200
200x200
Conclusion
As you can see, the text will be scaled to fit the area while keeping the aspect ratio. This means your text will not be distorted and will always fit the given area.
Horizontal alignment
The horizontal alignment can be either:
leftcenterright
Examples
Left
Center
Right
Right with long text
Conclusion
As you can see, the text will be aligned to the left, center or right of the given area. What we also see is that the alignment will have little to no effect if the text is scaled down to fit the area, since there will be no space left to align the text.
Vertical alignment
The vertical alignment can be either:
topmiddlebottom
Examples
Top
Middle
Bottom
Bottom with short text
Conclusion
As you can see, the text will be aligned to the top, middle or bottom of the given area. What we also see is that the alignment will have little to no effect if the text is scaled down to fit the area, since there will be no space left to align the text.
Text
The text is a string that will be scaled to fit the given area. The text can contain any characters supported by your chosen font.
Font
The font is optional and defaults to ipag. It can be either a custom font or a remote URL to a font file (think of a Google Font). Supported font formats are .ttf, .otf, .woff and .woff2.
Full Examples
Example with default font(ipag)
{{{scalingText 900 200 'center' 'middle' 'My Text'}}}
Example with default font(ipag) and dynamic text
{{{scalingText 900 200 'center' 'middle' myMergeVariable}}}
Example with custom file as font
{{{scalingText 900 200 'center' 'middle' 'My Text' 'Mynerve-Regular.ttf'}}}
Example with remote google font
{{{scalingText 900 200 'center' 'middle' 'Some text' 'https://fonts.gstatic.com/s/pangolin/v11/cY9GfjGcW0FPpi-tWMfN79w.woff2'}}}
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 by incorporating the static text on the user's side when making API calls.
For instance, if you intend to create a scaling text component that warmly welcomes a user with a message like "Welcome, {{name}}, to our company!", you can define a variable named {{welcomeMessage}}. Then, when making an API request, you can concatenate the desired static and dynamic text elements together to form the complete message.