Wrap Text Around Picture?

Question

How do I make text wrap around a picture in Sugarcube 2? I found an answer for Harlowe here in the Q&A, but not Sugarcube.

Answer 1

Just add align="left" or align="right" to your image tag:

<img src="image.jpg" align="left"> Your Text here.

 

Comments

The img align attribute was deprecated in HTML4.0.1 and obsoleted in HTML5, I suggest using the CSS float property instead.

1. Directly on the img element.

<img src="image.jpg" style="float: left;">Your Text here.

<img src="image.jpg" style="float: right;">Your Text here.

2. Indirectly via a CSS class. [preferred method]

2a. The passage content.

<img src="image.jpg" class="float-left">Your Text here.

<img src="image.jpg" class="float-right">Your Text here.

2b. The Story Stylesheet area content.

img.float-left {
	float: left;
}
img.float-right {
	float: right;
}

 

---

@idling

That ALMOST works (I tried both the "directly on the image element" and "indirectly via a CSS class" methods but didn't want to mess with the stylesheet since I don't necessarily want to do this with every pic), but both have the same problem: no space between the image and the text, giving the passage an ugly, crowded look. I tried adding a black border around the image, but not only did the black NOT match the standard background for Twine 2.2.1, the image also left ugly, white marks around the corners, telling all and sundry (well, mainly me since I'm still working on the game)   "this is where the image ends," still leaving me with an ugly, crowded-looking passage.