Re: overwriting characters

On Apr 29, 5:39 am, Nick Wedd <n...@xxxxxxxxxxxxx> wrote:
Suppose I want to position one character over the top of another. For
example, suppose I want to put a V over the top of a W, and centred on
it. I can do it like this:

<style type="text/css">
span.ova { position: absolute; }
span.ovr { position: relative; left: -0.84em; }
</style>
...
W<span class=ova><span class=ovr>V</span></span>

This works. Ok, it isn't pretty, and the correct value of "left"
depends not only on the widths of "W" and "V" but on the font and on the
browser. But I am happy enough with the results (though I'll be pleased
to hear a better way to get the same effect).

But it goes wrong if the text line is made a non-standard height by the
use of, say, a superscripted character. Seehttp://www.maproom.co.uk/test.htmlfor a minimal example. The W is
positioned where I would expect, and the V still has the correct
horizontal displacement, but the V goes up in the air to align itself
with the superscript.

Can anyone recommend a better solution?

What is better for me may not be what is better for you :-) . There
likely are several ways to do what you wish.

I would likely use the GD extension for php. If your server php is a
mid 4 version or higher, GD likely is built in and ready to go. There
mam be a bit more hastle for Microsoft servers. Look at my page
http://www.cwdjr.net/video/single//stopbutton.php and then look at the
text file of the php at http://www.cwdjr.net/video/single//stopbutton.txt.
MY example is much more complicated than you would need. You would
only have to set up the background image and then write an image
string create for each of your letters. You can place each text string
anywhere in the background rectangle you create. Then you make the
background transparent for a png or gif and trim the now transparent
background to just allow the separation you wish for in the line of
text in which you place the image. Even for the elaborate grad color
png I created, the file size is only 352 bits. When you wish to use
the special character image you created you just use the address of
src="stopbutton.php" rather than the usual file name of
stopbutton.png. If you want to rather use a conventional png, just
view the php file that shows the image. Right click on the image and
select to download to your computer. Some browsers such as Firefox
that I am using at the moment will load the image file with a php
extension. Just change the extension to png, and you have a normal png
image file that is called as src = "stopbutton.png.
.

Quantcast