Text overlays flowing together irrespective of text size

You can add text dynamically to the image by using overlays with syntax l_ in the URL. Here's an example of a URL with on-the-fly generated text transformation:

Ruby:
Copy to clipboard
cl_image_tag("photo-1430609098125-581618d0482f_xvayby", :overlay=>{:font_family=>"Arial", :font_size=>100, :text=>"Weather"})
PHP:
Copy to clipboard
cl_image_tag("photo-1430609098125-581618d0482f_xvayby", array("overlay"=>array("font_family"=>"Arial", "font_size"=>100, "text"=>"Weather")))
Python:
Copy to clipboard
CloudinaryImage("photo-1430609098125-581618d0482f_xvayby").image(overlay={'font_family': "Arial", 'font_size': 100, 'text': "Weather"})
Node.js:
Copy to clipboard
cloudinary.image("photo-1430609098125-581618d0482f_xvayby", {overlay: {font_family: "Arial", font_size: 100, text: "Weather"}})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().overlay(new TextLayer().fontFamily("Arial").fontSize(100).text("Weather"))).imageTag("photo-1430609098125-581618d0482f_xvayby");
JS:
Copy to clipboard
cloudinary.imageTag('photo-1430609098125-581618d0482f_xvayby', {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(100).text("Weather")}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("photo-1430609098125-581618d0482f_xvayby", {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(100).text("Weather")})
React:
Copy to clipboard
<Image publicId="photo-1430609098125-581618d0482f_xvayby" >
  <Transformation overlay={{fontFamily: "Arial", fontSize: 100, text: "Weather"}} />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="photo-1430609098125-581618d0482f_xvayby" >
  <cld-transformation overlay={{fontFamily: "Arial", fontSize: 100, text: "Weather"}} />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="photo-1430609098125-581618d0482f_xvayby" >
  <cl-transformation overlay="text:Arial_100:Weather">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Overlay(new TextLayer().FontFamily("Arial").FontSize(100).Text("Weather"))).BuildImageTag("photo-1430609098125-581618d0482f_xvayby")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().overlay(new TextLayer().fontFamily("Arial").fontSize(100).text("Weather"))).generate("photo-1430609098125-581618d0482f_xvayby");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setOverlay("text:Arial_100:Weather")).generate("photo-1430609098125-581618d0482f_xvayby")!, cloudinary: cloudinary)
Dynamic style

Click here for more information on adding watermarks and text overlays

If you would like to add a transformation with multiple text overlays and you would like the text to be next to each other regardless of the length of the text, you can achieve that by using the transformation below:

Ruby:
Copy to clipboard
cl_image_tag("photo-1430609098125-581618d0482f_xvayby", :transformation=>[
  {:overlay=>{:font_family=>"Arial", :font_size=>100, :font_weight=>"bold", :text=>"Boston"}},
  {:overlay=>{:font_family=>"Arial", :font_size=>100, :text=>"%7C"}},
  {:gravity=>"west", :flags=>"layer_apply", :x=>"w + 20"},
  {:overlay=>{:font_family=>"Arial", :font_size=>100, :font_style=>"italic", :text=>"79%C2%B0F"}},
  {:gravity=>"west", :flags=>"layer_apply", :x=>"w + 20"}
  ])
PHP:
Copy to clipboard
cl_image_tag("photo-1430609098125-581618d0482f_xvayby", array("transformation"=>array(
  array("overlay"=>array("font_family"=>"Arial", "font_size"=>100, "font_weight"=>"bold", "text"=>"Boston")),
  array("overlay"=>array("font_family"=>"Arial", "font_size"=>100, "text"=>"%7C")),
  array("gravity"=>"west", "flags"=>"layer_apply", "x"=>"w + 20"),
  array("overlay"=>array("font_family"=>"Arial", "font_size"=>100, "font_style"=>"italic", "text"=>"79%C2%B0F")),
  array("gravity"=>"west", "flags"=>"layer_apply", "x"=>"w + 20")
  )))
