Positioning text relatively to a picture

[Nik Coughlin]

This is exactly what I need but is there a way to lock text size ?

Yes, pre-process the image server side and draw the text onto the image and
then use an image map to make the those parts of the image clickable. If
you don't like that "solution" then, no, no there isn't.

 

[Adrienne Boswell]

Hi and thank you for taking time to help me out.
To answer your question, I hadn't really thought of the possibility of
resizing text by the user.

Users can do all kind of things. Remember, the web is not a piece of
paper.

Anyway, I see things and especially those

links as fixed sizes.

And if the size is too small or large for me? After all, if this is a
document for the World Wide Web, then it's for the user, not the author.

I mean it's a 'delicate' layout supposed to mimic
in a way a magazine cover so I don't want it to be messed up if the
user decides to resize text.

If it's a delicate layout, then yes, it is bound to break. Please remember
the web is not paper, not a magazine, not a book, etc.

I don't know if it's possible to 'lock' text's
size but that would be fine with me.

It would not be fine with users. You have to remember that there are more
Baby Boomers than any other generation, and those Baby Boomers have money
and influence. Some have failing eye sight, and may be too vain to wear
corrective lenses, or the text is too small even with corrective lenses.

This is one of the greatest things about the Internet, that it is fluid.
If you can't read a menu at a restaurant, you have to ask the waiter. If
you can't read the intructions on the Rice-A-Roni package, you ask your
neighbor. If you can't read a web page, you up the size. Simple. Now
would you want to take that away?

 

[Nik Coughlin]

Yes, pre-process the image server side and draw the text onto the image
and then use an image map to make the those parts of the image clickable.
If you don't like that "solution" then, no, no there isn't.

Alternately don't draw the text onto the image, save your link text as
seperate images and use the same positioning method. Make sure to provide
alt text.

http://nrkn.com/linksRelativeToParent/index4.html

 

[Nik Coughlin]

Perhaps when I think Windows I am over conscious of IE 6 (for
which I keep and use a winbox)! What I found was that it was the
high frequency notes like straight lines, perfect curves and such
that got the most appalling treatment by IE. It is a particularly
interesting and potentially useful technique to employ for the
occasional special headings that you want in a special font - and
as you know, the smooth curves in fonts are an important part of
their beauty.

Very much so, yes

Last time I looked at this, it was a simple enough context:

http://netweaver.com.au/alt/imageResizing/arrowingUpAndDown.html

On my Safari, FF, Camino, brilliant.

iCab, not too bad at all either.

Opera, Mac IE: absolutely dreadful. And so too in Win IE 6.

The test image that you're using really does highlight the differences! On
Windows Vista Opera and Safari are very good, Firefox is not as good but not
as bad as in IE 7, in which it is the worst. I've only ever really compared
resized photos etc. Apparently image resizing is vastly improved in FF 3.

There are quite a few issues. One is that it would be nice just
to give a width in em and let the browser work out the
appropriate height. (To save the partly experimental and partly
mathematical method of eming the proportions).

Just setting the width works fine. If you look at
http://nrkn.com/linksRelativeToParent/index3.html I only set the width, and
the browser is automatically keeping the aspect ratio.

If I recall, working out an em height beforehand did not help the
browsers which simply don't like em sizing. Perhaps they are very
crude in how thay calculate the em, in big and crude steps... I
don't know. But Safari and FF are sure pretty impressive. I
faintly recall one browser respecting the width but taking the
natural height! But I cannot confirm this right now.

Ah this is possible, I didn't check. Not very smart if it did. Yes, em's
seem to be quite "coarse" in that you can increase the size by fractions
gradually and see no difference, and then suddenly you pass a certain
boundary and there is a big jump in size.

It was ridiculous. I got there. It stormed over. It poured with
rain and I swam. Fine! (As Luigi would say). But not as nice for
seeing fish and sandy bottoms and stuff to pass the time as one
arms and legs along. Soon as I got out, the clouds cleared, the
brilliant sun came out. Great timing! Look, I don't mind that
much. But I do rather object when I see the sun winking at me and
indicating that it was a deliberate plan which he hatched with
the clouds and the wind to provoke me. Might have to send Officer
White to have a word to him.

