# 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](https://developers.abyssale.com/rest-api/generation/element-properties/..#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](https://developers.abyssale.com/rest-api/generation/root#image-background)) , **gradient** ([Go to Linear Gradient documentation](https://developers.abyssale.com/rest-api/generation/root#linear-gradient)), or **cmyka** (only for print, [cmyka](https://developers.abyssale.com/rest-api/generation/root#cmyka))
**Examples:**
| `"color": "#1A47FF"` |  |
| ----------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `"color": "linear-gradient(0% 0% 100% 0%,0% #0a68ff 1,100% #ff0000 1)"` |  |
| `"color": "cmyka(89,51,0,13,100)"` |  |
## 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"` |  |
| ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
### **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:**
| Type | Markup |
|---|
| 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`)](https://developers.abyssale.com/rest-api/generation/root#image-background)
`{cmykaColor}`: [4-5 numbers digits starting with `cmyka`](https://developers.abyssale.com/rest-api/generation/root#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"` |  |
| ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `"background_padding": "5 10"` |  |
## 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.](https://developers.abyssale.com/rest-api/generation/root#image-background) , for print [cmyka](https://developers.abyssale.com/rest-api/generation/root#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"
|  |
| ----------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
## 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"` |  |
| ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `"alignment": "right"` |  |
## 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`](https://developers.abyssale.com/rest-api/fonts) 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
|  |
| --------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Poppins font (Extra Bold):
font: "6156907e-33c5-11ea-9877-92672c1b8195"
font\_weight: 800
|  |
## 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.](https://developers.abyssale.com/rest-api/generation/root#image-background) , for print [cmyka](https://developers.abyssale.com/rest-api/generation/root#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.