Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Preventing CSS inheritance and using tags to format passages

Hey everyone,

I'm using SugarCube 2.x with Twine 2.

I've been very happy about finding out that passages could be tagged to easily apply CSS attributes to them; however, it seems they are trampled by using the <<display>> macro.

That is, if I have a passage that has a specific CSS tag, and inside a <<display "another passage">>, the system formats "another passage" like the one it is nested in, despite "another passage" being tagged to use a different CSS style.

Is there a way to "reverse" this? (i.e. giving precedence to CSS tags of displayed passage on the CSS tags of the passage it's nested in)

Comments

  • When a Reader moves to a passage with an associated tag that tag is added as a class to both the <body> and <section class="passage"> elements of the story's HTML.

    This is not done for tagged passage shown using the <<display>> macro, which is why the CSS associated with the displayed passage's tag is not taking effect.

    I suggest wrapping the contents of the passage being displayed in an element with a class and using that class instead the passage's tag.
    <span class="forest">The contents of this passage is to be displayed within another passage!</span>
    
  • edited July 2015
    The <<display>> macro simply replaces itself with the given passage when called. It's not supposed to modify anything else, and changing it to do so would break who knows how many existing uses of it.

    greyelf suggested work-around isn't a bad one, though it could stand to be automated a bit. Try the following widget macro: (goes in a widget tagged passage)
    <<widget "render">>\
    <<if tags($args[0]).length gt 0>>\
    <<print '<span class="' + tags($args[0]).join(" ") + '"><<display "' + $args[0] + '">></span>'>>\
    <<else>>\
    <<display $args[0]>>\
    <</if>>\
    <</widget>>
    
    Usage: (use this instead of <<display>> wherever you want this behavior)
    <<render "another passage">>
    

    That will do what greyelf suggested, but automatically.

    You may need to alter the selector sets of your style rules slightly to accommodate the double usage (i.e. to work with normally displayed passages and passages included via <<render>>). For example, if you had passages tagged with forest, which was supposed to make the text green, then the following would work for both:
    #passages .forest {
    	color: green;
    }
    
  • Thanks to both of you (again) !
Sign In or Register to comment.