HTML/SVG as a variable TWINE 2 SUGARCUBE

Authoring Twine
1

Please specify version and format if asking for help, or apply optional tags above:
Twine Version: 2.2
Story Format: Sugarcube 2
Hello. I am working on a novel with some pretty SVG ornaments on each page and also I’d like to to use ornaments for the first letter on a page, you know as in very old writings.
I am new to Twine and Sugarcube but I am already well into developing my story. I found a way to enclose SVG very well in Twine, but I have to repeat the entire code again and again. The final product is very pretty in black background and with SVG line-art.
So my thought was, that maybe there is a way to call variables/macros I make up front with all the HTML/SVG code so I just call the snip I want to use. Maybe you even know where I can find a tutorial or Youtube on the matter. I think maybe CSS could be the ansver, but I can’t find anything about it.

2

Yeah, you can do that with widgets fairly easily, and it will need a bit of CSS as well.

Just add something like the following to a (non-special & non-story) passage with “widget” and “nobr” tags:

<<widget "N">>
	<span class="iconTxt">
		<svg class="iconSVG" fill="white" viewBox="0 0 160 155" xmlns="http://www.w3.org/2000/svg">
			<path d="m11 1c-9 0-10 4-10 9 0 5 1 10 10 11l1 110c0 6 2 10 11 10h30c10 0 10-3 10-11-0-7-4-10-11-10v-62l51 51 0 22c0 6 2 10 11 10h30c10 0 10-3 10-11-0-8-4-10-11-10v-110c0-6-3-9-11-9h-30c-9 0-10 4-10 9 0 5 1 10 10 11l1 62-51-51v-22c0-6-3-9-11-9z"/>
		</svg><<= $args.raw>>
	</span>
<</widget>>

and this in your Stylesheet section:

.iconTxt {
	display: inline;
}
.iconSVG {
	height: 30px;
	vertical-align: text-bottom;
	padding-right: 1px;
}

And then, in your passages, wherever you wanted to start a paragraph with a fancy letter “N” you’d do:

<<N ew>> paragraphs should start with one of these widgets.

That paragraph would begin with the word “New”, but with a fancy looking “N” (and yes, there has to be a space between the first letter and the rest of the word like that). You can adjust the height of that letter in the Stylesheet from “30px” to a different height if that’s too small or too large.

If your SVG letters are not aligned properly, you can fix that by modifying the viewBox property in the SVG.

Just make one widget like that for each letter that you need, and then the rest should be a piece of cake!

Enjoy! :slight_smile:

3

THANKS a lot. This is an easy way to do it.

4

Hello again. The example worked like a charm.
Instead of a widget in Twine. Maybe i could have it in JavaScript to keep my code clean not to have many non-story passages. Do you know how to do it in JS?

5

You can put all of your widgets into a single story passage. That’s what I usually do.

Alternately you can use SugarCube’s macro API in JavaScript to create your macros. It would look something like this:

Macro.add('N', {
	skipArgs : true,
	handler  : function () {
		var txt = '<span class="iconTxt"><svg class="iconSVG" fill="white" viewBox="0 0 160 155" xmlns="http://www.w3.org/2000/svg"><path d="m11 1c-9 0-10 4-10 9 0 5 1 10 10 11l1 110c0 6 2 10 11 10h30c10 0 10-3 10-11-0-7-4-10-11-10v-62l51 51 0 22c0 6 2 10 11 10h30c10 0 10-3 10-11-0-8-4-10-11-10v-110c0-6-3-9-11-9h-30c-9 0-10 4-10 9 0 5 1 10 10 11l1 62-51-51v-22c0-6-3-9-11-9z"/></svg>' + this.args.raw + '</span>';
		jQuery(this.output).wiki(txt);
	}
});

and that will work identically to the widget I gave you earlier.

Have fun! :slight_smile: