CodeNote.net

How to Line Break Text with l_text on Cloudinary Images

Tadashi Shigeoka ·  Sat, January 2, 2021

I’ll introduce how to line break text overlaid on images using l_text in Cloudinary.

Background: Want to Line Break Text Overlaid on Images

Following the article How to Dynamically Generate OGP Images with Cloudinary, when overlaying text on OGP images, the text has many characters so I researched how to line break it, which resulted in this article.

Using Line Break Character **%0A** in Cloudinary

You can line break text overlaid on Cloudinary images by inserting the line break character %0A where you want to break the line.

https://res.cloudinary.com/codenote-net/image/upload/l_text:Sawarabi%20Gothic_160_bold:12345%0A67890,co_rgb:242424,w_1000,c_fit,f_auto,q_auto/v1599311015/CodeNote-OGP.png

Automatic Line Breaking in Cloudinary

To automatically line break text in Cloudinary, use c_fit with w and h parameters.

  • w Automatically wraps when exceeding the specified width
  • h Truncates with ... when exceeding the specified height
https://res.cloudinary.com/codenote-net/image/upload/l_text:Sawarabi%20Gothic_150_bold:%E3%81%82%E3%81%84%E3%81%86%E3%81%88%E3%81%8A%E3%81%8B%E3%81%8D%E3%81%8F%E3%81%91%E3%81%93%E3%81%95%E3%81%97%E3%81%99%E3%81%9B%E3%81%9D,co_rgb:242424,w_1000,c_fit,f_auto,q_auto/v1599311015/CodeNote-OGP.png

That’s all from the Gemba on wanting to nicely line break text overlaid on Cloudinary images.