Home › Development Diaries › L's blog

Twine: apply CSS to passages with specific tags (Tag CSS)

Thu, 01/24/2013 - 23:07 — L

You can write CSS that applies only to passages that have been given specific tags in Twine!

If you're using this 1.3.6 alpha you can use this syntax on passage div elements out-of-the-box, but to use it to format body elements requires including this Javascript code, inside a disconnected passage that has "script" as its only tag:*

(function(){ var render2 = Passage.prototype.render; Passage.prototype.render = function () { var b = render2.call(this); var t = this.tags.join(" "); document.body.setAttribute("data-tags", t); return b; }}());

If you're using a standard, earlier version of Twine you'll need to include this Javascript code, inside a disconnected passage that has "script" as its only tag:

(function(){ var render2 = Passage.prototype.render; Passage.prototype.render = function () { var b = render2.call(this); var t = this.tags.join(" "); document.body.setAttribute("data-tags", t); b.setAttribute("data-tags",t); return b; }; if(state) { var tgs = state.history[0].passage.tags.join(" "); var fc = $('passages').firstChild; fc.setAttribute("data-tags",tgs); }}());

...and if you're using Sugarcane, add this code after that to make it work with the Start passage and bookmarked passages:

if(state) (function(){ var it = setInterval(function(){ var fd = $('passages').firstChild; if (fd!=fc) { clearInterval(it); fd.setAttribute("data-tags",tgs); } },0); }());

CSS Syntax
The selector syntax for passages with specific tags is [data-tags~=tagname]. So, if you tag a bunch of passages with "dream", you can then apply specific CSS to just those passages like this: 

[data-tags~=dream] {
  color: aqua;
  text-shadow: aqua 0 0 3px;
}
The preceding code will affect both the passage div and the body element. To select those elements separately, use syntax like this:
body[data-tags~=blood] {
  background-color:red;
  color: black;
}
.passage[data-tags~=blood] {
  border: 5px solid white;
  font-size: 110%;
  width: 30em;
}
Some variations on the selector syntax exists that you might find useful:
[data-tags*=swamp] for a passage whose tags contain "swamp" (such as "grayswamp" or "swampfort").
:not([data-tags~=gold]) for a passage which does not have the tag "gold".

And, of course, you can select elements of a matching passage <div> by combining selectors with ".body", ".body .internalLink" and such:

.passage[data-tags~=cave] .body .internalLink { color: gold; }

Caveat: all of this won't work for passage text displayed with the << display >> macro unless you use something like

If you like this code, consider using these macros that let you control tags inside the game.

*This is really just a workaround until browsers support CSS selector subjects. Ideally you could just do !body .passage[data-tags:], but alas, not this year.

Version history:

  1. 11/2/13 - Possibly fixed crash in situations where 'state' hadn't been initialised yet.
  2. 6/2/13 - Additional code to affect the <body> tag was added for both versions.
  3. 5/2/13 - Altered to use "data-tags" attribute rather than "tags".
  4. 4/2/13 - Split into two snippets for Twine 1.3.6 alpha and Twine stable versions.
  5. 26/1/13 - Altered to affect the Start passage.
  6. 25/1/13 - Initial.

Comments

Fri, 01/25/2013 - 05:52 — caevstroy

Is it possible to change CSS

Is it possible to change CSS depending on some variable? For instance if $thingy = true then all passages will appear a certain way, and if it changes so does the appearance

I ask because a friend of mine...

Fri, 01/25/2013 - 07:34 — kitbeard

Can't get it to work!

I'm working on a twine game at the moment where I wanted to give two different feels, so I thought this would be useful, but I can't get it to work! Admittedly, it's a while since I've used css, but I'm also using your dissolve, which is running fine, as long as I don't put this in too. (Technically, it's running fine as long as I don't have the second block of code on this page in, just having the first one is not affecting it.) Both firefox (18.0.1) and ie (9.0.loadsadigits) are complaining that there is a problem with the story (Script: expected "]"), but I can't see where one would go. Is it running fine for you?

---

Edit: half an hour later.

I am a silly kit. I was putting the javascripts and the csses in the same passage. It runs fine, the error was between the sofa and the keyboard.

pensive-mosquitoes