Ask a Question

Using base64 encoded images within a passage for CSS styles?

0 votes
by (1.2k points)

I'm building a shop system and whilst there's a default CSS setup for shops I'm customising some of them to add a bit of character. I'm doing this by having something like this in the passage:

<style>
div[id$='Male']:not([class*="Female"]).shopInventoryList {
    display: inline-table;
    background-color: #151515;
    border-style: none;
    margin: 5px;
    padding: 5px;
    float: left;
    border-radius: 0px;
    vertical-align: top;
    height: 200px;
    font-family: 'Patrick Hand SC', cursive;
    -webkit-box-shadow: 0 0 11px 2px rgba(255, 255, 255, 0.35);
    -moz-box-shadow: 0 0 11px 2px rgba(255, 255, 255, 0.35);
    box-shadow: 0 0 11px 2px rgba(255, 255, 255, 0.35);
	text-transform: uppercase;
    font-family: 'Source Sans Pro';
    font-weight: lighter;
}
</style>

If that's not present then the shop passage falls back on the style defined in the game's main CSS file.

That's been working fine but for the latest shop I'm working on I want to use an embedded image. I've done this elsewhere by encoding it in base64 but those have been stand-alone images using <img> tags. In theory this should work just fine in CSS and the image is under 10 KB.

It seems that I cannot embed the image properly though, at least not using <style> tags. The CSS currently looks like this: https://pastebin.com/gcC1fCE5 (I hit the character limit on here!)

I've included the full image there as from what I can tell pasting it into the style of any given element on any web page successfully adds the woodgrain texture to that element.

Also, oddly, normally I can modify the CSS using browser developer tools but as soon as I add the background imagine the rest of the CSS is shown and applied but is marked in grey and cannot be edited. Very odd.

Is this a limitation of Sugarcube?

Any suggestions on how to add such an image without external files (the main reason I'm using base64)?

1 Answer

+1 vote
by (68.6k points)
selected by
 
Best answer

I'm doing this by having something like this in the passage:

<style>
div[id$='Male']:not([class*="Female"]).shopInventoryList {
    /* […] */
    font-family: 'Patrick Hand SC', cursive;
    /* […] */
    font-family: 'Source Sans Pro';
    /* […] */
}
</style>

You're specifying the font-family property twice there.

 

Is this a limitation of Sugarcube?

You're probably running into the fact that using HTML <style> and <script> tags isn't really supported by the regular HTML tag parser at the moment.

Try wrapping your <style> tags within the verbatim HTML parser markup—i.e. <html></html>.  For example:

<html><style>
	/* your styles here */
</style></html>

 

Any suggestions on how to add such an image without external files (the main reason I'm using base64)?

The above suggestion will probably work.  That said, what compiler are you using?

 

Show 6 previous comments
by (1.2k points)
Excellent! That works nicely!

Is that hidden away in the documentation somewhere as I feel like I would have encountered it by now if it was. Usually the issue I have with things like this is the precise nature of the syntax. So in this case I didn't know that it shouldn't have, for example, HTML image tags in the passage.

Then again even if I'd got that right I wouldn't have known about the Twine.image tag so thanks!
by (68.6k points)
Information on the construction of image passages?  Not as far as I know.  There's nothing in SugarCube's docs certainly.

Due to having to construct a Base64 encoded data URI for each image, it's the kind of thing that, frankly, should be handled by the tooling, so needing a HOWTO for it has never really come up.

I brought it up here simply because you were already doing the hardest part.
by (1.2k points)
edited by

That at least makes me feel a bit less of a prat laugh

I do my best to read the documentation but my understanding is far from perfect. It does seem rather odd that Twine 2.x doesn't support converting images to Base64 passages though!

Is it possible to assign HTML IDs/classes to images using the image markup? I can work around the limitation if not but it'd be handy if it did support them.

edit: oops, I meant markup!

by (68.6k points)

I assume you meant image markup, not macro.

Yes, though how varies depending on which markup you wish to use.  If you meant using the [img[]] markup, then not directly, but you can wrap an element around them easily enough.  If you mean using the <img> markup, then yes, absolutely—it's a normal HTML <img> tag in most respects, it just receives some special processing.

Using a custom styles markup wrapper with the [img[]] markup

→ ID
@@#foo;[img[woodgrain]]@@

→ Class(es)
@@.bar;[img[woodgrain]]@@
@@.bar.baz.qaz;[img[woodgrain]]@@

→ ID & class(es)
@@#foo;.bar;[img[woodgrain]]@@
@@#foo;.bar.baz.qaz;[img[woodgrain]]@@

A few example style rules (mostly just the selectors):

#foo>img { … }
.bar>img { … }
#foo.bar>img { … }

Using the <img> markup

→ ID
<img data-passage="woodgrain" id="foo">

→ Class(es)
<img data-passage="woodgrain" class="bar">
<img data-passage="woodgrain" class="bar baz qaz">

→ ID & class(es)
<img data-passage="woodgrain" id="foo" class="bar">
<img data-passage="woodgrain" id="foo" class="bar baz qaz">

A few example style rules (mostly just the selectors):

#foo { … }
.bar { … }
#foo.bar { … }

 

by (1.2k points)
Oops, yep, I meant markup.

Before today I was writing custom widgets for the few images I'd decided to include in various places (not CSS related) so I've since gone back and changed them to the image passage method. My widget setup allowed me to assign IDs so I was applying CSS to them that way but now I'm using the title method instead. I don't know what I'll want to do with images in future though so I figured it might be prudent to ask whether IDs/classes were supported in the simplified markup.

The data passage method should be fine if I need it though - thanks!
Snow Theme by Q2A Market
Powered by Question2Answer
...