Skip to main content

Advanced text styling: Dynamically set multiple styles on a single text element

info

If you are not familiar with the concept of middleware, make sure to check the middlewares explanation. Also, make sure that you are familiar with the Actions concept.

There are often situations where you need to apply various text styles to a single text element. For example, a common scenario involves the need to make the first or last names in lower third graphics appear bold. This guide will demonstrate the easiest way to achieve such a desired outcome.

The concept here is to develop a middleware function that modifies the text value before it is appended to the DOM. By adding additional HTML tags for styling purposes, the middleware will intelligently split the received value and determine the first and second words (i.e., the first and last name). Subsequently, it will wrap the second word in HTML tags that will change the font style.

Prerequisites​

For this example, we will need just one Text element. Feel free to draw it any way you want. Once you are done with drawing, set a unique key to that Text element (in this guide we'll use _name as the key).

It is also important to understand that the Text element has it's own default middleware that gets executed every time a value is sent for it's key. In this guide, we will override the default middleware with the custom one by not executing the next() function inside the middleware.

Now, let's get to some coding.

Adding new update middleware​

We now need to write a custom middleware function that will be executed once our template receives the data from the. The best place to put this middleware function code will be inside Composition action, because Composition action will be initialized first, before our template receives any template data.

In this example, the key of our text element is _name. What we want to do is execute the middleware whenever the template receives any value under the _name key. Blank middleware function looks like this:

loopic.useOnUpdate("_name", (key, value, next) => {
  // Middleware code
});

Now, let's add some logic to it. We want to split the value our template has received and change the font family of the second word. Firstly, let's split the value by empty spaces:

const splitted = value.split(" ");
const firstName = splitted[0];
const lastName = splitted[1];

Secondly, let's look for our text element by it's key using the findElementByKey method.

const element = this.findElementByKey(key);

Once the element has been found, the last thing is to set it's content. We will now change the font family of the second word, but you can use this technique to change any font style of your own. Here note that the Text element will automatically squeeze, if the autoSqueeze property is set to true.

element.setContent(
  `${firstName} <span style="font-family: Evogria;">${lastName}</span>`
);

Final code​

Finally, our Composition action looks like this:

loopic.useOnUpdate("_name", (key, value, next) => {
  const splitted = value.split(" ");
  const firstName = splitted[0];
  const lastName = splitted[1];
  const element = this.findElementByKey(key);
  element.setContent(
    `${firstName} <span style="font-family: Arial;">${lastName}</span>`
  );
});

< OpenExample />