Styles not displayed correctly in the Text: Rich filter

I’m currently testing the CoffeeCup HTML Editor. I want to use it to create HTML text files (like movie credits, titles etc…) that I hoped I could import in the Text: Rich filter.

But there is a problem: The Text: Rich filter doesn’t seem to process styles the same way CoffeeCup does (or Google Chrome). The margin, padding and line-height properties, for example, are not displayed as expected in Shotcut. Also, the text-shadow property doesn’t work.

Is there a specific way to insert styles in the HTML file for Shotcut to display the text correctly in the Text: Rich filter?

Text displayed in the CoffeeCup Editor’s preview tab:

After saving the html file from CoffeeCup, this is how it is displayed in Google Chrome (identical to the CoffeeCup preview) :

htmltext02

And this is how the text is displayed in Shotcut AND in the files exported from Shotcut (no shadows an the distance between the lines is incorrect):

htmltext03

“text-shadow” is not supported. “padding” and “margin” are supported, but only if you specify 1 value for all 4 orientations (top, right, bottom left) e.g. “margin: 10pt;” (otherwise use "margin-top, margin-right… etc). “line-height” should work.

For a complete list of the supported HTML4/CSS subset see:

1 Like

Thanks for the help @Elusien. And for the link. I searched for that kind of information, but I didn’t really know what to look for.
:+1:

It’s a bit disappointing that text-shadow is not supported. Fortunately there are almost always workarounds hiding somewhere, waiting to be found.

In this case:

  1. Made a copy of the html file, with text in black instead of white.
  2. Track V3: Text: Rich + white text file + Scroll Up preset.
  3. Track V2: Text: Rich + black text file + Scroll Up preset.
    Added a SP&R filter to move the text down one pixel.
    Added a Blur: Box filter ( W 2px, H 2px).
  4. I also applied a Blur: Gaussian filter (1.5%) on the white text to soften it a bit.
  5. Track V1: Background video or image.
2 Likes

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