Text wrap around images

[AAR]

Hi,

I am relatively new to TW and to HTML. My Tiddlers include a mixture
of text, equations and images. If an image is not the full width of
the Tiddler, the following paragraph often shows up to the right of
the image rather than under it. I am wondering how I can force the
the following paragraph to appear under the image, no matter what the
width of the image is.

Any help is appreciated.

Thanks,
Andy

[TonG]

Hi Andy,

See http://twhelp.tiddlyspot.com/#FormattingImages

Ton

[Claudio Li]

Though may not be the simplest way to go, you may enclose your image with a custom style, like

text text text text text text text text text text text text text text text text text text text text text
{{breaktext{[img[theme/color_ball.png]]}}} text text text text text text text text text text text text text text text text

and put

.breaktext {display:block;margin-top:0.5em;margin-bottom:0.5em;}

in the StyleSheet tiddler

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To post to this group, send email to tiddl...@googlegroups.com.
To unsubscribe from this group, send email to tiddlywiki+...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/tiddlywiki?hl=en.

[Michael.Tarnowski]

Hi Andy,

the syntax for image embbeding is in general

[img(auto,auto)[title|filename][link]]
title: optional tooltip/picture title
link: optional link to follow when clicked
filename: mandatory
auto,auto: pict. lenght/height, mandatory or percentage: img(10%,20%)


... text1... lore ipsuum...
[img(auto,auto)[picture_file_name.jpg]] -- forcing the image between
text1 and text2
... text2...lore ipsuum....

with
[>img(auto,auto)[picture_file_name.jpg]] -- forcing right alignment
[<img(auto,auto)[picture_file_name.jpg]] -- forcing left alignment

Hope that helps,
have a nice day
Michael

[Eric Shulman]

> [img(auto,auto)[title|filename][link]]
...

> auto,auto: pict. lenght/height, mandatory or percentage: img(10%,20%)

Note: the "(x,y)" syntax is an EXTENSION to the core, added by:
http://www.TiddlyTools.com/#ImageSizePlugin

-e

[AAR]

Thanks to all who have contributed... Prior to my post, I had visited
the TWhelp page suggested by TonG, and I had installed the Image Size
Plugin as noted by Eric and was using the correct image syntax as
demonstrated by Micheal. However, it seems that if the image size is
less than tiddler width (or less than some portion of the width), the
text that follows the image will "wrap-around" the image rather than
follow it.

For example, if I had the following lines in my tiddler:

[img(auto,auto)[./folder/image.png]]
Figure 1 - figure caption

and the size of the image was less than, say 50% of the tiddler width,
the text "Figure 1 - figure caption" would show up to the right of the
image rather than under it. If I then included additional text after
the caption, that text too would show up to the right of the figure
until length of the paragraph eventually exceeded the height of the
figure at which point it would continue under the figure. I would
describe this phenomenon as text "wrapping around" the figure. It
didn't seem to matter whether I had right- or left-justified the
figure.

The solution that I came up with was to put the image into a
borderless table (and the caption could be put into a row of the table
as well, but if the table is left justified, it could simply follow
the table rather than being part of the table). So here's the
modified tiddler text....

| img(auto,auto)[./folder/image.png]] |
| Figure 1 - figure caption |
|borderless|k

Note: According to http://twhelp.tiddlyspot.com/#BorderlessTable, the
borderless table syntax above requires the following addition to the
StyleSheet tiddler:

.viewer table.borderless,.viewer table.borderless * {border: 0;}

So it seems that text does not wrap-around a table, but will wrap
around a figure. I was simply wondering if there was some way to
force text to *not* wrap around a figure. Perhaps Claudio's solution
would work as well, but I've never tried it.

Thanks again to all those who answered my call for help. I've found a
lot of great tips and tricks in this group.

-- Andy