Does Twine 1.4x support CSS blend-mode?

3liza

Hi folks! I searched the wiki and the forums for "blend-mode" and came up dry. If I'm missing something obvious, please let me know. I'm only a hobbyist-level CSS user and brand new to Twine, so it is extremely likely that my code is just bad and someone will be able to straighten me out quickly.

So CSS has a range of image-transforming functions called blend-modes. They affect images with the same kind of blend-modes you can use in Photoshop, eg, Multiply, Darken, Screen, etc. In my twine story, which is a sort of tarot deck tool, I want to use Multiply to overlap two black and white graphics:


card 1


card 2

...to create a composite graphic:



On a "shuffle" passage, $card1, $card2 and $card3 variables are set randomly. These variables are then used for the rest of the story unless the player re-shuffles. Ideally, I want to dynamically create something like the composite above, using Multiply blend-modes and negative margins (or z positioning or any of the other ways to get images to overlap), but with variables. But my (possibly completely useless) code isn't working. The negative margins are successfully overlapping the images:



But without Multiply allowing them to blend with each other. The following is very messy but I've been hitting my head on it all night with no joy:

In the passage itself:

<div class="bg-blend">
<span class="bindglyph">[img[$card1]]</span>
<span class="bindglyph">[img[$card2]]</span>
<span class="bindglyph">[img[$card3]]</span>
  </div>

CSS:

span.bindglyph > img {
	width: 500px;
	margin-bottom: -20px;
	blend-mode: multiply;
}


.bg-blend {
	background-image: $card1,$card2;
	background-blend-mode: multiply;
	background-color: white;
}

You can see I've got redundant divs and spans all trying to make the Multiply mode work. Even if I only use the span or only use the div, I can't make it work either as background images (background-blend-mode) or as regular images.

I just started using Twine several days ago, and chose Twine 1 because my story uses 200+ images and it was important to be able to drag n' drop them into the grid. My format is Sugarcane but I'm not married to it, if I need to switch to support blend-modes. Hopefully someone can interpret my rambling explanations and help me out with the CSS! I am very grateful for all the help I've gotten already just searching through this wiki and forum, this is a really wonderful community and I'm having a great time working on my twine. Thanks in advance for any help or suggestions!

3liza

After some advice, I just tried turning off default CSS and updating my code.

.bindglyph {
	background-color: red;
}

.bindglyph > img {
	blend-mode: multiply;
	width: 500px;
	margin-bottom: -20px;
}

<div class="bindglyph">
[img[$card1]]
[img[$card2]]
[img[$card3]]
  </div>

Still not working (the edges are overlapping, not blending):

greyelf

warnings:
1. The story HTML build process has a known limitation that causes it to fail with an out-of-memory error when used on a large TWS file, the exact point when this starts happening is vague but from recollection it is somewhere between 50 and 100 MBs.
This issue generally only effects stories that contain embedded images, so it is generally recommended that if an Author is planing on using many MB's of images that they store them externally instead of embedding them.

2. It appears that blend-mode based CSS is not fully supported by all web-browsers, so the following may not work everywhere.

3. I was not able to make the following CSS work with embedded images, so I used image files located in the same folder as the generated story HTML file.

Try the following in a passage, the height was calculated based on card2's height + the 190px from the background-position.

Blending two cards:
<div id="cards"></div>
<style>
#cards {
	width: 540px;
	height: 530px;
	background-repeat: no-repeat;
	background-image: url("card1.png"), url("card2.png");
	background-position: 0 0, 0 190px;
	background-blend-mode: multiply;
}
</style>

3liza

Thanks greyelf, this really put me on the right path. I can now get background images to blend nicely:



Is it possible to set these images with variables? If so, what's the syntax?

greyelf

You can use a $variable and a <<print>> macro like so:

<div id="cards"></div>
\
<<set $card1 = "card1.png">>\
<<set $card2 = "card2.png">>\
<<set $style to "<style>#cards {width: 540px; height: 530px; background-repeat: no-repeat; background-image: url(\"" + $card1 + "\"), url(\"" + $card2 + "\"); background-position: 0 0, 0 190px; background-blend-mode: multiply;}</style>">>\
<<print $style>>

TheMadExile

Rather than repeating the base parts of the style ad nauseam, I'd suggest putting everything but the background-image property in a reusable style (probably a class). That way you only have to worry about specifying that property, and any you might need to override, where you need to.

For example, and reusing greyelf's example code:

Put something like this in your styles:

.cards {
	width: 540px;
	height: 530px;
	background-repeat: no-repeat;
	background-image: none;
	background-position: 0 0, 0 190px;
	background-blend-mode: multiply;
}

Then to blend two cards together:

<<print '<div class="cards" style="background-image: url(\'' + $card1 + '\'), url(\'' + $card2 + '\');"></div>'>>

greyelf

TheMadExile wrote: »

Rather than repeating the base parts of the style ad nauseam, I'd suggest putting everything ....

I did not suggest doing this because it was unclear how many of the properties would be reusable.

The card images are different dimensions and the composite appears that it could consist of two or more cards, so the width and/or height as well as the number of elements in both background-image and background-position would change. The was some implication that there may be more than once composite per page.

TheMadExile

Which is why I suggested a class instead of an ID. Also, as I noted, overriding the parts that need to be overridden is still possible. The point is that they're unlikely to need to override everything each time (certainly background-blend-mode and, probably, background-repeat are unlikely to require it).

3liza

I am about to try the suggested code snippets, thanks everyone. Couple data points just to clear things up:

1. There are 200+ "card" images in use in this twine, all of which have a chance of being "drawn" (defined as variables: $card1, $card2, $card3) on a "shuffle" passage. Your warnings about memory issues are well heeded; I may end up storing them off-story in a folder somewhere. File sizes will likely be trimmed down before final export as well.

2. They all have roughly the same dimensions.

3. Regardless of file dimension, all cards will be displayed at the same width within the twine, probably 700px or so. Variations in height will be very minimal.

4. I always define all styles in the stylesheet, not on individual passages.

3liza

Trip report from trying out the code snippets (I can't thank you all enough for taking the time to help me out with this!): nothing worked, unfortunately. I tried this on both Safari and Chrome, resulting in a total failure to render on both browsers.

passage:

<<set $card1 to "card1.png">><<set $card2 to "card2.png">>


<<print '<div class="cards" style="background-image: url(\'' + $card1 + '\'), url(\'' + $card2 + '\');"></div>'>>

css:

.cards {
	width: 500px;
	background-repeat: no-repeat;
	background-position: 0 0, 0 190px;
	background-blend-mode: multiply;
}

here's a screenshot of my twine folder:


I tried this with <<set $card1 to "card1.png">> and <<set $card1 to "cards/card1.png">>. Neither worked. Maybe I'm missing something?

greyelf

You need to supply a height CSS attribute, it you don't then because the classed div contains no content the height defaults to zero and the background images will not appear. (see both TheMadExile and my examples)

For two cards the height should be the height of the largest card plus the hight-offset in the background-position attribute. (190)

3liza

Thanks very much for all your help! You guys have really taken a lot of time and effort to explain something to a clueless noob and I genuinely appreciate it. Thank you so much! Here's hoping I won't have to bug you again, because everything is ticking over nicely now and I can generate new "bind glyphs" every refresh. Thank you!