Images and text

Xway
1

I was looking at the Ambient template and was trying to figure out the text wrapping situation on the About page. Why does this wrap weirdly from the bottom? Can I apply some CSS or Extended Attribute to fix this.

Billy

2

Hi Billy,

Is this the Ambient sample document on our website?

Can you explain what you mean by “wrap weirdly”?

3

Perhaps you are asking how to float images?

Also, be careful to distinguish between extended attributes and extended properties. Xway makes a clear distinction between HTML attributes (not relevant here) and CSS (style) properties.

4

On the Ambient template “About page” there is a block with small a graphic on the left and some text within the parent block to the right of it. The text starts at the bottom right corner of the graphic and then wraps under it. Why can’t it wrap from the top right of the graphic?

Billy

5

I can’t get box of text to live horizontally with a graphic. I used 'float" but it didn’t work

6

Hi Billy,

Graphics are inline elements in HTML/CSS. When they’re used alongside text, they sit on the text baseline by default. That’s what’s happening here.

You can choose other alignments from the Vertical Align popup in the Margins and Alignment section of the Box Inspector. But because the graphic is inline, successive lines of text will flow beneath the line of text containing the graphic. If the graphic is much larger than the surrounding text (as it is here), you are quite likely to see a large gap between one line of text and the next. Try changing the vertical alignment of the graphic to Top or Text Top to see this happening.

What I think you’re asking for is to have a graphic floated next to some text. Xway doesn’t support this directly yet, but you can easily do this by adding a float property in the Extended Properties section of the Box Inspector.

To do this in the Ambient document:

  1. Select one of the graphics
  2. Click on the + button in the Extended Properties section of the Box Inspector
  3. Type float in the Name field and left in the Value field
  4. Press Return

You won’t see anything change on Xway’s Page view (because, as I said, Xway doesn’t support float directly yet), but if you switch to the Web view you will see that the graphic is now floated to the left the text (it is no longer an inline element).

7

Thanks Jeremy,
I got all of that to work but I’m wondering if text can wrap the image when the media size gets small? Flexbox will just stack it.

Billy

8

No need to wonder - you can test what happens by viewing the page in Xway’s Web view!

Make this narrower by dragging the divider with the Inspector panel.

(The text wraps.)