Wrong font color when using opacity

[Dador]

libjass with enableSvg = true:

libjass with enableSvg = false: (notice that it darken than previous, it more noticeable on colored text)

Aegisub (libass):

Script:

[Script Info]
Title:
ScriptType: v4.00+
WrapStyle: 0
PlayResX: 1280
PlayResY: 720
ScaledBorderAndShadow: yes

[V4+ Styles]
Format: Name, Fontname, Fontsize, PrimaryColour, SecondaryColour, OutlineColour, BackColour, Bold, Italic, Underline, StrikeOut, ScaleX, ScaleY, Spacing, Angle, BorderStyle, Outline, Shadow, Alignment, MarginL, MarginR, MarginV, Encoding
Style: Default,Trebuchet MS,54,&H00FFFFFF,&H000000FF,&H00020713,&H00000000,-1,0,0,0,100,100,0,0,1,2.55,0,2,0,0,42,1

[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 1,0:00:00.00,0:00:36.95,Default,,0,0,0,,{\alpha&7E&}test

Maybe just remove rgba from "color" and "text-shadow" and add "opacity". I tried it via debugger and seems like everything is okay.

For example replace:

color: rgba(255, 255, 255, 0.686275);
text-shadow: rgba(19, 7, 2, 0.686275) 0px 0px 0px, ...many shadows...;

to:

opacity: 0.686275;
color: rgb(255, 255, 255);
text-shadow: rgb(19, 7, 2) 0px 0px 0px, ...many shadows...;

Or is there some kind of pitfall?

[Arnavion]

The pitfall is that opacity is separate for the text (\1a) and the shadow (\3a), so setting global opacity only works when both are the same value, not in general.

[Arnavion]

The darkness comes from the text shadows being rendered behind the text. The SVG filter doesn't have this issue since it overlays the original text on top, so the outline behind the text is not rendered.

Actually the SVG version has the wrong color also. For example, Aegisub's default blue video background ( rgb(47, 163, 254) ) results in rgb(152, 209, 255). Without text shadow and filter, the libjass color matches it almost correctly - rgb(151, 209, 254). With text-shadow, it becomes rgb(137, 131, 128). With SVG filter, it becomes rgb(171, 201, 225). The reason is the same - the outline appears behind the transparent text and makes it darker. The darkness in text-shadow is more extreme because there are many outlines, each of which contributes to the darkness. In the SVG version there is only one combined outline, so it only contributes a little darkness.

[Arnavion]

That ^ commit fixes it for SVG outlines, since it's possible to cut the original shape out from the composite outline.

It's not so easy with text-shadow ...

[Dador]

Maybe "possible way" to do this would be to implement outline via different CSS-property. Before trying disabling SVG I'm wondered "How did you implemented outline in plain CSS?". Anyway, thing with many text-shadows was pretty interesting.

[Arnavion]

I remember I had at one point made a prototype that rendered every dialogue twice. The first one had only text-shadows and no color, and the second one had only color and no text-shadows. The text-shadows-only one was put into its own set of layer divs so that it would appear in the same position as the color-only one but behind it. I threw it away because it didn't seem necessary to justify it but maybe I should bring it back.

That doesn't solve the problem still of the multiple text-shadows darkening themselves outside the text, which is for the same reason (many shadows overlapping). But maybe it's less of a problem because shadows usually tend to be dark so a darker shadow is not very noticeable.

As for other properties besides text-shadow, I don't think there are any suitable ones. The closest is the text-stroke family of properties which aren't really suitable (see #39).

[Dador]

By the way, does CSS renderer (with disabled SVG) have problems with other styles/effects? I mean is text outline is the only problem?

And the reason why I interested in CSS renderer. I found out that libjass with disabled SVG is much faster and not lagging on some karaoke (although maybe that's because some effects are disabled, lol). I made (very) small research and seems canvas has plenty of features that required for various effects (including outline). There tools like this, but I don't think that it even necessary. I think canvas would be faster than inserting svg filters for each dialogue.

Yes, I seen #13 but it's without any info. So I want to ask your opinion. You probably know something that I don't know about canvas.

[Arnavion]

(Answered in #13)

[Arnavion]

Actually, the two-div method would have the same problem (shadows behind translucent text) so it wouldn't make any difference.

Only thing I can think of is that if primaryAlpha === outlineAlpha === shadowAlpha, then set alpha in the colors to 1 and use CSS opacity property, as you suggested. Probably all alphas having the same value is the common case, so this should handle most subs.

[Arnavion]

And that ^ commit fixes it for that case.