Shotcut HTML credits with table with two columns of equal width

Dear Shotcut community,

I am struggling with the creation of my credits for my movie in shotcut. I created a black frame on which I used a rich-text filter. I created an html file with the credits content and opened it in my rich-text filter. I simply want a table with two columns of equal with, so that the divider between the two columns is in the middle of the screen. In some rows of this table I need a column with colspan=2, so that I can place a text in the middle of the screen instead of in one of the columns. Sadly shotcut ignores my column width: 50% and the first column is smaller the the second one. To demonstrate my problem, I created this html sample code:

<html>
	<head>
		<meta charset="UTF-8">
		<style>
			body {
				background-color: black;
				color: white;
				font-family: 'Calibri';
			}
			table {
				width: 100%;
				border-collapse: collapse;
			}
			th, td {
				width: 50%;
				border: 1px solid black;
				padding-left: 100px;
				padding-right: 100px;
				padding-top: 20px;
				padding-bottom: 20px;
			}
			.rechts {
				text-align: left;
				vertical-align: top;
				font-size: 75px !important;
			}
			.ende {
				text-align: center;
				font-size: 500px !important;
			}
		</style>
	</head>
	<body>
		<table>
			<tr>
				<td class="rechts">------------------------------------------------------------------------------------------------------------------------</td>
				<td class="rechts">------------------------------------------------------------------------------------------------------------------------</td>
			</tr>
			<tr>
				<td class="ende" colspan="2">Test</td>
			</tr>
		<table>
	</body>
</html>

In shotcut, the output looks like this:

What I want is the marked red line (divider between the two table columns) to be where the green line is (middle of the screen), regardless what sample text I use instead of the “—” sample text. In my browser the html is displayed correctly:

When I exported the html from the shotcut filter, it turned out that shotcut removes the width: 50% property from the tables columns as the exported html looks like this:

<!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;" bgcolor="#000000">
<table border="0" style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; border-collapse:collapse;" cellspacing="2" cellpadding="0">
<tr>
<td style=" vertical-align:top; padding-left:100; padding-right:100; padding-top:20; padding-bottom:20; border-top:1px; border-right:1px; border-bottom:1px; border-left:1px; border-top-color:#000000; border-right-color:#000000; border-bottom-color:#000000; border-left-color:#000000; border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid;">
<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:'Calibri'; font-size:75px; color:#ffffff;">------------------------------------------------------------------------------------------------------------------------</span></p></td>
<td style=" vertical-align:top; padding-left:100; padding-right:100; padding-top:20; padding-bottom:20; border-top:1px; border-right:1px; border-bottom:1px; border-left:1px; border-top-color:#000000; border-right-color:#000000; border-bottom-color:#000000; border-left-color:#000000; border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid;">
<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:'Calibri'; font-size:75px; color:#ffffff;">------------------------------------------------------------------------------------------------------------------------</span></p></td></tr></table>
<table border="0" style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; border-collapse:collapse;" cellspacing="2" cellpadding="0">
<tr>
<td style=" padding-left:100; padding-right:100; padding-top:20; padding-bottom:20; border-top:1px; border-right:1px; border-bottom:1px; border-left:1px; border-top-color:#000000; border-right-color:#000000; border-bottom-color:#000000; border-left-color:#000000; border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid;">
<p align="center" style=" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;"><span style=" font-family:'Darleston'; font-size:500px; color:#ffffff;">Test</span></p></td></tr></table></body></html>

Does anybody know whether this is a bug or not and maybe some knows how to fix this problem to the two columns are equally spaced?

A really appreciate any help. Thank you in advance!

Best regards
Michel

Here is a link to the Qt docs about their HTML support.

The editor is made by Qt as well. All we do is embed the component and coordinate with toolbar and menu actions.

Hi, thank you very much for this link, as I didn’t see the the link to the docs before scrolling down a little, here is the links directly:

So it was probably my fault that I missed the link to the really interesting docs when I tried to find out something about this textfilters documentation!

Regarding to the QT docs it turned out that the newer HTML5 code is not supported. Basically I did something like this with my internal style sheet:

<td style="width:50%">Some text placed not correctly</td>

This style attribute was ignored by QT, because it is not supported. The same applies if you use internal or external instead of inline CSS styles.
But in the docs I found that the deprecated HTML4 width attribute for <td> is supported. Using HTML4 code like this does the trick:

<td width="50%">Some correctly placed text</td>

Thank you for your help!

2 Likes

I am glad to hear there is a solution for this. The Insert Table menu item in the editor is our own function that generates the HTML to insert. We could compute the % based on the number of columns and set it. I think this is likely what most people want instead of dynamically changing widths as you type, which is a rather wild or erratic user experience.

I didn’t use shotcuts HTML editor since it is only a WYSIWYG editor and I have no access to the html code unless I export it. If something doesen’t work I cannot see the code, thats not how I like to work. And for me it’s easier to change something in the html code than trying to find out how to perform that change via the gui (if that is even possible). So if I could wish for something I’d like a html code editor too in shotcut. Thank you for your kind support!