Tabulator in HTML-Editor/WYSIWYG?

Thanks for the file but sorry, your credits does not work with me. All text-HTML runs in different speeds.

By the way, I would like to make the credits, which has a straight empty space center linke my failed example.

Hi @dvs, have you tried @elusien’s brilliant movie-style credits generator?

[EDIT] OOps, sorry, I just noticed that this was already suggested earlier in the thread… Apologies…

I want to make it with the pure SC-program. :smiley:

I don’t know why the project isn’t working for you. I used 19.12 Beta for this project. Maybe it has something to do with your region using comma for decimal.
You could try re-trimming the filters.

You can do it.
Made a discovery today. The font makes a difference in the way the scroll works. I used Arial 48 pt for my demo. It works.

Here’s another demo. Some fonts don’t work.
Left side text is right aligned, right side text is left aligned.
Used three different fonts. First is Calibri 48 pt. Scroll stays synced. Next used Bahnschrift 48 pt. Scroll does not stay synced. Then used Arial 38 pt. Scroll stays synced.

This has been an interesting thread.

I’m getting the same as @dvs -

Tried changing the fonts as @sauron mentioned but it’s still out of sync. 19.12 beta.

Using the mlt I uploaded, it’s working perfectly.


You want to use Shotcut’s HTML editor to create an HTML file that has a 3-column table, but can’t because the editor doesn’t support this. So now you are going through hoops and jumping over fences to use features that Shotcut’s HTML editor does have in order to make up for this deficiency, however it isn’t working.

Why not use another editor (the video credits generator that jonray suggested), that can easily produce the necessary HTML file that you can feed into Shotcut’s HTML: Text filter with considerably less effort?

In both cases you are using a WYSIWYG utility to produce the HTML, you aren’t generating it by hand, but in one case it works, while in the other sometimes it does (for Sauron), sometimes it doesn’t (for you and jonray).

Thanks to you all for trying and answering!

Thank you for this demo an explaination!

I think it should be easy to make a HTML table in the Source editor and then switch to Visual for the text entry and formatting. I could add a template for this in a future version.

1 Like

This would be wonderful! :smiley:

Hi @dvs, I know you said you were against programming HTML, but just in case I can persuade you about the merits of using an external .html file for your movie-style credits :wink: - I just made a demo HTML template which creates this effect:

Here is another clip created by the same html file but this time I’ve coloured the text boxes for identification to help people see what’s going on.

It works like this:

  1. The purple box fills the whole screen - its dimensions are 1920x1080 pixels.
  2. The blue box is inside the purple box (100% of its width).
    Inside the blue box there is
  3. a green box with centred text,
  4. a grey box with left-aligned text, and
  5. an orange box with right-aligned text.

The blue box is animated with @elusien’s webvfx system to move from the bottom to the top of the purple box.

The green, grey and orange boxes are “pulled along” by the moving blue box.

When the boxes are made transparent, just the white text is seen.

I hope I have put the case for using HTML (but if not, no worries, yes, I agree an HTML table template within Shotcut would be great!)

HTML files zipped and attached, happy for anyone to try them out…
Movie style credits HTML template (31.6 KB)
Feel free to adapt the template by changing the text (please excuse the silly name examples I wrote…) . For it to work, the webvfx.js file must be in the same folder as the HTML file.
Use the Text:HTML filter to apply it to a transparent clip in SC.

1 Like

Thank you very much!
I’d like to make the credits in real movie style as I mentioned.

Your example is similar to saurons style.
But of course I’ll try your file next week. :smiley:

Here is the simple template I came up that you can edit and format in the visual editor including horizontal alignment. Remove the text above and below the two columns if you want. It is just a little hard to get the visual editor cursor to get in front of or after a table, and putting place holder text there is an aid. If you need to adjust spacing, then simply visit the <style> section in the source editor.

Two Column (17.1 KB)

1 Like

Thank you, I will try it next week and give reply!

Dan, you’re my man! :smiley:

1 Like

Looking really good, @dvs !! :smile::+1:

1 Like

Thank you!

You can see my latest TUTORIAL [GER] to create this credits:

This topic was automatically closed after 90 days. New replies are no longer allowed.