Text
Text component - Abyssale REST API
Property | Description |
---|---|
payload | |
color | |
background_color | Same as color , but allows to add a background behind the text |
background_padding | |
font_size | Number. Force font size in pixels (must be > 1) |
font
font_weight | |
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 | |
stroke_width
stroke_color | |
shadow_color
shadow_blur
shadow_offset_x
shadow_offset_y |
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": "#00000080"
"shadow_blur": 3
"shadow_offset_x": 0
"shadow_offset_y": 6 | ![]() |
color
: The text color, can be a monochrome (6-8 digits hexa color) or a gradient (Go to Linear Gradient documentation).Examples:
"color": "#1A47FF" | ![]() |
"color": "linear-gradient(0% 0% 100% 0%,0% #0a68ff 1,100% #ff0000 1)" | ![]() |
payload
is the text content.Constraints:
- Cannot be empty
- 2048 characters maximum
By default, line breaks are automatically computed from the available space.
You can however force line breaks by adding
\n
.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.
Example:
"payload": "Lorem Ipsum\nis simply dummy text" | ![]() |
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)
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.
Available markups:
You can find examples below.
Type | Markup |
---|---|
Color | <c={hexaColor}>my colored part</c> |
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. |
Underline | <u>my underline part</u> |
Underline with colored line | <u={hexaColor}>my colored underline part</u> |
Strike through | <s>my strikethrough part</s> |
Strike through with colored strike | <s={hexaColor}>my colored strike part</s> |
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) |
Font size | <f={fontSize}>Text with font size changed</f> |
All of those markups can be combined.
It works like HTML. You have to pay attention on how you write your opening & closing tags.
Examples:
<c=#FF0000>Lorem Ipsum</c> is simply dummy text | ![]() |
<w=900>Lorem Ipsum</w> is simply dummy text | ![]() |
<u>Lorem Ipsum</u> is simply dummy text | ![]() |
<u=#FF0000>Lorem Ipsum</u> is simply dummy text | ![]() |
<s>Lorem Ipsum</s> is simply dummy text | ![]() |
<s=#FF0000>Lorem Ipsum</s> is simply dummy text | ![]() |
<bg=#f6aeb8>Lorem Ipsum</bg> is simply dummy text | ![]() |
<c=#243659><w=900><u=#1A47FF>Lorem Ipsum</u></w></c> is simply <s>dummy</s> text | ![]() |
Lorem ipsum is simply <f=100>dummy</f> text | ![]() |
Lorem ipsum is simply <f=60>dummy</f> text | ![]() |
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
This parameter will only be used if a background color is defined.
Examples:
"background_padding": "0 10" | ![]() |
"background_padding": "5 10" | ![]() |
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
If your template 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" | ![]() |
alignment
can be defined to override the default text alignment. The text position will then be computed from the text bounding box defined within the template.
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" | ![]() |
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 theGET /fonts
API route.font_weight
: Number. Force a font weight. Available values: 100, 200, 300, 400, 500, 600, 700, 800, 900
If the font does not contain a font weight, the nearest weight will be used.
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 | ![]() |
Last modified 5d ago