Revision of Twine: apply CSS to passages with specific tags from Fri, 01/25/2013 - 02:35

Here's something neat:

Passage.prototype.render2 = Passage.prototype.render; Passage.prototype.render = function () { var b = this.render2(); b.setAttribute("tags",this.tags.join(" ")); return b; };

Adding this JavaScript snippet means that the tags you give to passages in your Twine games are now also applied to the rendered passage divs.

What this means is that you can then write CSS that applies only to passages with specific tags. The selector syntax for this is [tags~=tagname]

So, if you tag a bunch of passages with "dream", you can then apply specific CSS to just those passages like this:

[tags~=dream] {
color: aqua;
text-shadow: aqua 0 0 3px;

Of course, this won't work for passage text displayed with the << display >> macro and it won't work for the Start passage. (There is, however, a way for CSS to target just the Start passage, by using #passageStart as a selector.)

For new people: the JavaScript goes inside a disconnected passage that has "script" as its only tag.