Officer White?

 

[dorayme]

Officer White?

Best not to ask... <g>

 

[Bergamot]

I planned to use jpg or png,
both widely used since eons on the web and afaik both bitmap graphic
formats ;-)

png could be a vector or bitmap image, though vector images should
probably be converted to bitmap for web use.

 

[Nik Coughlin]

png could be a vector or bitmap image, though vector images should
probably be converted to bitmap for web use.

png can't be a vector image. A rasterisation of a vector image, but not a
vector image.

 

[dorayme]

png can't be a vector image. A rasterisation of a vector image, but not a
vector image.

I would have thought Bergamot right?

At least a .png file can often contain vector objects. I always
keep master files of some things I do in Fireworks in the native
saved format with layers, text and other vector objects. I export
them for the web into various formats including png. What is
exported are also .png files. These latter are not vector
carriers though.

 

[Ben C]

I would have thought Bergamot right?

At least a .png file can often contain vector objects. I always
keep master files of some things I do in Fireworks in the native
saved format with layers, text and other vector objects. I export
them for the web into various formats including png. What is
exported are also .png files. These latter are not vector
carriers though.

Not sure what you mean by a vector object or carrier, but generally a
"vector image" is a series of instructions of lines and curves
to draw rather than an array of pixels.

Jpeg, PNG and GIF are all arrays of pixels just compressed in different
ways. I'm pretty sure you can't have vector pngs in that sense.

 

[Michael Fesser]

..oO(dorayme)

At least a .png file can often contain vector objects. I always
keep master files of some things I do in Fireworks in the native
saved format with layers, text and other vector objects. I export
them for the web into various formats including png. What is
exported are also .png files. These latter are not vector
carriers though.

Fireworks PNG != Standard PNG

FW stores a lot of additional information in the PNG, which is why these
files are usually much bigger than the exported PNGs for the Web.

Micha

 

[dorayme]

.oO(dorayme)


Fireworks PNG != Standard PNG

Well, ok, that is probably more than a very fair point. I just
saw Bergamot being contradicted and it being Xmas, and we not
ever quite getting on well, I thought I would leap to his
defence. <g>

Tell the truth, I have not tried to ever put a FW native .png
vector object carrying file up on the web. Must have a go and see
what happens.

 

[dorayme]

Not sure what you mean by a vector object or carrier, but generally a
"vector image" is a series of instructions of lines and curves
to draw rather than an array of pixels.

Jpeg, PNG and GIF are all arrays of pixels just compressed in different
ways. I'm pretty sure you can't have vector pngs in that sense.

It seems it is a *native* Fireworks format I am talking about.
See Michael Fesser's succinct way of putting it in another post.

FW is very clever! Illustrator and PS for the web rolled into
one. A truly strange hybrid beast that takes a bit of getting
used to.

 

[Jonathan N. Little]

It seems it is a *native* Fireworks format I am talking about.
See Michael Fesser's succinct way of putting it in another post.

FW is very clever! Illustrator and PS for the web rolled into
one. A truly strange hybrid beast that takes a bit of getting
used to.

I think you will find that FW rasterizes the vector object or is not a
standard PNG format like my CorelDraw can have vector and bitmap
composite file. The true test if FW truly embeds the object as vector
then you should be able to extract the object and the result should be
the original vector. But I can say with fair certainty that any PNG that
is displays in a web browser is raster only.

 

[dorayme]

dorayme wrote:

I think you will find that FW rasterizes the vector object or is not a
standard PNG format like my CorelDraw can have vector and bitmap
composite file. The true test if FW truly embeds the object as vector
then you should be able to extract the object and the result should be
the original vector. But I can say with fair certainty that any PNG that
is displays in a web browser is raster only.

I thought I was sort of saying something similar... put it this
way, in my originally made FW files that are saved (*not
exported* to international standard formats), the squares and
lines and text and other things I have made (as one does in
Illustrator) seem to retain their vector qualities.

