Formatting text within variable values.

Read the variables with Javascript, process them as wanted and sent back to the variable you want to show onscreen.

Hi Math, Thank you for your quick response.

I've been using JS code to call the variable values and display them on another slide, but I'm unable to keep/get the subscripts and superscripts in the text. Is it possible to keep them inside the variables? If it's not possible to keep them inside the variables, is there any other way around to get those values?

Thanks again.

As Dynamic texts loose formatting you have to set the variables, show them in Storyline and then format it. And a extra issue is that Storyline converts all text to SVG...

As i just now tried to get this working...its tough. As all text is converted to spans of SVG ( still text, but hard to select a word or other part of a string and act on it )...so you would need to create pure HTML text of it...

These lines of script.... get all text-segments on a given slide ( or just a specific one offcourse ) and then change the fill of the svg-text segment.

var textSegments = document.getElementsByClassName("text-segment");
    gsap.to(textSegments, 1, { fill: "red" });

Its a start.

As i always find these kind of challenges intriguing, i couldnot resist finding a solution. And although it for sure aint perfect its a first step.

Storyline text is span based and all SVG. It is no pure HTML anymore and thus most HTML tricks will fail.

But you can offcourse add your own HTML text element...and then easily use sup and sub tags.
Like this...

const el = document.createElement('div');
 el.innerHTML =  "create HTML text is clicked and now <sub>we need to set parts</sub> of this text to subscript and/or <sup>superscript</sup>";

el.setAttribute('title', 'my-title');

const box = document.querySelector("[data-acc-text='txtBox']");
box.appendChild(el);

I have a shape called 'txtBox' that is where the HTML-text element will be setup.

Combining variables and what parts need to be set to sub or sup is the next step.

Making a working sample now.

So here it is. This way you can workaround the default SVG text in Storyline and create your own HTM text boxes.
https://360.articulate.com/review/content/c52ded75-b8b6-46e8-987a-79c672e1102e/review

The HTML textfield is created at start of the timeline ( when the JavascriptsLoaded variable changes ) and creates it under the grey txtBox shape on top.

Then the icons all have some functionality to change text and fill the textfield.

Good luck...

As i wanted to show some more benefits of using GSAP in things like this...
I am showing the difference between set and to in GSAP.
https://360.articulate.com/review/content/cbe3096d-dfa2-4ed9-9915-e9647708403f/review

Here im showing how to do that in a video with some explanation about the differences between set and to.

And offcourse this sample as is to learn from and reuse.

Hi Math,

Thank you so much for including the sample files along with such additional and helpful information. The information you provided along with the SL files was a big assistance to me, and I wish I could have learned something from it.

I really appreciate taking time and providing all this information.

Thank you Math!!