How to write text in Typewriter style

Hey guys
Is it possible to write text in typewriter style with the help of shotcut ?

I am posting a video link an as example!!:arrow_down:

See at 13:02 minutes, observe the left bottom…

I want the text to appear in that fashion…can it be done with shotcut?

Thank you!!

You can achieve a typewriter effect by using Elusien’s WebVfx framework (http://www.elusien.co.uk/shotcut/webvfx/index.php). There are explanations and examples of various animations which are possible with the framework.
I used it once but had some issues and did not have the time for troubleshooting (https://www.youtube.com/watch?v=GYABd6iuBWY&t=1m21s). To circumvent the problem, I just timed the animation with <body data-control=duration:fps> (so <body data-control=23:25> for my case) and screen captured the browser output. That worked exceedingly well.
In another topic, Elusien explained briefly how to use the effect:
Typewriter-style Effect

1 Like

Thank you for the quick reply, that should solve my problem.

My pleasure :slight_smile:. Feel free to ask questions if you need assistance.
But Elusien might have to answer the more complex ones, since I am certainly not an expert after one use :sweat_smile: .

Hi @Anil,
I just thought of another way of adding typewriter effect text. See my post here:

I also remembered I did this short video a while ago with HTML created with @elusien’s typewriter text generator, as @samth mentioned above.

I can post the HTML file for this if you’d like to see it. If so, I’ll dig it out :smile:

https://streamable.com/6v30u

I saw the video while i was browsing for my answers on forum.

its pretty cool…thanks for sharing

one question @jonray do i have to install the @Elusien’s framework again…because i have already have it installed, when i was trying out the JRTransition ?

sorry not so familiar with JavaScript.

Hi @anil,

Thanks for your appreciative comment!! Hope it helps…

No, you can use the webvfx.js file from earlier. Just make sure that you copy it and paste it into the same folder as your typewriter .html file, or it won’t work.

In case it’s useful, I found my html file of the young girl pianist video. I’ve attached it as a txt file - just change the extension to .html. Note, the background will be purple. To change it to transparent, either change purple to “transparent” or just add a letter or symbol - eg. purplex.

Alexandra Dovgan young pianist TYPEWRITER TEXT by Jonray.txt (1.8 KB)

both method worked like magic :slight_smile:

just one doubt how long the clip has to be,so that the whole subtitle appear (alexandra dovgan file)

i was using 5.03 second clip.

If you use Elusien’s typewriter, you might have to extend the duration a bit longer than the clip would be. I used it today and a full stop did not appear until I extended the clip from 5 to 7 s. To fit it into the track, I sped up the clip until I reached the desired length.

yeah!!

it worked for me fine when clip is of 10 seconds

i think if we change the data-control parameters in html page…it should work for any length clip.

@samth hey i made some changes to elusion’s html file but i am facing a little problem…i need to push the subtitle at the bottom green line by 20px or say 5% towards top…how do i do it ?
i have uploaded the screenshot and html file…can you look at it?

typing.zip (569 Bytes)

Yes, it should but it seems there is a problem with frame rate and short clips:

This change did indeed work for me, so I suggest you try that tip.

Since you use a table, you have to use the padding property (https://www.w3schools.com/css/css_table.asp) as follows:
table td { text-align: center; vertical-align:bottom; font: 25px 'Arial'; color: black; padding-bottom: 20px; }
I do not use a table but a simple div element with text in it. One advantage is for me that I can use top, bottom, right and left to position the text. But to be honest, I do not know if that is really a better way, I just got used to this :sweat_smile:.

Sorry, been playing in a golfing event all weekend, so just seen this.

The problem is that browsers usually have a MARGIN on the <body> element(for Chrome it is 8px wide) and so your table, which is supposed to occupy the whole screen actually causes the body to overflow outside the screen.

Put the following CSS code in front of the “table” declaration:

	body {margin: 0; padding: 0; overflow: hidden; }

or change the table width and height to 100% instead of 100 vw and 100vh.