# Text Available properties: | Property | Description | | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **payload** | [Go to Payload documentation](#payload) | | **color** | [Go to Color documentation](#color) | | **background\_color** | Same as `color`, but allows to add a background behind the text | | **background\_padding** | [Go to Background Padding documentation](#background-padding) | | **font\_size** | Number. **Force font size in pixels** (must be > 1) | |

font
font\_weight

| [Go to Font documentation](#font) | | **line\_height** | Number. **Force line height in percentage** (must be > 1). *This parameter is only applied when the text is a multiline one.* | | **skew\_y** | Number: between `-20` and `20`. **Slant text on the y axis** | | **alignment** | [Go to Alignment documentation](#text-alignment) | |

stroke\_width
stroke\_color

| [Go to Stroke documentation](#stroke) | |

shadow\_color
shadow\_blur
shadow\_offset\_x
shadow\_offset\_y

| [Go to Shadow documentation](/rest-api/generation/element-properties.md#shadow) | | **auto\_resize** |

Boolean: Automatically adjusts the text size to fit within its container
(If set to true, min\_font\_size must be defined)

| | **min\_font\_size** |

Number: Specifies the minimum font size allowed when auto-resizing text.
(auto\_resize must be set to true)

| | **text\_transform** |

String: Force the text to be transformed to one of the following formats:

| |

side\_border
side\_border\_thickness

side\_border\_padding

side\_border\_color

side\_border\_rounded

| [Go to Text Side Border documentation](#font-1) | | **max\_lines** | Number > 0. Maximum number of lines allowed. | | **text\_harmony** | Boolean. Attempts to balance line lengths with a maximum variance of 20% between lines. *The system first adjusts character spacing (±20), then reduces the font size (up to -10px) if needed.* | | **text\_truncation** | Boolean. If the text still does not fit, it is truncated and an ellipsis (...) is added at the end of the line. | **Example of a decorated text:**
"payload": "Lorem i<c=#ff0000><u>p</u></c>su<s>m</s> is simply <c=#1A47FF>dummy</c> <u>text</u>"
"color": "#ffffff"
"background_color": "#8A4F4F"
"background_padding": "2 6"
"skew_y": -4
"alignment": "middle center"
"font_size": 30
"line_height": 150
"shadow_color": "#000080"
"shadow_blur": 3
"shadow_offset_x": 0
"shadow_offset_y": 6
"payload": "Lorem i<c=cmyka(0,100,100,0)><u>p</u></c>su<s>m</s> is simply <c=cmyka(90,72,0,0,100)>dummy</c> <u>text</u>"
"color": "cmyka(0,0,0,0,100)"
"background_color":"cmyka(0,43,43,46)"
"background_padding": "2 6"
"skew_y": -4
"alignment": "middle center"
"font_size": 30
"line_height": 150
"shadow_color":cmyka(100,100,0,50,100)"
"shadow_blur": 3
"shadow_offset_x": 0
"shadow_offset_y": 6
## Color `color`: The text color, can be a **monochrome** ([6-8 digits hexa color](/rest-api/generation/element-properties/root.md#image-background)) , **gradient** ([Go to Linear Gradient documentation](/rest-api/generation/element-properties/root.md#linear-gradient)), or **cmyka** (only for print, [cmyka](/rest-api/generation/element-properties/root.md#cmyka)) **Examples:** | `"color": "#1A47FF"` | ![](/files/omhlLpM4mmZ4hlT47Ek2) | | ----------------------------------------------------------------------- | -------------------------------- | | `"color": "linear-gradient(0% 0% 100% 0%,0% #0a68ff 1,100% #ff0000 1)"` | ![](/files/SGFXra0ameNThjP7dddf) | | `"color": "cmyka(89,51,0,13,100)"` | ![](/files/omhlLpM4mmZ4hlT47Ek2) | ## Payload `payload` is the text content. **Constraints:** * Cannot be empty * 2048 characters maximum ### **Line breaks** By default, line breaks are automatically computed from the available space. **You can however force line breaks by adding `\n`**. {% hint style="info" %} *Beware of external integrations (Zapier, Integromat, Airtable): as they support multi text line inputs this parameter won't be interpreted on the Abyssale generation side.* {% endhint %} **Example:** | `"payload": "Lorem Ipsum\nis simply dummy text"` | ![](/files/VteYXgb3uBNG0xThmcwS) | | ------------------------------------------------ | -------------------------------- | ### **Partial Text Decorations** Text markups can be added to underline, colorise, strike of change font weight on specific part of the payload. *(it resembles html markup but is not)* {% hint style="warning" %} **Text markups will override global text decoration settings.** If you only want to change the global text style, do not use markups -> use global text properties. {% endhint %} **Available markups:**
TypeMarkup
Color

<c={hexaColor}>my colored part</c>

Example:

<c=#FF0000>Lorem Ipsum</c> is simply dummy text

Font weight

<w={weight}>my changed part</w>

{weight}: Integer representing the font weight (100 to 900):
thin (100), normal (400), bold (700), heavy (900)).

If the font does not support the given weight, it fallbacks to the current weight.

Example:

<w=900>Lorem Ipsum</w> is simply dummy text

Underline

<u>my underline part</u>

Example:

<u>Lorem Ipsum</u> is simply dummy text

Underline with colored line

<u={hexaColor}>my colored underline part</u>

Example:

<u=#FF0000>Lorem Ipsum</u> is simply dummy text

Strike through

<s>my strikethrough part</s>

Example:

<s>Lorem Ipsum</s> is simply dummy text

Strike through with colored strike

<s={hexaColor}>my colored strike part</s>

Example:

<s=#FF0000>Lorem Ipsum</s> is simply dummy text

Diagonal Strike through

<d>my diagonal strike part</d>

Example:

<d>Lorem Ipsum</d> is simply dummy text

Diagonal Strike through with colored strike

<d={hexaColor}>my colored diagonal strike part</d>

Example:

<d=#FF0000>Lorem Ipsum</d> is simply dummy text

Background color

<bg={hexaColor}>Text with bg color</bg>

The padding around the background is controlled on the whole element (by using the background_padding property)

Example:

<bg=#f6aeb8>Lorem Ipsum</bg> is simply dummy text

Font size

<f={fontSize}>Text with font size changed</f>

{fontSize} can be either an absolute value (110 for instance), which will be interpreted in pixels or a percentage (110%) of the current font size.

Example:

Lorem <f=60%>ipsum</f> is simply dummy text

Superscript

<sup>Text smaller, slightly above the normal line</sup>

Example:

Lorem Ip<sup>sum</sup> is simply dummy text

Subscript

<sub>Text smaller, slightly below the normal line</sub>

Example:

Lorem Ip<sub>sum</sub> is simply dummy text

Kerning

Kerning defines the spacing after a specific letter, expressed as a percentage relative to the current font size. The value can also be negative.

Example:

<k=-20%>Spac<k=100%>ing

`{hexaColor}`: [6 or 8 (for the opacity) digits hexadecimal color starting with # (i.e. `#EAEAEA` or `#00000080`)](/rest-api/generation/element-properties/root.md#image-background) `{cmykaColor}`: [4-5 numbers digits starting with `cmyka`](/rest-api/generation/element-properties/root.md#cmyka)(only for print) {% hint style="info" %} All of those markups can be combined. {% endhint %} {% hint style="warning" %} It works like HTML. You have to pay attention on how you write your opening & closing tags. {% endhint %} ## Background padding `background_padding`: **The padding of the background color around the text**. * String: Two numbers separated by a space: First number represents the vertical padding in pixels & the second the vertical padding. *For instance: `0 10` : `0` as vertical padding & `10` as horizontal* * or 1 `Number`: Horizontal & vertical paddings in pixels {% hint style="info" %} This parameter will only be used if a background color is defined. {% endhint %} **Examples:** | `"background_padding": "0 10"` | ![](/files/tZR9pqu5rqZcXGCrfawF) | | ------------------------------ | -------------------------------- | | `"background_padding": "5 10"` | ![](/files/iE0a95zCdUH6DmUenxHf) | ## Stroke A stroke can be added to text. In order to customise it, 2 properties are available: * `stroke_width`: Number between 0 & 40. **Width of the stroke** * `stroke_color`: [6-8 digits Hexa color.](/rest-api/generation/element-properties/root.md#image-background) , for print [cmyka](/rest-api/generation/element-properties/root.md#cmyka) *If your design does not contain any stroke, those 2 properties are required to have a stroke (and the width must be > 0).* **Example:** |

stroke\_width: 8
stroke\_color: "#1A47FF"

| ![](/files/ywF4s5hR8LziliB3FJPR) | | ----------------------------------------------------------------------------- | -------------------------------- | ## Text Alignment `alignment` can be defined to override the default text alignment. {% hint style="info" %} The text position will then be computed from the text bounding box defined within the design. {% endhint %} It can be of two forms: * One string: `top`, `middle`, `bottom`, `left`, `center`, `right` * Two strings: One vertical alignment parameter (`top`, `middle`, `bottom`) associated with a horizontal alignment parameter (`left`, `center`, `right`) separated by a space. i.e: (`top left` , `middle right`) **Examples:** | `"alignment": "center"` | ![](/files/YBYlnbMhchaudqMiJ7pJ) | | ----------------------- | -------------------------------- | | `"alignment": "right"` | ![](/files/NYM3tyteGrPj6vGBRa6O) | ## Font The default font can be overridden with the `font` and `font_weight` properties: * `font`: String. **Force a specific font by ID**. The fonts list is available by calling the [`GET /fonts`](/rest-api/fonts.md) API route. * `font_weight`: Number. **Force a font weight**. Available values: 100, 200, 300, 400, 500, 600, 700, 800, 900 {% hint style="warning" %} If the font does not contain a font weight, the nearest weight will be used. {% endhint %} **Examples:** |

Podkova font (Medium):


font: "6156872a-33c5-11ea-9877-92672c1b8195"
font\_weight: 500

| ![](/files/EcCuYdTweTEAGHZZMlYK) | | --------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | |

Poppins font (Extra Bold):


font: "6156907e-33c5-11ea-9877-92672c1b8195"
font\_weight: 800

| ![](/files/KN3YHeAc5LWopOCDjR2i) | ## Text Side Border A side border can be applied to a text element on one of its sides (left, right, top, or bottom). The border’s position, size, color, spacing, and shape can be customized using the properties below.
* **`side_border`**: String. One of "`left`", "`right`", "`top`", "`bottom`", "`none`". Defines the side on which the border is rendered. If not set, no side border is applied. If "`none`" is set, it disables a side border if it was initially present in the design. * **`side_border_thickness`**: Number in pixel > 0. The thickness of the side border. * **`side_border_color`**: [6-8 digits Hexa color.](/rest-api/generation/element-properties/root.md#image-background) , for print [cmyka](/rest-api/generation/element-properties/root.md#cmyka) * **`side_border_rounded`:** Boolean. Defines whether the border corners are rounded (`true`) or square (`false`). Default is false. * **`side_border_padding`:** Number in pixel > 0. The distance between the text content and the side border. Default is 0. * **`side_border_offset`**: Number in pixel. Moves the border along the axis perpendicular to its orientation: * If `side_border` is `"top"` or `"bottom"` → offset moves the border horizontally. * If `side_border` is `"left"` or `"right"` → offset moves the border vertically. Positive and negative values shift the border in opposite directions. Default is 0. * **`side_border_spread` :** Number if pixel. Extends the length of the border beyond the text bounding box by the specified number of pixels. Default is 0. **Example:** |

"side\_border": "left",
"side\_border\_thickness": 17,
"side\_border\_padding": 8,
"side\_border\_color": "#6d50a5a7",
"side\_border\_rounded": true,
"side\_border\_spread": 16,
"side\_border\_offset": 7

| | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- | ## Using Variables Inside Text Content If you want to customize only a specific part of a text element without replacing the entire text, you can use **variables** within your text content. A **variable** is a placeholder defined by a name enclosed in curly braces, for example: `{title}`. **In your original text of your design, include these variables where you want dynamic content to appear.** Then, when calling the API, you can replace these variables by passing a `vars` object with key-value pairs, where the key matches the variable name (without braces) and the value is the new content you want to insert. **Example:** Original text:\ `Welcome, {username}!` API call: ```json { elements: { vars: { "username": "Alice" } } } ``` Resulting text:\ `Welcome, Alice!` This method allows you to dynamically update parts of your text without needing to rewrite the entire content. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://developers.abyssale.com/rest-api/generation/element-properties/text.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.