Text spacing in Lottie animation is funky - json

I have a Lottie animation that I've put on a website. The spacing of the text is very strange. Looks good in the AE file but when on the web looks goofy. different spacing for different letters. I am dynamically changing the text based off of an input field, could that be part of the issue?
Thanks

Related

Overlay Text on Video Clip

I created this single page site (https://pixelwatch-bycliff.web.app/) using HTML, CSS and JS but I thought of going extra by adding this video clip (https://www.pexels.com/video/multi-colored-vapor-1943483/) to the text (Wear OS) so the text would be vibrant while coming to life with the video. PS: I've tried doing it myself but can't get it to work, any help right now would be greatly appreciated.
Link to the files on github: https://github.com/ManLikeCliff/pixelwatch-bycliff
click to view the text
I think there are two ways for you to achieving it.
Making the text with overlayed on the video as .gif format. That is, you are basically inserting image file.
I believe you wanted to do with CSS. Then, you might as well think of layout wisely.
First, make your video goes back to the text. In this case, video could be set as a background. Then, give z-index to the overlay text above by giving position: absolute; attribute.
If you want, you may check here

Change the text and background colour of the header column in Bokeh DataTable

I am using a standalone bokeh html document and it has various tabs, in one of the tabs is a DataTable.
I recently changed the background colour of the HTML to black and lost the text in the header columns, I would now like to change the colour of the text and or background colour to make them visible again.
I am using HTMLTemplateFormatter to colour individual columns no problem but cannot find a way to format the header, can anyone help me here?
Thanks
Right now today, there is not a way to do this in Bokeh. (See Discourse topic: https://discourse.bokeh.org/t/colored-fields-name-of-datatable/6879/2) Looks like there's not a GH issue for it yet either, so you might want to submit one.

WordPress elementor icons (SVG) display different than expected

I get strange behavior when I try to insert icons to my elementor page design in SVG format.
This is the original design (supplied with zeplin.io) which im trying to implement with elementor
before I add the last icon, the result in elementor is:
You can see that only the first icon display as expected
Which is strange, but even more strange is that when I had the last I con I get this:
Now non of the icon display as expected, although some of then are more similar to the expected result.
The heart icon got flipped, and the colors changed for the other icons,
Why would adding a new icon effect other icons in such a way?
Why the color and the icon direction doesn't display as set by the SVG design?
NOTE, the direction might be RTL related, but why only the heart got flipped?
I know that I could easily solve this issue by changing the format to PNG, but I could like to understand the reason behind this behavior.
This is happens because the icons have duplicate class values, i.e. the svg is added as-is to the dom tree, along with the <style> definitions.
Therefore any class or id that is duplicated in two SVGs will collide, and the solution is
open the svg with any text editor
search/replace all id/class defined in <style> to have unique name
NOTE: the reason it doesn't happen in the orginial design is that there, the SVGs are added with img tag.
Woprdpress doesn't allow uploading SVGs as images for security reason (I have no idea what kind of security issue it can create, but this is a question by itself)
EDIT: I just noticed that once you add an SVG as an icon, it also become available as an image, so it might be a better solution to upload the SVG as icon and then use them as images. but I didn't try it.

Figlet text font size?

So i recently downloaded (http://www.figlet.org/) the figlet application to create big text our of digits and symbols for html themes.
I finally managed to create my big text message using the 'Roman.flf' font and saved it to my computer (always a '.txt' file)
So then i copied and pasted the text from the '.txt' file into my tumblr html but apparently the text is too big so it gets messed up and you can't even read the text in my html. And I'm trying to make it as a figlet message as a theme credit for my theme.
Does anyone know how to change the font size or size of the figlet text in the JAVe program?
The ASCII art for normal figlet fonts is done in only one size. Your best bet is changing the font size of the text you're using to display the output. Also, browsers like to collapse multiple white spaces into a single white space, so you may want to make sure that also isn't happening.

Flex: embedded images in TextArea appear only in top left corner

I managed to add embedded assets to htmlText of my TextArea like described here (Sly_cardinal's post, currently the third one):
Unable to access embedded images in htmlText
But all the images appear in the top left corner (overlayed)!
Interesting is that the place where the images should be, is actually empty and the text wraps around it, like they were there. But they are all in the corner.
I'm using large p tags for the text and all html displays perfectly where it should be. My only problem are these images.
Hope somebody has at least an idea. Thanks.
P.D. sorry for not showing code, it's cluttered at the moment with other things. But I hope the description is enough to get some useful tips.
P.D. 2. I did a test now with exactly the same code but using normal path to png file instead of asset and that works!.