Dynamic Font Sizing using Custom CSS or Javascript

I have a repeating group. The repeating group is using as a datasource a list of letters (ie: text) to display a word.

For example the word residentially will be a list of letters (r, e, s, i, d, e, n, t, i, a, l, l, y) that populate a repeating group. Each letter has its’ own cell in the RG. Each letter is displayed in a single text element within the RG cell.

Screen Shot 2024-03-16 at 1.39.58 PM
Screen Shot 2024-03-16 at 1.40.06 PM

I am attempting to make it so that the width of the RG is 100% of the width of the device screen, and does not overflow (ie: no scroll bars) and for the size of the font used to adjust the font size dynamically so that if the word is BALL for example, which only has 4 letters, the size of each letter will expand to fill the width of the text element placed within the RG, or if the word is ALPHABET, that the font size of text element will adjust so all letters are displayed within the width of the device page width, the rg doesn’t scroll across (as is the case below)

Basically, I want the font size to adjust in the same way the text element width would adjust so that no matter how many letters are in a word, the word will fit entirely on one line without scrolling from the RG, which may make it so that sometimes the letters are bigger or smaller than others, but no matter what, all letters are displayed within the confines of the device width.

Any ideas of how to implement this? I’ve been searching online and found some things that I am unsure of how to target the RG and the cells within it.

Is the repeating group cell for each letter what you want and need OR something you did while trying to fix the actual problem: a text that fits right into the width of the screen dynamically?

I am hoping to use the repeating group approach as I am anticipating attempting a function where each letter will individually be highlighted and/or transformed (like a bounce up or zoomed) while having an audio recording saying the letter.

My goal is to create a “simple” app for my kid to see the word in large font on the TV screen, with an audio recording saying the word, then having the individual letters as described so as to mimic the idea of spelling the word, and then finally having the audio recording saying the word again before switching to another word in a series.

Kind of like flash cards, but for a 2.5 year old, so I hope that the transformation of the individual letters may help hold his attention a bit longer.

But, as a side note, I also was not able to figure out how to ensure just a simple text would fit the entire width of the screen, while fitting only on one line. My current attempt was using CSS and setting the font size to VW, but I only have a static numerical value in front of VW, so when a word is too long to fit all on one line, it creates a second line and splits the word.

I’d imagine if there is a way to at least get the size of the word to change dynamically to fit the entire width, regardless of character count, that there would probably be ways to still get some of the desired function for having individual letters “spelled out” and transformed.

Not sure I got what you’re trying to achieve, but play around with this option: My Page (bubbleapps.io)

Great @vladimir.pak. This looks like a good initial solution @boston85719. It looks like each letter has the same relative width. A better solution would be to have the approximate width of a single letter and distribute the full width according to that.

Exactly.
One needs to adjust it to the height-to-width ratio, but that’s specific for the font style and even particular symbol.
I would suggest to simplify it as much as possible, ideally, to some constant value.

Thank you @vladimir.pak and @hergin I appreciate the help on that. Definitely looks like it is on the right track. Now I’ve got to play around with trying to manipulate (highlight or transform) the individual letters. You may see a post within the next couple of weeks if I get stuck on that.

1 Like