Hey all,
I'm working on a game called REFT in Twine 2.0 (Harlowe) as a final project for an experimental narratives course and have made a ton of progress with the mechanics. Now I'm trying to improve the aesthetics.
I use right and left arrow images to move forward and backward through passages, and these appear at the end of the text in each passage. A big part of the game is moving left and right through passages quickly, so I would like to make these arrow buttons stationary at the bottom of each passage. This would allow players to keep their cursor in one place and spam the buttons to quickly travel through passages.
I'm having trouble fixing these buttons in place at the bottom of the passages, though. I've tried adding align="bottom" (and other variations) inside the <img> code but this does nothing. I've also tried to create tables with <table><tr></tr></table> but these also don't show up. Any thoughts on how I can stick these buttons down there?
If you want, you can play the current prototype of REFT
here to see what I'm working with.
Thanks!
Comments
1. Where is the bottom of the passage?
You have assigned the tw-story element a height of 853px so you may think that the bottom of the passage (the tw-passage element) is somewhere around that point, but by default the height of a block element (like tw-passage) is automatically calculated to be the minimum needed to fix the element's contents.
eg. If the contents is a single line of text then the bottom of the passage is just under that single line.
You can change this behaviour by assigning the tw-passage a height like so:
2. Forcing content to appear at the (new) bottom of the passage. (tw-passage)
I would first suggest wrapping your images within a div element with an ID like the following, it will make them easier to move as a set: ... obviously your actual code looks different to the above example but the principle is the same.
You can now move the #options element using CSS position related properties like position, left and bottom.
Assigning tw-passage a height makes a lot of sense. Unfortunately I've followed your steps and the position of the images are still top aligned. It seems like isn't actually changing anything. I tried setting it to a pixel height as a test and nothing changed then either.
Any ideas why this is the case?
eg. If you modify your New Game passage content like so: ... then the following CSS should style it so that the three image links are centred at the bottom of the passage:
In "Left Arrow" and "Right Arrow" I have:
And then in "Next Level" I put:
So if I were to simply put into each passage your method works, but something is getting messed up if I want to keep things minimal and only use (display: "Right Arrow"). I've tried wrapping the contents of "Next Level" with <div id="options"></div> but this has no effect.
I don't mind making the code less neat if it means better UX, but is there a way to get the arrows bottom-aligned with the way I've set up the nested passages?
Thanks again!
If I change my example to include your (display:) macro based links then the CSS I supplied still works:
note: you can remove the text-align: center; rule from the tw-passage #options selector if you are going to align the images using the element's align attribute.
I've also figured out that the div element needs to be outside of (if:) macros, like so:
But now I can't get it to work with (click-replace:). For example, the following has no effect on the right arrow:
Am I missing something with the syntax or will it not work with (click-replace:)? Is there a workaround?
Thank you for your patience and continued help, greyelf. When I give a progress report to my class on Wednesday I'm going to give you a shoutout, haha.
I think you are mis-understanding how the (click-replace:) macro works, the link is not created where the macro is, it is created where the selected text is.
eg. The (click-replace: "It doesn't seem ...") is not creating the link inside the #options div element, it is being created before that div where the original "It doesn't seem ..." is located.
You can see this by examining the page HTML after you have clicked on both the "Reach inside..." and the "It doesn't seem..." links. You can use your web-browser's Developer Tools or Inspect (Element) features to see the HTML, it will looks something like the following: ... as you can see the contents of the Right Arrow passage is not inside the #options div so there-for the related CSS has no effect on the Right Arrow.
You could restructure your code like so: ... or even replace the String based (click-replace:) macros with named hook ones like so: