Howdy, Stranger!

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

Set a class for a particular text [Harlowe]

Hi all,

I'm very new with Twine and Harlowe, but okay-ish with JS and CSS. I'm looking for a way to set a class for a span (clue!) of text instead of an entire Passage or Story.

Something like
(class: "someClass")[This text will be of class "someClass"] while this will not.

I'm thinking either a macro or something that can automagically surround the given text with a <span> or <div> with the class property set to the given string. I can manage the css for the classes in the Story Stylesheet.

Is there a way (or proper way) to do this?
Cheers,
SQ

Comments

  • edited August 2016
    I'm new too, but I think you want to use named hooks:
    |someClass>[This text will be of class "someClass"] while this will not.
    (replace: ?someClass)[With some new text]
    

    Although, if you're familiar with JS and CSS, you might want to look into Snowman instead of Harlowe, as it seems to let you just write javascript with some utility functions to make Twine games. Anyone more experienced, feel free to tell me I'm wrong here, as I mentioned I'm new.

    And if you're specifically talking about injecting JS in Harlowe, maybe this is what you want?
  • Is there a way to do this?
    I don't know of a built-in macro to do exactly what you want but the suggestion by @nulcul was mostly correct about a way to roughly emulate what want.

    You can use a named hook to mark the text you want to style like so:
    |someClass>[This text will be of class "someClass"] while this will not.
    
    ... and then use a CSS selector based on the tw-hook element that will be generated for the (above) named hook markup, will would look something like the following:
    tw-hook[name="someClass"] {
    	color: orange;
    }
    
  • Many thanks! I actually always wanted to do it with the price tags Named Hooks, but I didn't think it could be done without macros.

    So it can be done with (somewhat) simple CSS. Cool!

    Cheers!
Sign In or Register to comment.