Skip to main content
Skip table of contents

Base text rendering commands

At the high level, the text rendering requires a definition of two commands: txt and fnt, to select a text string to render and font properties respectively.

Text command override src command, that is, if both txt and src commands are provided, the layer will be rendered as text and src command would be ignored.

Text box

Text rendering happens relative to the currently defined text box area. Text box is a rectangle, with position and sizing defined using pos and sz commands. Both commands require two numbers, separated by comma:

  • pos defines the coordinates of the top-left corner of the text box area within the current canvas: main canvas or a group, relative to the top-left corner of the active canvas

  • sz defines the width and height dimensions of the text box area

Text box rotation

The text area can be rotated by applying rot command, which specifies the rotation angle in degrees.

For example:

https://fx.images.drivecommerce.com/api/v1/drive/image/?layer&src=BOX1000X500CF0F0F0FF&layer&fnt=f:NotoSans-Bold.ttf;s:100;a:c;va:c;&txt=Hello&sz=1000,500&rot=30

image-20241130-012923.png

Text box scaling

scl scaling command is not applicable to text areas and has no effect on text layers. Instead of scaling, adjust the font size parameter accordingly.

Text clipping

Unless tight layout or automatic text sizing is enabled, the text box borders are soft borders. Depending on a combination of factors such as font size, alignment, sizing mode, number of lines, the text may overrun the allowed area.

First layer and canvas dimensions

As mentioned in the Canvas and layers chapter, canvas dimensions must be defined before anything can be rendered. For image layers, if canvas dimensions are not yet known, the canvas will inherit the first image sizing.

However, canvases cannot inherit dimensions from text layers. In the image is intended to contain only text, it is recommended to use a BOX as the first layer to define the overall size.

For example:

https://fx.images.drivecommerce.com/api/v1/drive/image/?layer&src=BOX1000X500CF0F0F0FF&layer&fnt=f:NotoSans-Bold.ttf;s:100;a:c;va:c&txt=Hello%5C%5CsWorld&sz=1000,500

image-20241130-011228.png

Font

fnt command can be used to define properties of text to be rendered. This is a compound command which allows to specify multiple aspects of rendered text:

  • Font

  • Font size

  • Alignment

Font rendering parameters are described in detail in the command reference:

Text rendering options

Text

The text to be rendered is specified using txt command. In the basic form, the parameter value specifies the text be rendered as-is, for example txt=Hello.

For example:

https://fx.images.drivecommerce.com/api/v1/drive/image/?layer&src=BOX1000X500CF0F0F0FF&layer&fnt=f:NotoSans-Bold.ttf;s:100;a:c;va:c&txt=Hello\\sWorld&size=1000,500

Additionally, text elements or spans can have properties applied individually using Text rendering options | Text-runs formatting. For example, to show a part of a string in superscript with a different size and color:

https://fx.images.drivecommerce.com/api/v1/drive/image/?layer&src=BOX1000X500CF0F0F0FF&layer&fnt=f:NotoSans-Bold.ttf;s:100;a:c;va:c&txt=Hello{{sr:0.5;y:-50;c:c0c0ffff}}World{{/}}&sz=1000,500

image-20241130-012316.png

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.