overwriting characters

Discussion in 'HTML' started by Nick Wedd, Apr 29, 2008.

  1. Nick Wedd

    Nick Wedd Guest

    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; }
    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 Wedd, Apr 29, 2008
    1. Advertisements

  2. Nick Wedd

    cwdjrxyz Guest

    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.
    cwdjrxyz, Apr 30, 2008
    1. Advertisements

  3. Nick Wedd

    Nick Wedd Guest

    In message
    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 Wedd, Apr 30, 2008
  4. 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.
    That would be tricky, but this might work:


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


    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?
    Jukka K. Korpela, May 1, 2008
  5. Nick Wedd

    Nick Wedd Guest

    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 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

    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.


    [1] fling it against the wall and see what sticks
    Nick Wedd, May 1, 2008
  6. Nick Wedd

    cwdjrxyz Guest

    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

    cwdjrxyz, May 1, 2008
  7. Nick Wedd

    cwdjrxyz Guest

    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
    cwdjrxyz, May 2, 2008
  8. Nick Wedd

    cwdjrxyz Guest

    cwdjrxyz, May 2, 2008
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.