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; }
    </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
    --
    Nick Wedd
     
    Nick Wedd, Apr 29, 2008
    #1
    1. Advertising

  2. Nick Wedd

    cwdjrxyz Guest

    On Apr 29, 5:39 am, Nick Wedd <> 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.
     
    cwdjrxyz, Apr 30, 2008
    #2
    1. Advertising

  3. Nick Wedd

    Nick Wedd Guest

    In message
    <>,
    cwdjrxyz <> writes
    >On Apr 29, 5:39 am, Nick Wedd <> 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.


    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
    --
    Nick Wedd
     
    Nick Wedd, Apr 30, 2008
    #3
  4. 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:

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

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

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, May 1, 2008
    #4
  5. Nick Wedd

    Nick Wedd Guest

    In message <J7jSj.345020$>, Jukka
    K. Korpela <> writes
    >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.


    The Z dimension - as you deduced.
    >
    >> 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:
    >
    > <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


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


    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
    --
    Nick Wedd
     
    Nick Wedd, May 1, 2008
    #5
  6. Nick Wedd

    cwdjrxyz Guest

    On May 1, 9:38 am, Nick Wedd <> wrote:
    > In message <J7jSj.345020$>, Jukka
    > K. Korpela <> writes
    >
    > >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.

    >
    > The Z dimension - as you deduced.
    >
    >
    >
    > >> 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:

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



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

    >
    > >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, May 1, 2008
    #6
  7. Nick Wedd

    cwdjrxyz Guest

    On May 1, 1:40 pm, cwdjrxyz <> wrote:

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

    cwdjrxyz Guest

    On May 2, 2:06 am, cwdjrxyz <> wrote:

    > 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.
     
    cwdjrxyz, May 2, 2008
    #8
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?UmVkZHk=?=
    Replies:
    5
    Views:
    2,199
    =?Utf-8?B?UmVkZHk=?=
    Dec 28, 2005
  2. Dave Ficken
    Replies:
    0
    Views:
    646
    Dave Ficken
    Nov 8, 2003
  3. Dave Ficken
    Replies:
    1
    Views:
    531
    Sudsy
    Nov 10, 2003
  4. Peter Grison
    Replies:
    3
    Views:
    534
    Roedy Green
    Apr 27, 2004
  5. Vasileios Zografos

    console output - overwriting characters

    Vasileios Zografos, May 26, 2007, in forum: C++
    Replies:
    8
    Views:
    406
    Vasileios Zografos
    May 29, 2007
Loading...

Share This Page