overwriting characters

[Nick Wedd]

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. See
http://www.maproom.co.uk/test.html for 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?

Nick

 

[cwdjrxyz]

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.

 

[Nick Wedd]

In message

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.

Yes, I could use a graphic - either one created in advance, or created
on request by GD. I know how to use GD, and my server supports it. But
I prefer to use actual overlaid characters, so that the html/css markup
will be applied to them. I am surprised that there isn't more demand
for this.

Nick

 

[Jukka K. Korpela]

Scripsit Nick Wedd:

Suppose I want to position one character over the top of another.

That's a bit ambiguous (does it mean "above in the y dimension" or
"above in the z dimension"?), but your Subject line and your example
suggest that you want to make a character appear above another character
in the z dimension, or "overprint" a character, though perhaps not
_exactly_ overprinting.

For
example, suppose I want to put a V over the top of a W, and centred on
it.

That would be tricky, but this might work:

CSS:

.pair { position: relative; } /* to create a frame of reference */
.over { position: absolute; left: 0; right: 0; text-align: center; }

HTML:

But it goes wrong if the text line is made a non-standard height by
the use of, say, a superscripted character. See
http://www.maproom.co.uk/test.html for 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.

That's probably because the height of the line exceeds the line-height
value but the positioned elements don't "know" about this but appear
where they would be if the height of the line were normal. I'm afraid I
don't quite understand what happens here... using a negative margin
instead of positioning would avoid this but would create a different
problem: how do you know which value to use?

 

[Nick Wedd]

Scripsit Nick Wedd:


That's a bit ambiguous (does it mean "above in the y dimension" or
"above in the z dimension"?), but your Subject line and your example
suggest that you want to make a character appear above another
character in the z dimension, or "overprint" a character, though
perhaps not _exactly_ overprinting.

The Z dimension - as you deduced.

That would be tricky, but this might work:

CSS:

.pair { position: relative; } /* to create a frame of reference */
.over { position: absolute; left: 0; right: 0; text-align: center; }

HTML:

<span class="pair">W<span class="over">V</span></span>

Thank you. This is definitely better than my solution: with your
method, I don't need to use an amount of "left" that is font- and
browser-dependent. It still has the same problem as my method if the
line-height is too high.

However it does have a weird side-effect in my FireFox 2.0.0.11. When I
first load the document into Firefox, the V is several lines below the W
(in the Y dimension). As soon as I resize the browser window, however
slightly, it jumps to its right place.

If you have a similarly defective Firefox, you can see this at
http://www.maproom.co.uk/test.html

That's probably because the height of the line exceeds the line-height
value but the positioned elements don't "know" about this but appear
where they would be if the height of the line were normal. I'm afraid I
don't quite understand what happens here... using a negative margin
instead of positioning would avoid this but would create a different
problem: how do you know which value to use?

Indeed. Jonathan Little recently wrote in this newsgroup "Rather than
using the "pasta approach" [1] to web design why not go to htmldog.com
and learn the basics first.." But it seems to me that htmldog, and
other websites, and books, are really very little use. In the end, one
is reduced to flinging pasta.

Nick

[1] fling it against the wall and see what sticks

 

[cwdjrxyz]

The Z dimension - as you deduced.





Thank you. This is definitely better than my solution: with your
method, I don't need to use an amount of "left" that is font- and
browser-dependent. It still has the same problem as my method if the
line-height is too high.

However it does have a weird side-effect in my FireFox 2.0.0.11. When I
first load the document into Firefox, the V is several lines below the W
(in the Y dimension). As soon as I resize the browser window, however
slightly, it jumps to its right place.