I now know that they also appear the same whether exported or not
in browsers (at least in Safari, FF, iCab, Opera and MacIE):

http://netweaver.com.au/alt/png/png.html

The pie.png was exported from pieNativeFW.png

 

[Jonathan N. Little]

I thought I was sort of saying something similar... put it this
way, in my originally made FW files that are saved (*not
exported* to international standard formats), the squares and
lines and text and other things I have made (as one does in
Illustrator) seem to retain their vector qualities.

I now know that they also appear the same whether exported or not
in browsers (at least in Safari, FF, iCab, Opera and MacIE):

http://netweaver.com.au/alt/png/png.html

The pie.png was exported from pieNativeFW.png

It is quite obvious, raster only in both cases. Vector on enlargement
would have not anti-aliasing blur. If I have a composite CDR I can
select the vector part and save as any pure vector format with no
distortion, SVG, EPS, AI, DWG, CDR...

 

[dorayme]

It is quite obvious, raster only in both cases. Vector on enlargement
would have not anti-aliasing blur. If I have a composite CDR I can
select the vector part and save as any pure vector format with no
distortion, SVG, EPS, AI, DWG, CDR...

Nothing is obvious to me. Have not got that kind of mind.
Everything is always complicated. But hang on to your shirt
Jonathan, I am not really disputing anything you say, just making
one thing clear. The original file - same one that I ftp'd up to
the server has vector in it, what the browser does with it is
something else again, it does not carry the vector info through,
that is clear but it does not act back on the poor innocent file
sitting on the server either to make it lose its vector
properties. It is just that the browser is blind to some of the
info in the file. The FW app is not.

http://netweaver.com.au/alt/png/png.html

I grabbed the original file called pieNativeFW.png, the very one
that I loaded to the server for above and reopened in FW app and
copied and pasted the object into a new file with a bigger
canvas. And just dragged the object bigger. It retained its
sharpness. And you can see it at its natural size as last item at
above.

I have never doubted that it is no longer a vector object on the
browser or when you get it. FW is an interesting app that has
objects that are not altogether one thing or another.

All the best to you.

 

[dorayme]

I grabbed the original file called pieNativeFW.png, the very one
that I loaded to the server for above and reopened in FW app and
copied and pasted the object into a new file with a bigger
canvas. And just dragged the object bigger. It retained its
sharpness. And you can see it at its natural size as last item at
above.

I have never doubted that it is no longer a vector object on the
browser or when you get it. FW is an interesting app that has
objects that are not altogether one thing or another.

I must say, there is one thing I have not tried yet and that is
to download the file back from the server via my FTP program (not
save it from the browser or open my original file) and see if it
has lost any vector properties. That would be news to me. Hang
on!

Nope. It retains it.

One has to occasionally make an experiment because reality has a
habit of biting the speculating mind. <g>

 

[Jonathan N. Little]

http://netweaver.com.au/alt/png/png.html

I grabbed the original file called pieNativeFW.png, the very one
that I loaded to the server for above and reopened in FW app and
copied and pasted the object into a new file with a bigger
canvas. And just dragged the object bigger. It retained its
sharpness. And you can see it at its natural size as last item at
above.

I have never doubted that it is no longer a vector object on the
browser or when you get it. FW is an interesting app that has
objects that are not altogether one thing or another.

The only difference I can detect is the Native is 24-bit and the other
is 8-bit. Both only have 1 object. If there is a vector in there is is
very proprietary.

 

[Jonathan N. Little]

Nope. It retains it.

One has to occasionally make an experiment because reality has a
habit of biting the speculating mind. <g>

http://www.bu.edu/webcentral/learning/fireworks1/introduction.html
BU | WebCentral | Learning | Fireworks | Introduction | Graphics Formats

Yep, very proprietary.

 

[dorayme]

The only difference I can detect is the Native is 24-bit and the other
is 8-bit. Both only have 1 object. If there is a vector in there is is
very proprietary.

The 8 and 24 are not relevant. But you are spot on with saying
the proprietary bit. You would not be able to detect any vector
object because your access is only via the browser and in the
browser there is no trace of the goodies in the file on the
server.