Yes, I only export “#screen”, which has a transparent background, not “body or html”, where the coloured/gradient background exists. The opacity (and colour) of the table’s background is a parameter that can be changed.
1 Like
Ah, yes, of course. What threw me was, I thought the PNG background was white. Until I realised it was transparent.
Clever. Works a treat!! Bravo, yet again…
1 Like
PS I just tweaked the HTML file as follows:
--border_radius: 30px;
--border : 4px solid white;Wow. Thanks for all the offers of help.
I will now see if something works for me.
I would like to make the following general comment:
My streams are 1-3 minute badminton-practice films with about 1-10 text notes in each.
So far I have created about 180 streams and there are many more to come:
My Streams on youtube
When I have exported a stream with shotcut and watch it, I may change the German texts and/or English translations again because I don’t like some words.
That’s why the conversion should work with a simple text change in shotcut without changing programms if possible.
If you want to do it all in Shotcut without too much work your only real option is use the Text:Rich filter with tables that have square corners. Anything else will be quite a bit of hassle.
Personally, if you want round corners, my workflow would be:
- Create a text file with each of your texts in it.
- Open the HTML file in a browser and copy-paste each text to create the PNG files.
- Insert them in the timeline.
- If you want to edit a text, do so in the editor for the text file then copy-pate it to the table on the HTML webpage and export the PNG.
- Replace the PNG on the timeline with the new one.
This is a very quick and relatively simple way to get what you want.
That is the result with Elusiens html-png-export.
It looks exactly the way it should.
I will still not use this great solution:
- I have to change the programms. Shotcut/Browser/Shotcut.
- Each project gets 1 *.mlt and 1-10 *.png.
- For a small word change, both languages have to be completely re-entered and a new *.png created.
- For position changes, 1 additional filter must be inserted.
The rounded corners would be nice, but then I better stick to pointed corners.
I was hoping to have 1 *.html per text: Rich customised with rounded corners to use again and again.
I will then probably have to live with 1 *.html with pointed corners.
That really is the only way if you want a solution that only uses the Shotcut Text:Rich filter. There is no way to get round-corners using this.
1 Like
I still have one question about the one with Text: Rich saved *.html
I can enlarge the 3 pages of the table (top, left, right) as I want. The transparent background fits exactly.
If I drag at the bottom line, the background moves out of the table (see picture).
I always have to adjust the bottom margin exactly after entering text.
What can i change?
This is the generated *.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html><head><meta name="qrichtext" content="1" /><style type="text/css">
p, li { white-space: pre-wrap; }
</style></head><body style=" font-family:'MS Shell Dlg 2'; font-size:8.25pt; font-weight:400; font-style:normal;">
<table border="2" style=" border-color:#ffffff; border-style:solid; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px;" width="100%" cellspacing="0" cellpadding="10">
<tr>
<td style=" vertical-align:top;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Verdana'; font-size:30pt; font-weight:600; color:#ffffff;">De: </span></p></td>
<td style=" vertical-align:top;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-size:30pt; color:#ffffff;">Auf der Rückhandseite im Hinterfeld</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-size:30pt; color:#ffffff;">verwende priorisiert die Vorhand.</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-size:30pt; color:#ffffff;">Die Schlagart im Vorderfeld ist frei wählbar.</span></p></td></tr>
<tr>
<td style=" vertical-align:top;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Verdana'; font-size:30pt; font-weight:600; color:#ffffff;">En:</span></p></td>
<td style=" vertical-align:top;">
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-size:30pt; color:#ffffff;">On the backhand side in the backcourt</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-size:30pt; color:#ffffff;">use the forehand with priority.</span></p>
<p style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-size:30pt; color:#ffffff;">The type of stroke in the frontcourt is freely selectable.</span></p></td></tr></table></body></html>
And this is Shotcut with the filter Text: Rich.
Transparent colour comes from “Hintergrundfarbe”.
Changing “Overflow” from “Automatic, Visible, None” does not change anything.
A moins que vous n’utilisiez beaucoup les fonctionnalités des nouvelles versions de SC (Time remap, Glaxnimate …) dans vos projets, pourquoi ne pas les réaliser avec une ancienne version ? (20.09.27)
C’est la dernière qui supporte Webvfx et qui est capable de réaliser beaucoup de projets.
Personnellement, je travaille encore avec cette version. Je fais l’inverse, dans les rares cas ou j’ai besoin des nouvelles fonctionnalités je fais l’extrait dans la dernière version, j’exporte le clip et je le réimporte dans ma V20.
Avec Text: Webvfx, vous changez le texte directement dans SC, de même avec Shapes vous modifiez le cadre, les rayons etc directement sans passer par un autre logiciel.
Unless you use a lot of the features of the new versions of SC (Time remap, Glaxnimate …) in your projects, why not make them with an old version? (20.09.27)
This is the last one that supports Webvfx and is able to realize many projects.
Personally, I still work with this version. I do the opposite, in the rare cases where I need the new features I make the extract in the latest version, export the clip and import it back into my V20.
With Text: Webvfx, you change the text directly in SC, likewise with Shapes you change the frame, radius etc directly without going through another software.
I had already thought about downgrade, but text: html is not that important to me.
Except for the corners, the results are “ok” with text: Rich.
I look forward to every new version of Shotcut and would like to benefit from new features and bug fixes.
@thegrobi, There is nothing you can do other than to grab the bottom line of the VUI (Visual User Interface) and drag it to the bottom line of the table.
Unlike the HTML I created, the background (semi-transparent black) is added by the filter and is not part of the HTML. The filter does not know where the table ends. You could for example have more text after the table(or before it) e.g. “The table above gives instructions in both German and English”. This would be a <p> element after the table and would appear with the semi-transparent background behind it, there is no way to get a coloured background for just that text using the VUI. There is no ‘text-shadow’, no ‘gradients’, lot’s of other CSS facilities are missing.
The Text:Rich filter was not intended to be an all-singing all-dancing replacement for the old Text:HTML filter. While better than nothing, it is a poor relation compared to HTML with CSS. e.g. try to get rid of the extra space after “De:” and “En:” in the first column - it can’t be done in the VUI (other than reducing the width of the whole table, or manipulating the width of the text in the second column). Try adding/subtracting padding or margins - it can’t be done in the VUI.
CSS is an extremely rich language, Qt’s RichText as used by Shotcut’s Text:Rich filter is not - but then again it was never intended to be.
Thanks for the explantations.
Here is the result with DE/EN-translations per text: Rich table.
https://youtu.be/z2IfL1Wld8c
For the moving markers in slow motion I used Glaxnimate + Text: Rich.
Time of encoding for this 3:06 min. video is 14 min.
1 Like
I have another problem with text: Rich
I let a text scroll upwards.
This background is displayed briefly to deep, before the hight is in the table. How do I get rid of it?
I have tried several versions of Shotcut:
22.01
22.12
23.03
This is the complete video. Right at the beginning at second 2-3 you can see the problem.
Here you see my shotcut 22.12
And here is the mlt.
Instagram Hinterfeld Vorhandabwehr.mlt (17.8 KB)
Try turning off Export > Video > Parallel processing.
The Overflow parameter controls what happens with the text when the text overflows the background - not the other way around.
In the lower rich text’s simple keyframes, the Background size > height animates from 1080 to 256. Go to the first frame and change its height to 256.
1 Like
It is not only in the export file. I see it also in the editor.
That worked.
But i don´t know, why there stood 1080.