Overview
Sources
Libraries
Images API

Text Height text-height

Specify a number of pixels to limit the height of the text.

text-size parameter will be ignored and size calculated automatically, text string will be split into multiple lines to fit in the defined dimensions. If required, it is possible to force text to not be split into multiple lines, setting text-break parameter to false.

This parameter requires to be used together with a valid text-width.

Values

This parameter accepts positive integer values greater than zero.

The default value for this parameter is 0, disabling any height limit for text rendering.

Examples

In this example, we are setting a text-width of 800 pixels, a text-height of 300 pixels matching the source image dimensions, and an additional text-padding of 20. You can see how text size is automatically calculated to fit the entire image:

GET
https://assets.imglab-cdn.net/particles.jpeg?text-width=800&text-height=300&text-padding=20
Rendering text over image limiting it to 800 pixels wide with text-width using 800 as value, 300 pixels high with text-height using 300 as value and assigning a text-padding of 20.
x px

It is possible to avoid text to be splitted into multiple lines setting text-break to false. In this example we are using the same attributes as the previous one but disabling text-break:

GET
https://assets.imglab-cdn.net/particles.jpeg?text-width=800&text-height=300&text-break=false&text-padding=20
Rendering text over image limiting it to 800 pixels wide with text-width using 800 as value, 300 pixels high with text-height using 300 as value, assigning a text-padding of 20, and disabling multiline text with text-break parameter having false as value.
x px

Using a text-width of 500 pixels with a text-height of 200 pixels:

GET
https://assets.imglab-cdn.net/particles.jpeg?text-width=500&text-height=200
Rendering text over image limiting it to 500 pixels wide with text-width using 500 as value and 200 pixels high with text-height using 200 as value.
x px

Using a text-width of 500 pixels with a text-height of 100 pixels:

GET
https://assets.imglab-cdn.net/particles.jpeg?text-width=500&text-height=100
Rendering text over image limiting it to 500 pixels wide with text-width using 500 as value and 100 pixels high with text-height using 100 as value.
x px

Using a text-width of 500pixels with a small text-height of 50 pixels:

GET
https://assets.imglab-cdn.net/particles.jpeg?text-width=500&text-height=50
Rendering text over image limiting it to 500 pixels wide with text-width using 500 as value and 50 pixels high with text-height using 50 as value.
x px

For this example we are moving the position of the text to the left-top corner with text-position=left,top, assigning a text-width of 400 pixels, a text-height of 150 pixels, and a text-padding of 20. With this we are fitting the text to a quarter of the source image:

GET
https://assets.imglab-cdn.net/particles.jpeg?text-width=400&text-height=150&text-position=left%2Ctop&text-padding=20
Rendering text over image limiting it to 400 pixels wide with text-width using 500 as value, 150 pixels high with text-height using 150 as value, a text-padding of 20 and moving text-position to left-top corner.
x px