Howdy, Stranger!

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

Harlowe - fixed location for option links?

Sorry if this is a very basic question, but my noobish fiddling with css hasn't been very fruitful, and I was hoping someone might point me in the right direction.

Essentially, I present player options/choices as a set of separate links below the descriptive text, instead of inline within the text. I would like this set of links to remain in a constant location roughly at the lower right of the passage, anchored to the bottom of the passage, regardless of how much description text the passage contains. While I can sort of achieve that effect with a div container enclosing the option links in each passage, I would like to know how to do it globally, with the game stylesheet. I can create a separate pane with a header or footer tag, but I do not know how to make a particular passage's option-statements reside in it.

Appreciate any help that comes my way.


  • edited May 2017
    This code is for Harlowe 2.0.1. It might need a bit of fiddling if you're using 1.2.4. In the future, please include the version number of the Story Format you're using in your question.

    Something like this can probably get you started:

    First, initialize some variable in your startup-tagged passage to hold the passage containing your links--you can hold the links in a separate passage to keep things simple, which is what I'm doing. I use $choices in the example below. Then we'll throw this in a footer-tagged passage:
    <div id='choices'>(display: $choices)</div>

    We'll style our container in CSS:
    #choices {
      position: fixed;
      border-top: 2px #eee solid;
      padding: 1em 12em;
      margin-top: 1em;
      bottom: 0; right: 0; left: 0;
      height: 25%;
      background: #000;
      overflow: auto;

    That'll give us roughly what we want, but you'll probably want to fine tune the styles. You may also want to adjust the passages or tw-story element to avoid some overlapping problems in longer passages or on smaller screens/windows. I put this:
    tw-passage {
      margin-bottom: 10em;

    Then, in your passage's text, include something like this to show the correct choices in the correct passage:
    (set: $choices to 'choices-passage-1')\
    Text of your passage.
    :: choices-passage-1
    [[do one thing]]
    [[do a different thing]]

    If you don't want to use two passages and would rather keep everything together, try something like this instead, and skip the $choices variable and the footer-tagged passage:
    text text text
    <div id='choices'>[[link 1]]
    [[link 2]]

    There's functionally no difference, it's up to you if storing the choices in a separate passage makes thing easier or harder on you.

    I'm not sure if this is exactly what you were asking for, let me know if I missed something.
  • @Chapel: Is it a good idea to use a percentage based height on the choices ID'ed element when you are using a font metric based sized bottom margin on the tw-passage element?
  • edited May 2017
    greyelf wrote: »
    @Chapel: Is it a good idea to use a percentage based height on the choices ID'ed element when you are using a font metric based sized bottom margin on the tw-passage element?
    Nope. That was dumb of me. @cueball, you should choose one or the other in your final code. Thanks for catching that.
  • @Chapel - thank you for the reply and markup examples. The second method is roughly what I've been doing, it just hadn't occurred to me to define a custom #choices container in the story stylesheet to be inherited by all my passages. I have instead been copying and pasting the div definition in every passage, which of course defeated most of the point of a stylesheet in the first place and would have been a hassle to change later.

    What can I say - this is my first brush with anything resembling object-oriented code/design. Using your suggestion, I got what I needed, though. Thanks again!
Sign In or Register to comment.