tts:textOutline about imscjs

[palemieux]

tts_textOutline_black_2px_0px.ttml.txt

This is not a valid IMSC1 file since IMSC1 forbids blur radius.

tts_textOutline_blue_5pct.ttml.txt
tts_textOutline_black_2px.ttml.txt

A slight outline is displayed in both cases. It is easier to see against a dark background -- see tts_textOutline_black_2px-pal.ttml.txt.

Since CSS does not support text outline, imscJS instead uses text shadow with a fixed 1px blur radius as a fallback.

Alternatives include using the webkit-specific -webkit-text-stroke and/or the simulation trick at https://css-tricks.com/adding-stroke-to-web-text/.

Thoughts?

[jasonliv]

Ok, I see that it is there, just smaller than expected. I think at least setting the CSS shadow to the intended outline thickness will give a closer approximation, although still not perfect as you mentioned.

I tried another example with white background and tts:textOutline="black 10%". Given that the font size is being computed to 22.5px and the outline is 10% in this example, I would expect the outline thickness to be computed at 2.25px. If I manually change the CSS shadow size from 1px to 2.25px then it looks closer to what I'd expect and closer what the example screenshot from the TTML spec shows. Take a look at this screenshot and zoom in on the line "How cheerfully..."

What do you think?

[palemieux]

What do you think?

Ok. Will do.

[jasonliv]

-webkit-text-stroke can only do a center aligned stroke, which looks terrible for larger stroke widths, so that is not a useful alternative IMHO. The hack with multiple shadows looks ok at 1px (better than a single shadow at least) but looks worse at > 1 px. That's unfortunate...

[btsimonh]

Hi Pierre,

I notice textOutline is currently ignored by current imscJS?

thoughts on the below?

ref textOutline, I map
tts:textOutline="black 0.05em 0.05em"

to (roughly):

      text-shadow:
                black 0.05em 0.05em 0.05em, 
                black -0.05em -0.05em 0.05em, 
                black -0.05em 0.05em 0.05em, 
                black 0.05em -0.05em 0.05em,
                black 0 0.04em 0.05em, 
                black 0 -0.04em 0.05em, 
                black -0.04em 0 0.05em, 
                black 0.04em 0em 0.05em;

Resulting in:

in my (old) imsc.js, I have added:

        new HTMLStylingMapDefintion(
            "http://www.w3.org/ns/ttml#styling textOutline",
            function (context, dom_element, isd_element, attr) {

                if (attr === "none") {

                    dom_element.style.textShadow = "";

                } else {
                    let color = "rgba(" +
                        attr.color[0].toString() + "," +
                        attr.color[1].toString() + "," +
                        attr.color[2].toString() + "," +
                        (attr.color[3] / 255).toString() +
                        ") ";

                    let xyval = (attr.thickness * context.h) + "px ";
                    let diagval = ((attr.thickness*0.75) * context.h) + "px ";
                    let blur = (attr.blur * context.h) + "px ";
                    
                    textshadow = '';
                    textshadow += color+xyval+'0px '+blur+', '; 
                    textshadow += color+'-'+xyval+'0px '+blur+', '; 
                    textshadow += color+'0px '+xyval+blur+', '; 
                    textshadow += color+'0px -'+xyval+blur+', ';
                    textshadow += color+diagval+diagval+blur+', '; 
                    textshadow += color+'-'+diagval+diagval+blur+', '; 
                    textshadow += color+'-'+diagval+'-'+diagval+blur+', '; 
                    textshadow += color+diagval+'-'+diagval+blur;
                    
                    
                    dom_element.style.textShadow = textshadow;

                }
            }
        ),

and

        new StylingAttributeDefinition(
                imscNames.ns_tts,
                "textOutline",
                "none",
                ['span'],
                true,
                true,
                function (str) {

                    /*
                     * returns {c: <color>?, thichness: <length>} | "none"
                     * 
                     */

                    if (str === "none") {

                        return str;

                    } else {

                        var r = {};
                        var s = str.split(" ");
                        if (s.length === 0 || s.length > 3) return null;
                        var c = imscUtils.parseColor(s[0]);
                       
                        r.color = c;
                        
                        if (c !== null) s.shift();

                        //if (s.length !== 1) return null;

                        var l = imscUtils.parseLength(s[0]);

                        if (!l) return null;
                        r.thickness = l;
                        r.blur = '0%';
                        
                        if (s.length > 1){
                          s.shift();
                          l = imscUtils.parseLength(s[0]);
                          r.blur = l;
                        }


                        return r;
                    }

                },
                function (doc, parent, element, attr) {

                    /*
                     * returns {color: <color>, thickness: <norm length>}
                     * 
                     */

                    if (attr === "none") return attr;

                    var rslt = {};

                    if (attr.color === null) {
                        
                        rslt.color = element.styleAttrs[imscStyles.byName.color.qname];
                        
                    } else {
                        
                        rslt.color = attr.color;

                    }

                    if (attr.thickness.unit === "%") {

                        rslt.thickness = element.styleAttrs[imscStyles.byName.fontSize.qname] * attr.thickness.value / 100;

                    } else if (attr.thickness.unit === "em") {

                        rslt.thickness = element.styleAttrs[imscStyles.byName.fontSize.qname] * attr.thickness.value;

                    } else if (attr.thickness.unit === "c") {

                        rslt.thickness = attr.thickness.value / doc.cellResolution.h;

                    } else if (attr.thickness.unit === "px") {

                        rslt.thickness = attr.thickness.value / doc.pxDimensions.h;

                    } else {

                        return null;

                    }

                    if (attr.blur.unit === "%") {

                        rslt.blur = element.styleAttrs[imscStyles.byName.fontSize.qname] * attr.blur.value / 100;

                    } else if (attr.blur.unit === "em") {

                        rslt.blur = element.styleAttrs[imscStyles.byName.fontSize.qname] * attr.blur.value;

                    } else if (attr.blur.unit === "c") {

                        rslt.blur = attr.blur.value / doc.cellResolution.h;

                    } else if (attr.blur.unit === "px") {

                        rslt.blur = attr.blur.value / doc.pxDimensions.h;

                    } else {

                        return null;

                    }
                    

                    return rslt;
                }
        ),