Text
Text component - Abyssale REST API
Available properties:
payload
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
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)
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) , gradient (Go to Linear Gradient documentation), or cmyka (only for print, 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
.
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)
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:
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
{hexaColor}
: 6 or 8 (for the opacity) digits hexadecimal color starting with # (i.e. #EAEAEA
or #00000080
)
{cmykaColor}
: 4-5 numbers digits starting with cmyka
(only for print)
It works like HTML. You have to pay attention on how you write your opening & closing tags.
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 horizontalor 1
Number
: Horizontal & vertical paddings in pixels
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 strokestroke_color
: 6-8 digits Hexa color. , for print 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.
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 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 updated