Yes, I get jumpitus" for my Firefox. Also the Seamonkey 1.1.7 browser
does the same. This is hardly a surprise, because Seamonkey is based
on the basic Firefox browser. None of my other browsers have
"jumpitus", but none display one letter properly positioned over the
other for all of your examples. Opera 9.2.7 has yet another strange
action. If you bring up your page on it, right click, and select to
view source, there is a brief pause as Opera is busy. Then it brings
up the Real 11 media player with your page displayed on it! However,
the page will not play when you click the play button. The Real player
gives the address it is attempting to play as file://C:\Documents and
Settings\test\Application Data\Opera\Opera\profile
\cache4\opr01WX2.html This is in the temporary cache of Opera. That is
as strange as anything I have ever seen a browser do. IE7 does not
have "jumpitus", but the two characters are not properly positioned.
Finally a very old W3C Amaya 8.1b browser refuses to position the
letters over one another in any case.

I have no idea of why you want to position in this manner, for how
many sets of letters you need to do so, and how often you need to do
this. The orderly method to do this would be to make a new font set
containing the special characters you need. However getting any other
possible users of the site to download the new font set is another
matter. Getting all of the major browser makers to do something is
likely hopeless, especially since there are problems in all browser on
which I have viewed your page. Getting the W3C to do something in html
or CSS specifications would likely take a long time, if they wanted to
do something. It then could be years before most browsers would
support new standards. Some, such as Microsoft, might not consider it
worth their bother. Thus, unless you can come up with another hack
that works well on most browsers, using an image method seems to work
best for the near future. If you have to do this a lot, I agree that
having to insert many images into the text can become somewhat of a
chore.

If you have a similarly defective Firefox, you can see this athttp://www.maproom.co.uk/test.html

That's probably because the height of the line exceeds the line-height
value but the positioned elements don't "know" about this but appear
where they would be if the height of the line were normal. I'm afraid I
don't quite understand what happens here... using a negative margin
instead of positioning would avoid this but would create a different
problem: how do you know which value to use?

Indeed. Jonathan Little recently wrote in this newsgroup "Rather than
using the "pasta approach" [1] to web design why not go to htmldog.com
and learn the basics first.." But it seems to me that htmldog, and
other websites, and books, are really very little use. In the end, one
is reduced to flinging pasta.

 

[cwdjrxyz]

I have no idea of why you want to position in this manner, for how
many sets of letters you need to do so, and how often you need to do
this. The orderly method to do this would be to make a new font set
containing the special characters you need. However getting any other
possible users of the site to download the new font set is another
matter. Getting all of the major browser makers to do something is
likely hopeless, especially since there are problems in all browser on
which I have viewed your page. Getting the W3C to do something in html
or CSS specifications would likely take a long time, if they wanted to
do something. It then could be years before most browsers would
support new standards. Some, such as Microsoft, might not consider it
worth their bother. Thus, unless you can come up with another hack
that works well on most browsers, using an image method seems to work
best for the near future. If you have to do this a lot, I agree that
having to insert many images into the text can become somewhat of a
chore.

Just in case you are someone else must use an image until and if
something better comes along, see my example of an image with one
letter placed over the other see http://www.cwdjr.net/php/ttfAS.php
and the php code at http://www.cwdjr.net/php/ttfAS.php . Note I made
the image huge with a whole line in an obscure font with a red "y"
over a black "o" to illustrate how this would look in a line of text.
The actual image of only the overlay of "y" on "o" would be very small
in both size and byte size. This was done with the GD extension to
php. The obscure ancient Anglo-Saxon font is downloaded to the same
directory containing the php file generated and mentioned above. Thus
you do not depend on the obscure font being installed in a GD font
library on the server. There are hundreds of free TTF fonts you can
download and use for GD. Of course, on a recent Windows OS and likely
others, you can download the TTF fonts to your Windows OS font file,
which is easy to find, should you have the need for some obscure font.
As you will notice, GD also allows you to rotate the text when using
TTF.

 

[cwdjrxyz]

Just in case you are someone else must use an image until and if
something better comes along, see my example of an image with one
letter placed over the other seehttp://www.cwdjr.net/php/ttfAS.php
and the php code athttp://www.cwdjr.net/php/ttfAS.php.

The text file of the php code is at http://www.cwdjr.net/php/ttfAS.txt
.. Sorry.