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

by Aditi