I'm using Twine 1.4 (because of the image handling) and after a lot of trial and error I decided to use Sugarcube 2 as "engine" (simply because of the somewhat easier management of variables in text and the way radiobuttons and checkboxes are designed + that you can set Setter Links with images) ... anyway ... here's my problem:
On many pages I want to have an image to the left (portrait format) and I want the text to flow along that image to the right. OK, that's quite easily done by prepending img with a <. The problem with that is that once the vertical end of the image is reached the text snaps under it. That's not what I want - I want the text to continue downward as if the image was longer.
In SugarCANE I managed to do that by defining a div style for the image with absolute positioning and by defining absolute positioning for the passage. By not setting a height for the div containing the image the text would not snap back. The left start of the passages was set to just where the image ended.
With SugarCube I cannot duplicate that. Even when I define my own div for the image - when I change the passage alignment (or even when I put the text to the right in a new div) the image is affected as well.
Since I am not really experienced in CSS ... can anyone throw an idea at me how to prevent the text from snapping back when the bottom of the image is reached? I'd also apprechiate any help in how to position the actual text without moving the image as well. I tried a table but I'm no good with HTML tables and while text did flow nicely the text column was way too small compared to the non-table test.
In addition to that the flora and fauna are a bit on the hostile side so accidents may occur - therefore there are also variations of those images showing injuries.
So the image to the left is in most cases of the same dimensions but has varying content.
Wouldn't that mean I'd have tofine tune each and every passge once the text is done to see how much space I need and - as you say - with the browser not in full screen so I can manipulate the width to see how the content is displayed?
Setting a fixed heigt has the disadvantage, I think, that the border around the passage will always be drawn around that area and I'd like to have it be drawn either around the image height (if there is little text) or around the text (if there is more text than the image) and have that adjust to the user's browser settings.
That's why I initially tried the table (and I may well end up with it) but I'm looking into table formatting options now because I don't really like the result I'm getting.
a. Add the following to your story's script tagged passage, if you don't have one yet then create one using the New Script Here content menu. The code inserts a new div element with an id of #profile into the HTML structure between the #story element and it's child #passages element, the reason it is inserted there and not within the #passages element is because the #passages element (and it's children elements) is destroyed and recreated each time the story moves between passages which means you would also need to re-create the #profile area each time. b. Add the following to your story's widget tagged passage. if you don't have one yet the create a new passage and assign it a widget tag.
The code adds a profile macro which will replace the contents of the new #profile area with whatever text you pass to the new macro. c. Start passage d. Next passage:
I did not use images in my example because I don't know how you are storing your images (embedded, external files, hosted files, etc) but it would not take much effort to change the above to handle images instead of text.
I also did not use CSS to style the above because I need to know how you wanted it to look.
All images reside in ./images relative to the story directory, which works fine in Twine 1 test mode (though not in Twine 2, sigh). All left side images are 512 by 800 pixels. There's other picture sizes but they are all to appear in context and in the "right" pane, so their positioning is never an issue.
Images on the left pane should be smack to the left of the displayed area and text in the right pane should start a few pixels to the right of the right border of the left image.
I've spent some time reading up on html tables and I've found a workable solution but I'll give your example a try as well and see which will work out better. Not being forced to clutter (almost) every passage with a table would be a welcome relief.
note: I am not at a machine with Twine installed so the following has not been tested. ... and you would change the call to profile within a passage to something like: