Changing CSS in a single passage in Sugarcube 2, and missing text-style

deadlyreg · July 2015

1. For a single passage I want to change font, text colour and background colour (and get typed.js working but we'll save that miracle for another day).

I have mostly worked in Harlowe until now so I'm still struggling to get Sugarcube 2 to do what I want, and in Harlowe I used this posted workaround:

<div style="display: none;"><img src="!@#$"; onerror="$('html').addclass().removeClass('element')" /></div>

to add classes to the passages so I could alter the stylesheet so that they looked wholly different. Is there a more elegant solution that my inexperience is hiding?

2. I used "(text-style:blur)[]" to great effect in Harlowe but I can't find any indication I can recreate this in Sugarcube. Is there an equivalent of that changer macro in Sugarcube that I can use? I really miss those effects but can't see a general CSS way of using them.

Thanks

greyelf · July 2015

SugarCube supports passage tag based styling, so all you need to do is first assign a tag (the name of the tag is up to you) and then add some CSS based on the tag to your story's Stylesheet.

eg. If I added a forest tag to a passage then I would use CSS like the following to change the text within that passage to darkgreen:

body.forest .passage {color: darkgreen;}

Harlowe uses the following CSS to show blurry text:
note: The following CSS relies on the passage background color being white.

text-shadow: 0em 0em 0.08em #000;
color: transparent;

... you can do something similar in SugarCube by adding the following to your Stylesheet.

.blur {
	text-shadow: 0em 0em 0.08em #000;
	color: transparent;
	background-color: white;
}

... them to make some text blurry you would do the following:

deadlyreg · July 2015

Is there a master list of Harlowe text-style keywords and the equivalent in CSS? I liked the simplicity of the element system for that macro, and there's a few more like shudder and emboss that I'd like to still use in my work.

greyelf · July 2015

Harlowe's documentation and project overview list it's features.

I determined the CSS for blur by first adding (text-style: "blur")[Some Text] to the main passage of a new Harlowe based story, used the Test option to view the story and then used my browser's Inspect Element option look at the HTML generated for the blurred text.

Howdy, Stranger!

Categories

Changing CSS in a single passage in Sugarcube 2, and missing text-style

Comments