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