Mostly fix monochrome svg rendering color and styling #1700
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
jamesmaa
previously approved these changes
Dec 27, 2024
djahandarie
approved these changes
Dec 27, 2024
Playwright test results
Details
Failed testschromium › visual.spec.js › visual |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Once again not a 100% perfect fix but I'm not sure it's even possible to get this any better using canvases and the resvg library.
The way
monochromeimages and svgs work in Yomitan is they take on whatever the text color is. Normally this will just be white or black but the user can also set custom css to do whatever color they want.This causes a very big issue when dealing solely with canvases. The previous way Yomitan handled this was by creating a mask over a background that would load the image or svg as the mask. This is horrible for performance. It is possible to apply a mask to a canvas in nearly the exact same way it was done previously, but this would be reverting some of the performance gains from using canvases to begin with.
Canvases cannot be used as masks unless they are first saved to a blob and then have a uri created for them to point to the generated image. This is not only horrible for performance but also goes very much against the way that canvases were implemented into Yomitan. Due to the use of workers, the amount of insanity required to get this working is just not worth it.
The resvg library does not support changing the fill of an svg. This would be a somewhat sketchy solution anyways since the
--text-colorvariable would have to be checked for every svg that would be rendered, it wouldn't work for images, and it would require a page refresh to update to any changes (dark/light mode, user editing custom css).The solution here gets about 95% of the way back to how it was before with some top tier css witchcraft.
The key is this css:
It can color anything to an almost exact absolute color. But it can never be 100% perfect due to relying on opacity. At opacity 0, the element wont show. At opacity 1, the colored drop shadow won't show and the element cannot be colored. It cannot handle colors that are not max brightness or max saturation.
Comparisons using an entry from
三省堂国語辞典 第八版on dark and light mode: