Form text around image

Is there any easy way to get text to form around an image?
It's a simple
rectangle, so nothing complicated there. I can't have the
text-preformatted
with tabs and such because it needs to be able to change and
still fit in
the box. Basically, I just want to indent the first 3 lines
of the
paragraph in so that an image can fit in the space there. I
can easily use
a tabstop to indent the first line, but determining where the
linebreaks are
in order to add tabs to the second two lines doesn't seem to
be possible.
(Director lists the text member as having only 1 line, even
though it's a
full paragraph - auto-linebreaks due to text-wrapping do not
count as new
lines.) I know this sort of thing can be done with HTML on a
webpage or
something, but Director's handling of HTML is severely
limited, and one
thing I don't think it includes is things like <div>
and tags, whic
is how you'd handle this in a browser. (And in any case, that
would require
the image to be *part* of the text, which I'm almost certain
isn't
possible.) Any ideas? Or am I chasing at straws here?

> This should do what you want:
>
http://www.manibus.com/codeSamples/textWrap/textWrap.htm
>
> and here's the source:
>
http://www.manibus.com/codeSamples/textWrap/textWrap.zip
Hmm, snazzy as that is, I'm afraid it may be a bit of
overkill for this
situation (I have one small square image to wrap around,
always in the same
place in the upper-left corner, and only need to set the text
up once at the
beginning.) I'd considered another method in my case, which
would be to
break the text up into two separate, carefully lined up text
objects, one
with just the three lines to the left of the image and the
other below, and
then just use some sort of algorithm to determine how much of
the text will
fit in the first one and dump the rest into the second. I
don't want to go
really crazy with this, as it's a fairly minor design
decision in this
project to even have text wrapping an image, so if it proves
to be more
complicated than something I can do with a few simple tweaks,
we'll probably
just change the design to make it not necessary instead.

Similar Messages

I am unable to wrap text around image.

I have posted one typical page on our website with one photo, a main heading and some text. I have struggled for several days, trying to wrap the text around the photo and allow some space between the photo and the text. I have studied numerous books and tutorials on the css box model but they are all so entirely different in the words they use and the teaching approach that my mind is in a whirling fog of contradictory information.
Our website is at www.endangeredspecies.com. There will be thousands of individual pages about different plants with this same format which will be accessed by hypertext references from various indexes.

