Comments (9)
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.
from libjass.
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.
from libjass.
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 ...
from libjass.
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.
from libjass.
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).
from libjass.
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.
from libjass.
(Answered in #13)
from libjass.
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.
from libjass.
And that ^ commit fixes it for that case.
from libjass.
Related Issues (20)
- "PlayResX" is not treated as optional! -> breaking HOT 15
- When PlayResX or PlayResY are defined as zero, tab crashes. HOT 1
- Unexpected style margin collisions HOT 1
- \n being rendered in plain text, wrapping style 2 HOT 2
- Request for new release HOT 2
- How to crate subtitle from JSON Object ? HOT 2
- libjass.deserialize dialogue style changes not work HOT 2
- When playing preroll ads, sometimes the text appears very small HOT 1
- Why the npm package doesn't contains a type definition file. HOT 1
- Line-specific styles do not override style definitions HOT 2
- \fad with a fadeout of 0 is treated as fading out for the duration of the line HOT 1
- Opt-in support for command execution HOT 3
- [Feature Request]Can you convert a .ass subtitle to VobSub format? HOT 2
- dialogues ID will be created next to the last dialogues ID from previous object HOT 3
- when I create new dialogue can I get a dialogue class tag? HOT 1
- Update Typescript version HOT 6
- Serialize back to .ass HOT 1
- implement smart line wrapping
- Lines can be "pushed away" by other lines on the same layer HOT 2
- Lines are moved down when lines underneath it are removed HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from libjass.