Html5 filter fonts

Bug
1

Hi Everyone,

I am trying to get shotcut overlay html (with webvfx) to show Japanese fonts. The built in html editor works as expected but shotcut itself does not work. Currently using windows and the file encoding is utf-8.

Any hints much appreciated!

2

Can you post the html file to test?

3

OK to get something simple I rebuilt the page from scratch and in the process found the issue. The header is required in the html5 render but not in the GUI editor (or the rest of the web).

Thanks for the quick response. Here is my cut outline if anyone wants it:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
    function Producer(textStyle) {
        this.textStyle = textStyle;
    }
    Producer.prototype.render = function (time) {
        //animation goes here time runs from 0-1
    }
    function onLoad() {
        handleFontSize();
        var text = document.getElementById("text");
        text.innerText = "日本"; //webvfx.getStringParameter("title");
        var producer = new Producer(text.style);
        webvfx.renderRequested.connect(producer, Producer.prototype.render);
        webvfx.readyRender(true);
    }
    function handleFontSize() {
        // Set base font-size to 10% of window height
        document.body.style.fontSize = (window.innerHeight * 0.1) + "px";
    }
    window.addEventListener("load", onLoad, false);
    window.addEventListener("resize", handleFontSize, false);
</script>
</head>
<body>
<div id="text"></div>
</body>
</html>
4

The header is this one (it got stripped from my last comment), replying to myself for clarity.

1 Like