You just need to float your image left or right:
img {
    float: left;
    margin-right: 10px;
    margin-bottom: 5px;
G/L

Trying to wrap text around image causes table to break out of wrapper?

Hi,
I'm not sure if this is a CSS/HTML problem or just something
with Dreamweaver CS3?
Here is what I have My pages have a wrapper with the
following attributes
#wrapper {
width: 800px;
margin-right: auto;
margin-left: auto;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-color: #F8F8F8;
On one of my pages, I display a list of file with thumbnails
and a brief description.
I chose to use a table and have each item in it's own row.
I have a class that I assign the image that gives it a little
padding around the image.
I think place my text directly to the right of the thumbnail
image.
So it would look like this
File Name
Pic.............description of this file
I would create a new row in the table for each one. I liked
using a table, because when there was an update, and I needed to
remove an item, I could just delete the row. Or if a new one,
needed to be placed somewhere in the middle, I could just add a
row.
This worked great in DW MX, MX2004, and 8, but what I'm
finding with CS3 is, once I apply the class to the image, that
gives it the padding. As soon as I create a new row, the table
jumps out past the wrapper div within Dreamweaver
My image class has these attributes
.thumbnailspacer {
float: left;
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 2px;
margin-left: 5px;
background-color: #C5DFFC;
and here is a sample of what one of my rows look like.
<tr>
<td><a href="#">test<img src="" alt=""
name="" width="82" height="58" class="thumbnailspacer"
/></a>
 
 
Description of Item goes here</td>
</tr>
It views OK in IE 6 and IE 7, not sure about others since we
don't use them here.
What can I do to make it work like it did before?

Why are you using the float?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"cdoyle" <[email protected]> wrote in
message
news:[email protected]...
> Hi,
> I'm not sure if this is a CSS/HTML problem or just
something with
> Dreamweaver
> CS3?
>
> Here is what I have My pages have a wrapper with the
following
> attributes
> #wrapper {
> width: 800px;
> margin-right: auto;
> margin-left: auto;
> font-family: Arial, Helvetica, sans-serif;
> font-size: 12px;
> background-color: #F8F8F8;
> }
>
> On one of my pages, I display a list of file with
thumbnails and a brief
> description.
> I chose to use a table and have each item in it's own
row.
>
> I have a class that I assign the image that gives it a
little padding
> around
> the image.
>
> I think place my text directly to the right of the
thumbnail image.
>
> So it would look like this
>
> File Name
> Pic.............description of this file
>
> I would create a new row in the table for each one. I
liked using a
> table,
> because when there was an update, and I needed to remove
an item, I could
> just
> delete the row. Or if a new one, needed to be placed
somewhere in the
> middle,
> I could just add a row.
>
> This worked great in DW MX, MX2004, and 8, but what I'm
finding with CS3
> is,
> once I apply the class to the image, that gives it the
padding. As soon
> as I
> create a new row, the table jumps out past the wrapper
div within
> Dreamweaver
>
> My image class has these attributes
> .thumbnailspacer {
> float: left;
> padding-top: 2px;
> padding-right: 2px;
> padding-bottom: 2px;
> padding-left: 2px;
> margin-left: 5px;
> background-color: #C5DFFC;
>
> }
>
> and here is a sample of what one of my rows look like.
>
> <tr>
> <td><a href="#">test<img src="" alt=""
name="" width="82"
> height="58"
> class="thumbnailspacer" /></a>
> 
> 
> Description of Item goes here</td>
> </tr>
>
>
> It views OK in IE 6 and IE 7, not sure about others
since we don't use
> them
> here.
>
> What can I do to make it work like it did before?
>
>
>

Wrap text around image in blog

I'd for the images that are posted in the blog section of my website wrap around text. I understand how to do this in the real world, create the style and then reference it by placing a class attribute in the html, but am not sure how this translates in BC world. Please help. Thanks.
.wraptext {
float:left;

There are a couple of ways to do it.
Create a class in your stylesheet, insert the image into your post where you would like it to appear. Right-click the image and select Properties.
You can then do one of two things:
1. Select the class you created OR
2. Select the alignment to left
I find option #2 to be easier than trying to find the class I created in the dropdown menu provided. I would also suggest giving it a right margin of 10-20px so that the text doesn't butt-up directly on the image.

How to create-Form text field to simultaneously preview the text over an image

I am trying to make a web page similar to the link below…where when a customer types in the form text field, and simultaneously, the text will preview in another area of the webpage over and image. See example when you create a label @ www.customwinesource.com custom labels…http://www.customwinesource.com/index.cfm?method=storepairing.listPairing&wineryid=auto
Any help would be much appreciated

I wasn't able to (easily) find anything in the way of a textfield to type something into that you describe, but you can assign code for input textfields to detect when something changes in them and take action from that event. How you do it depends on which version of actionscript you are using.

Wrapping text around the image in illustrator cs4

I am trying to create a brochure with wrapping text around the image, I have followed several online tutorials like http://www.tutorials-expert.com/tutorial/19302/Wrapping-Text-Around-an-Image-in-Illustrato r.html and some other but I followed these instructions and i did not see any effect. Since i am new to illustrator, can some one point me in write direction.
Thanks.

You should mark the thread answered as this is a situation that for some reason passes by the users often even though it is covered in the tutorials.
No real need to designate a user as the one who answered the question just mark the thread answered. This problem comes up often and it is always the same user error.

Can't Wrap Text Around an image

Hi I'm trying to wrap text around an image in adobe flex 3 i
always want the image to be in the upper left hand corner of a Vbox
or canvas or whatever with the text neatly wrapping around it. im
using an xml list to generate the image and the surrounding text I
no it cant be done using htmlText but it does not make the text
appear exactly as I would like it involves to much editing of the
text so i would like to know f there is another way of doing so i
can pull the text in without havingto convert it to html
many thanx
lloyd

Have you tried just putting the text in line with the pic and
call it htmltext, even if it's not? I suppose it depends on if you
have some characters that should be escaped but embedding the image
should always be up at the upper left. Something like the following
with your own pic.jpg.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Script>
<![CDATA[
[Bindable]
public var htmlString:String="<img src='Assets/pic.jpg'
align='left'/>This is just some sample text & some things
that should be escaped like it's time to check to see if this thing
wraps OK. This is just some sample text & some things that
should be escaped like it's time to check to see if this thing
wraps OK. This is just some sample text & some things that
should be escaped like it's time to check to see if this thing
wraps OK. This is just some sample text & some things that
should be escaped like it's time to check to see if this thing
wraps OK. This is just some sample text & some things that
should be escaped like it's time to check to see if this thing
wraps OK. This is just some sample text & some things that
should be escaped like it's time to check to see if this thing
wraps OK. This is just some sample text & some things that
should be escaped like it's time to check to see if this thing
wraps OK. ";
]]>
</mx:Script>
<mx:TextArea htmlText="{htmlString}" x="62" y="51"
width="483" height="397"/>
</mx:Application>

Ho do I wrap text around an image?

Hi,
I am trying to figure out how to wrap text around an image so that it follows the outline of the image. The E.O. Wilson book has an example, but I have seen it in other books, too. I am using images that have their background taken away with Instant Alpha, but the wrap doesn't work reliably. I wonder if it is a setting I am missing or if Instant Alpha is just unreliable.
Here is what I do:
I drag the photo into a standard page in the chapter (not a chapter or section start page).
I then apply Instant Alpha.
The background disappears, but the text doesn't flow into the spaces.
My settings in the Inspector's Object Placement tab is as follows:
Anchored
Object causes wrap (second icon from left)
Text Fit (right icon)
Extra Space 16pt
Alpha 50%
No text flow. What sometimes works is if I apply a mask to the picture and then make it big enough to reveal the whole picture. Suddenly text flows into the space around the picture. But that is also not a reliable solution. It works sometimes, but not others.
My workaround right now is to create a shape with the pen tool that traces the image. Text flows around this shape just fine. I then place that shape where I want the image and turn off Object Causes Wrap on the image. I then group the shape with the image to make moving them easier. That is a huge effort, and I am sure there is something I am doing wrong.
Can anyone help?
Thanks,
Fiver

Inline
Floating
Anchor
How is your "Text Fit" set? - Fabe

Wrapping text around an image on top of a background

I am trying to wrap text around a photo, but I'm doing so on top of a background color box in my Master Page. Problem is that when I create the background box in the Master Page, the text goes away. I can resolve the problem by checking the "Ignore Text Wrap" option under the Text Frame Option menu, but then I lose the text wrap around my images. Is there a way around this?

Don't apply text wrap to the background....

Texts and Images are displayed being around bracket

Texts and Images are always displayed being around bracket not depending on any web page.
Menu Characters on menu bar are also being abound bracket.

Start Firefox in [[Safe Mode]] to check if one of the add-ons is causing the problem (switch to the DEFAULT theme: Tools > Add-ons > Themes).
* Don't make any changes on the Safe mode start window.
See:
* [[Troubleshooting extensions and themes]]

Wrapping text around an image in a blog post

Hi,
I want my client to have the choice to wrap text around an image they have inserted into a blog post. How is this possible? I have tried to create a class that would would appear in the 'apply a class' section of the editor but it doesnt work, the class doesnt even appear in the editor.
Any advice?
Thanks,
Dean

Hi Liam.
Thanks for the reply. Yes I have added it in the partner portal and it just says clear class.
I have only added a small bit of css so I dont think that is the problem. I just the below applied to the image so the text will float round it.
.wraptext {
float:left;
I think the problem is that it is in the wrong css file. I have tried it on few different css files and it does the appear in the editor for some of the webpages. No matter what css file I put it in, it still doesnt appear as an option when adding a blog post.
The blog post is referencing a few stylesheets, how can I identify which one the code should be in?

Border around image links

What the heck is it with a blue border around image links in
CS3???? I discovered I can get rid of it by setting the border to 0
in properties but what a pain. I also noticed tables have a 1
border by default. I'm sure there is a place to change the default
but I can't find it.
Any suggestions?
thanks,
CJ

On Fri, 1 Jun 2007 13:11:16 +0000 (UTC), "SeaJaye"
<[email protected]> wrote:
>Win,
>I like the way you think. For those of us who are cake
baking challenged, could you put up a recipe for said cake?
>thanks,
>cj
Sure. This set of stuff:
*zeroes out the margins and paddings
* guarantees a vertical scrollbar (so no jumping between
short and
long pages)
* establishes colours and fonts etc. for the tags I tend to
use
* gives me a way to float images left or right
* defines a tag that I can use to clear floats (the hr tag,
in this
case, since I never use an hr as a visual element: I always
define
borders when I need them)
* styles the form and form elements
I customize these to suit.
/* CSS Document */
margin: 0;
padding: 0;
html {
height: 100%;
margin: 0;
padding: 0;
body {
min-height: 101%;
font: 100.01%/130% "Trebuchet MS", Verdana, Helvetica,
sans-serif;
color: #000;
background: #4f865b url(../images/bgTexture.png) repeat;
margin: 0;
padding: 0;
hr {
height: 0;
line-height: 0.0;
font-size: 0;
margin: 0;
padding: 0;
clear: both;
visibility: hidden;
h1, h2, h3 {
font-size: 150%;
color: #4f865b;
margin: 20px;
font-weight: bold;
h2 {
font-size: 120%;
color: #cc6600;
h3 {
font-size: 100%;
color: #4f865b;
font-style: italic;
p {
font-size: 90%;
margin: 10px 20px;
ul {
margin: 10px 20px 10px 40px;
font-size: 90%;
a:link {
color: #cc6600;
a:visited {
color: #4f865b;
a:hover, a:active, a:focus {
color: #7dd08f;
.imgLeft {
border: 1px solid #dfdabd;
padding: 5px;
float: left;
margin-right: 10px;
.imgRight {
border: 1px solid #dfdabd;
padding: 5px;
float: right;
margin-left: 10px;
/***** CONTACT FORM STYLES *****/
#content form{
margin: 0;
width:450px;
#content fieldset{
border: 1px solid #d69400;
margin-bottom: 10px;
padding:5px 5px 20px 20px;
#content legend {
font-size: 120%;
margin: 12px 0 0 0;
color: #18006a;
#content textarea{
background-color: transparent;
border: 1px solid #18006a;
height:200px;
margin:0 30px 0 0;
#content label{
display:block;
font-size:80%;
padding-top:5px;
#content button{
background-color: #ecc97d;
display:block;
width:80px;
/* sets the enquiry box to the right of the input fields */
.labelfloat{
padding-top:20px;/* float:right;*/
#content input:text, #content select{
/*background-color: #E8E2C2;*/
background-color: transparent;
border: 1px solid #18006a;
display:block;
margin:0 0 0 0;
width:200px;
/* END FORM STYLES */
Win
Win Day, Wild Rose Websites
http://www.wildrosewebsites.com
[email protected]
Skype winifredday

Help Me Understand: Readabilty of Text in Images

I make a webcomic (CarpeChaos.com for examples), so I produce a lot of images with a fairly extensive amount of text in them. I want to make sure the fonts in those images are as readable as possible. My experience on this topic is just someone who has read a lot about it online, I'm not professionally trained, so some of my assumptions may be flawed, please point them out. I'm using CS2, but my copy of CS5 is in the mail.
Photoshop is the core of our workflow and our PSDs are set up as several layers of image data and several layers of text. We don't rasterize the text at any point. The text is almost exclusively high contrast grayscale (aka black text on white backgrounds). Each PSD is 2880x3240, but we publish at 960x1080 AND 640x720.
What I know about font rendering tells me that fonts are rendered differently at different sizes, and that scaling rasterized text in images smears them into horrible messes.
With that in mind, I've been a bit of a fascist when it comes to our image mastering process. I never flatten text layers, nor rasterize the text in any other way. My assumption is that Save For Web... in Photoshop does the smart thing by resizing first, then rasterizing the text. Therefore, I use the "Image Size" tab in Save For Web dialog to produce the right sized images. Our jpeg compression is usually between 67% and 87%, although on rare occasion it can go as high as 100%. This produces rather crisp text with about as good of readability as I can hope for in a jpeg.
Unfortunately, this process takes a fair amount of time, and I'd love to dump all our PSDs into a script that generates the jpegs automatically. I've been playing around with File-->Scripts-->Image Processor but haven't yet gotten results that match doing it by hand. And frankly, from the dialogs, I don't trust that it respects my vector fonts as much as I do.
I'm not opposed to switching image formats to png or something else, it just needs to be web friendly.
So I have two questions for the wisdom of this forum:
1) Do you know any way that I can improve readability over what I'm currently doing?
2) How can I get the same results with less work? Is there a way I can get optimal results from an image processor script?

I often use layer styles to make text more readable. Drop shadow and outer glow are often very useful for this, and they don't have to be turned all the way up to greatly increase readability.
For example, for the back jacket of a book, I was putting some light text on a mostly dark background consisting of an image with a lot of stars in it. The letters occasionally overlaid or nearly overlaid stars, and this became kind of distracting. Some drop shadow isolated the text and kept the appearance of the star field intact.
-Noel

How do I import an irregular shape into pages to wrap text around?

I see in the lovely demo how pages can wrap text around an image that is an irregular shape, but they never tell us how to actually get one onto the iPad. As far as I can tell jpg's and tff's are all that the iPad will work with and those are all square. How do I import an irregularly shaped graphic such as a butterfly or logo into my document? Thanks.

You must need a PNG with transparent background. I just made one in iDraw and it flows great in Pages.

"text wrap image" in Keynote 5.0.3

I used the subject line (without quotations) to search for an answer in both Keynote and Pages forums, but found nothing relevant.
Surely I can place an image into Keynote 09 and be able to wrap/ flow the text around it. Hadn't I done this in the past? I'm not able to find it today- looked in the inspectors (there is no "wrap" inspector tab, all the menus, read the user guide (it doesn't even have the word wrap in it), and it's looking like I can't wrap/ flow text around an image.
I have to admit I'm surprised by that.
Any help would be greatly appreciated, especially if you tell me it can be done and how to do it. ::grin::
Thanks. Joel.

Sorry to go off-topic, but I just wanted to explain why the “if you have to wrap, it’s too much text” is a good rule, but like most rules, there are many instances where that rule can +and should+ be broken.
Most of the presentations I make are to public boards (public utility governing boards, county boards of supervisors, regulatory agency boards, etc.). Before the meeting, I submit my Keynote presentation, which is included in the agenda and ultimately becomes part of the permanent public record.
I could make a fabulous speech with an amazing, very simple Keynote presentation that supports my speech, but the decisions typically don't get made in the meetings. They get made based on the recommendations of staff members who use my Keynote presentation as a reference because they weren't at the meeting to hear my riveting speech.
In these cases, the Keynote presentation isn't a visual aid for my speech. The speech is an audio aid for the Keynote presentation. Succinct and well-written text organized logically with easy-to-understand graphics wins staff over to my position. Three words and a graphic on a slide that don't make sense without the accompanying speech accomplish nothing.
Anyway, *as you said*, there are exceptions to every rule and your point is a good one. I see all too often presentations where the speaker stands in front of the group and just reads his PowerPoint presentation word for word (the people who do this are inevitably using PP, not Keynote, of course )
The most important thing is to consider the purpose of your presentation, whom it will be presented to, and how it will be used. Anyone who is doing presentations professionally should understand this rule (and others), and the reason behind it. And at that point, you can make an informed decision about whether or not the rule is appropriate to your specific situation.

Form text around image

Similar Messages

Maybe you are looking for