Python:
Copy to clipboard
CloudinaryImage("photo-1430609098125-581618d0482f_xvayby").image(transformation=[
  {'overlay': {'font_family': "Arial", 'font_size': 100, 'font_weight': "bold", 'text': "Boston"}},
  {'overlay': {'font_family': "Arial", 'font_size': 100, 'text': "%7C"}},
  {'gravity': "west", 'flags': "layer_apply", 'x': "w + 20"},
  {'overlay': {'font_family': "Arial", 'font_size': 100, 'font_style': "italic", 'text': "79%C2%B0F"}},
  {'gravity': "west", 'flags': "layer_apply", 'x': "w + 20"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("photo-1430609098125-581618d0482f_xvayby", {transformation: [
  {overlay: {font_family: "Arial", font_size: 100, font_weight: "bold", text: "Boston"}},
  {overlay: {font_family: "Arial", font_size: 100, text: "%7C"}},
  {gravity: "west", flags: "layer_apply", x: "w + 20"},
  {overlay: {font_family: "Arial", font_size: 100, font_style: "italic", text: "79%C2%B0F"}},
  {gravity: "west", flags: "layer_apply", x: "w + 20"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .overlay(new TextLayer().fontFamily("Arial").fontSize(100).fontWeight("bold").text("Boston")).chain()
  .overlay(new TextLayer().fontFamily("Arial").fontSize(100).text("%7C")).chain()
  .gravity("west").flags("layer_apply").x("w + 20").chain()
  .overlay(new TextLayer().fontFamily("Arial").fontSize(100).fontStyle("italic").text("79%C2%B0F")).chain()
  .gravity("west").flags("layer_apply").x("w + 20")).imageTag("photo-1430609098125-581618d0482f_xvayby");
JS:
Copy to clipboard
cloudinary.imageTag('photo-1430609098125-581618d0482f_xvayby', {transformation: [
  {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(100).fontWeight("bold").text("Boston")},
  {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(100).text("%7C")},
  {gravity: "west", flags: "layer_apply", x: "w + 20"},
  {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(100).fontStyle("italic").text("79%C2%B0F")},
  {gravity: "west", flags: "layer_apply", x: "w + 20"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("photo-1430609098125-581618d0482f_xvayby", {transformation: [
  {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(100).fontWeight("bold").text("Boston")},
  {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(100).text("%7C")},
  {gravity: "west", flags: "layer_apply", x: "w + 20"},
  {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(100).fontStyle("italic").text("79%C2%B0F")},
  {gravity: "west", flags: "layer_apply", x: "w + 20"}
  ]})
React:
Copy to clipboard
<Image publicId="photo-1430609098125-581618d0482f_xvayby" >
  <Transformation overlay={{fontFamily: "Arial", fontSize: 100, fontWeight: "bold", text: "Boston"}} />
  <Transformation overlay={{fontFamily: "Arial", fontSize: 100, text: "%7C"}} />
  <Transformation gravity="west" flags="layer_apply" x="w + 20" />
  <Transformation overlay={{fontFamily: "Arial", fontSize: 100, fontStyle: "italic", text: "79%C2%B0F"}} />
  <Transformation gravity="west" flags="layer_apply" x="w + 20" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="photo-1430609098125-581618d0482f_xvayby" >
  <cld-transformation overlay={{fontFamily: "Arial", fontSize: 100, fontWeight: "bold", text: "Boston"}} />
  <cld-transformation overlay={{fontFamily: "Arial", fontSize: 100, text: "%7C"}} />
  <cld-transformation gravity="west" flags="layer_apply" x="w + 20" />
  <cld-transformation overlay={{fontFamily: "Arial", fontSize: 100, fontStyle: "italic", text: "79%C2%B0F"}} />
  <cld-transformation gravity="west" flags="layer_apply" x="w + 20" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="photo-1430609098125-581618d0482f_xvayby" >
  <cl-transformation overlay="text:Arial_100_bold:Boston">
  </cl-transformation>
  <cl-transformation overlay="text:Arial_100:%7C">
  </cl-transformation>
  <cl-transformation gravity="west" flags="layer_apply" x="w + 20">
  </cl-transformation>
  <cl-transformation overlay="text:Arial_100_italic:79%C2%B0F">
  </cl-transformation>
  <cl-transformation gravity="west" flags="layer_apply" x="w + 20">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Overlay(new TextLayer().FontFamily("Arial").FontSize(100).FontWeight("bold").Text("Boston")).Chain()
  .Overlay(new TextLayer().FontFamily("Arial").FontSize(100).Text("%7C")).Chain()
  .Gravity("west").Flags("layer_apply").X("w + 20").Chain()
  .Overlay(new TextLayer().FontFamily("Arial").FontSize(100).FontStyle("italic").Text("79%C2%B0F")).Chain()
  .Gravity("west").Flags("layer_apply").X("w + 20")).BuildImageTag("photo-1430609098125-581618d0482f_xvayby")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .overlay(new TextLayer().fontFamily("Arial").fontSize(100).fontWeight("bold").text("Boston")).chain()
  .overlay(new TextLayer().fontFamily("Arial").fontSize(100).text("%7C")).chain()
  .gravity("west").flags("layer_apply").x("w + 20").chain()
  .overlay(new TextLayer().fontFamily("Arial").fontSize(100).fontStyle("italic").text("79%C2%B0F")).chain()
  .gravity("west").flags("layer_apply").x("w + 20")).generate("photo-1430609098125-581618d0482f_xvayby");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setOverlay("text:Arial_100_bold:Boston").chain()
  .setOverlay("text:Arial_100:%7C").chain()
  .setGravity("west").setFlags("layer_apply").setX("w + 20").chain()
  .setOverlay("text:Arial_100_italic:79%C2%B0F").chain()
  .setGravity("west").setFlags("layer_apply").setX("w + 20")).generate("photo-1430609098125-581618d0482f_xvayby")!, cloudinary: cloudinary)
sky

The transformation above has "city name and temperature" where "| temperature" is positioned to flow next to the "city name" appropriately so that it looks right whether the "city name" is short or long.

The same transformation can also be used for a longer text:

Ruby:
Copy to clipboard
cl_image_tag("photo-1430609098125-581618d0482f_xvayby", :transformation=>[
  {:overlay=>{:font_family=>"Arial", :font_size=>100, :font_weight=>"bold", :text=>"San%20Fransisco"}},
  {:overlay=>{:font_family=>"Arial", :font_size=>100, :text=>"%7C"}},
  {:gravity=>"west", :flags=>"layer_apply", :x=>"w + 20"},
  {:overlay=>{:font_family=>"Arial", :font_size=>100, :font_style=>"italic", :text=>"62%C2%B0F"}},
  {:gravity=>"west", :flags=>"layer_apply", :x=>"w + 20"}
  ])
PHP:
Copy to clipboard
cl_image_tag("photo-1430609098125-581618d0482f_xvayby", array("transformation"=>array(
  array("overlay"=>array("font_family"=>"Arial", "font_size"=>100, "font_weight"=>"bold", "text"=>"San%20Fransisco")),
  array("overlay"=>array("font_family"=>"Arial", "font_size"=>100, "text"=>"%7C")),
  array("gravity"=>"west", "flags"=>"layer_apply", "x"=>"w + 20"),
  array("overlay"=>array("font_family"=>"Arial", "font_size"=>100, "font_style"=>"italic", "text"=>"62%C2%B0F")),
  array("gravity"=>"west", "flags"=>"layer_apply", "x"=>"w + 20")
  )))
Python:
Copy to clipboard
CloudinaryImage("photo-1430609098125-581618d0482f_xvayby").image(transformation=[
  {'overlay': {'font_family': "Arial", 'font_size': 100, 'font_weight': "bold", 'text': "San%20Fransisco"}},
  {'overlay': {'font_family': "Arial", 'font_size': 100, 'text': "%7C"}},
  {'gravity': "west", 'flags': "layer_apply", 'x': "w + 20"},
  {'overlay': {'font_family': "Arial", 'font_size': 100, 'font_style': "italic", 'text': "62%C2%B0F"}},
  {'gravity': "west", 'flags': "layer_apply", 'x': "w + 20"}
  ])
Node.js:
Copy to clipboard
cloudinary.image("photo-1430609098125-581618d0482f_xvayby", {transformation: [
  {overlay: {font_family: "Arial", font_size: 100, font_weight: "bold", text: "San%20Fransisco"}},
  {overlay: {font_family: "Arial", font_size: 100, text: "%7C"}},
  {gravity: "west", flags: "layer_apply", x: "w + 20"},
  {overlay: {font_family: "Arial", font_size: 100, font_style: "italic", text: "62%C2%B0F"}},
  {gravity: "west", flags: "layer_apply", x: "w + 20"}
  ]})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation()
  .overlay(new TextLayer().fontFamily("Arial").fontSize(100).fontWeight("bold").text("San%20Fransisco")).chain()
  .overlay(new TextLayer().fontFamily("Arial").fontSize(100).text("%7C")).chain()
  .gravity("west").flags("layer_apply").x("w + 20").chain()
  .overlay(new TextLayer().fontFamily("Arial").fontSize(100).fontStyle("italic").text("62%C2%B0F")).chain()
  .gravity("west").flags("layer_apply").x("w + 20")).imageTag("photo-1430609098125-581618d0482f_xvayby");
JS:
Copy to clipboard
cloudinary.imageTag('photo-1430609098125-581618d0482f_xvayby', {transformation: [
  {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(100).fontWeight("bold").text("San%20Fransisco")},
  {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(100).text("%7C")},
  {gravity: "west", flags: "layer_apply", x: "w + 20"},
  {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(100).fontStyle("italic").text("62%C2%B0F")},
  {gravity: "west", flags: "layer_apply", x: "w + 20"}
  ]}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("photo-1430609098125-581618d0482f_xvayby", {transformation: [
  {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(100).fontWeight("bold").text("San%20Fransisco")},
  {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(100).text("%7C")},
  {gravity: "west", flags: "layer_apply", x: "w + 20"},
  {overlay: new cloudinary.TextLayer().fontFamily("Arial").fontSize(100).fontStyle("italic").text("62%C2%B0F")},
  {gravity: "west", flags: "layer_apply", x: "w + 20"}
  ]})
React:
Copy to clipboard
<Image publicId="photo-1430609098125-581618d0482f_xvayby" >
  <Transformation overlay={{fontFamily: "Arial", fontSize: 100, fontWeight: "bold", text: "San%20Fransisco"}} />
  <Transformation overlay={{fontFamily: "Arial", fontSize: 100, text: "%7C"}} />
  <Transformation gravity="west" flags="layer_apply" x="w + 20" />
  <Transformation overlay={{fontFamily: "Arial", fontSize: 100, fontStyle: "italic", text: "62%C2%B0F"}} />
  <Transformation gravity="west" flags="layer_apply" x="w + 20" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="photo-1430609098125-581618d0482f_xvayby" >
  <cld-transformation overlay={{fontFamily: "Arial", fontSize: 100, fontWeight: "bold", text: "San%20Fransisco"}} />
  <cld-transformation overlay={{fontFamily: "Arial", fontSize: 100, text: "%7C"}} />
  <cld-transformation gravity="west" flags="layer_apply" x="w + 20" />
  <cld-transformation overlay={{fontFamily: "Arial", fontSize: 100, fontStyle: "italic", text: "62%C2%B0F"}} />
  <cld-transformation gravity="west" flags="layer_apply" x="w + 20" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="photo-1430609098125-581618d0482f_xvayby" >
  <cl-transformation overlay="text:Arial_100_bold:San%20Fransisco">
  </cl-transformation>
  <cl-transformation overlay="text:Arial_100:%7C">
  </cl-transformation>
  <cl-transformation gravity="west" flags="layer_apply" x="w + 20">
  </cl-transformation>
  <cl-transformation overlay="text:Arial_100_italic:62%C2%B0F">
  </cl-transformation>
  <cl-transformation gravity="west" flags="layer_apply" x="w + 20">
  </cl-transformation>
</cl-image>
.Net:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation()
  .Overlay(new TextLayer().FontFamily("Arial").FontSize(100).FontWeight("bold").Text("San%20Fransisco")).Chain()
  .Overlay(new TextLayer().FontFamily("Arial").FontSize(100).Text("%7C")).Chain()
  .Gravity("west").Flags("layer_apply").X("w + 20").Chain()
  .Overlay(new TextLayer().FontFamily("Arial").FontSize(100).FontStyle("italic").Text("62%C2%B0F")).Chain()
  .Gravity("west").Flags("layer_apply").X("w + 20")).BuildImageTag("photo-1430609098125-581618d0482f_xvayby")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation()
  .overlay(new TextLayer().fontFamily("Arial").fontSize(100).fontWeight("bold").text("San%20Fransisco")).chain()
  .overlay(new TextLayer().fontFamily("Arial").fontSize(100).text("%7C")).chain()
  .gravity("west").flags("layer_apply").x("w + 20").chain()
  .overlay(new TextLayer().fontFamily("Arial").fontSize(100).fontStyle("italic").text("62%C2%B0F")).chain()
  .gravity("west").flags("layer_apply").x("w + 20")).generate("photo-1430609098125-581618d0482f_xvayby");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()
  .setOverlay("text:Arial_100_bold:San%20Fransisco").chain()
  .setOverlay("text:Arial_100:%7C").chain()
  .setGravity("west").setFlags("layer_apply").setX("w + 20").chain()
  .setOverlay("text:Arial_100_italic:62%C2%B0F").chain()
  .setGravity("west").setFlags("layer_apply").setX("w + 20")).generate("photo-1430609098125-581618d0482f_xvayby")!, cloudinary: cloudinary)
sky

by Aditi