Is this impossible?

Discussion in 'Javascript' started by Martin Rinehart, Jan 14, 2009.

  1. Googling this leads me to conclude that this simple design is
    impossible to achieve.

    I'd like a big button, 50 pixels tall and wide. In the center of the
    button I'd like to say "Go", with the "G" about 25 pixels tall. On the
    bottom right corner, in small letters, I'd like a "^G" to suggest that
    you can use the keyboard, too.

    I can do this on my machine, using my fonts and sizes. I'd like the
    button to look about the same on your machine, using your fonts and
    sizes. In Java I'd use FontMetrics to ask about the size of your text
    and adjust accordingly. In JavaScript?
    Martin Rinehart, Jan 14, 2009
    #1
    1. Advertising

  2. Martin Rinehart

    Stevo Guest

    Martin Rinehart wrote:
    > Googling this leads me to conclude that this simple design is
    > impossible to achieve.
    >
    > I'd like a big button, 50 pixels tall and wide. In the center of the
    > button I'd like to say "Go", with the "G" about 25 pixels tall. On the
    > bottom right corner, in small letters, I'd like a "^G" to suggest that
    > you can use the keyboard, too.
    >
    > I can do this on my machine, using my fonts and sizes. I'd like the
    > button to look about the same on your machine, using your fonts and
    > sizes. In Java I'd use FontMetrics to ask about the size of your text
    > and adjust accordingly. In JavaScript?


    Just evicting this idea from my head - take from it what you want. Could
    you perhaps put a "G" by itself into a DIV and measure it's
    offsetHeight. You could rewrite the innerHTML of the DIV with different
    sizes and keep measuring, you'd eventually find out the height/width in
    pixels of a "G" in each size [and/or font].

    If you're avoiding using an image for reasons of not wanting to impose a
    button style on different OSes, perhaps just the Go and the ^G could be
    GIFs with background transparency and you could have them in DIVs and
    overlay them onto an empty button.
    Stevo, Jan 14, 2009
    #2
    1. Advertising

  3. Martin Rinehart wrote:

    > I'd like a big button, 50 pixels tall and wide. In the center of the
    > button I'd like to say "Go", with the "G" about 25 pixels tall. On the
    > bottom right corner, in small letters, I'd like a "^G" to suggest that
    > you can use the keyboard, too.


    I'd advise against that, though. Better underline the character for the
    accessibility key as it is customary.

    > I can do this on my machine, using my fonts and sizes. I'd like the
    > button to look about the same on your machine, using your fonts and
    > sizes. In Java I'd use FontMetrics to ask about the size of your text
    > and adjust accordingly. In JavaScript?


    All of this can be achieved with HTML and CSS alone. None of that is
    on-topic here.


    PointedEars
    Thomas 'PointedEars' Lahn, Jan 14, 2009
    #3
  4. On Jan 14, 12:19 pm, Thomas 'PointedEars' Lahn <>
    wrote:
    > Martin Rinehart wrote:


    > I'd advise against that [^G], though.  Better underline the character for the
    > accessibility key as it is customary.


    I'm used to KDE where the underline would be strictly Alt+G.

    > All of this can be achieved with HTML and CSS alone.  None of that is
    > on-topic here.


    Ah! Thank you. I decided long ago to never set font sizes in pixels.
    An exception would be called for here.
    Martin Rinehart, Jan 14, 2009
    #4
  5. Martin Rinehart wrote:

    > Thomas 'PointedEars' Lahn wrote:
    >> Martin Rinehart wrote:
    >>
    >> I'd advise against that [^G], though.  Better underline the character for
    >> the accessibility key as it is customary.

    >
    > I'm used to KDE where the underline would be strictly Alt+G.


    ^G means *Ctrl*+G, though. (Compare ^H and ^W if you wrote a lot of
    bullsh^Wnonsense ;-))


    PointedEars
    Thomas 'PointedEars' Lahn, Jan 14, 2009
    #5
  6. Stevo wrote:
    > Martin Rinehart wrote:
    >> Googling this leads me to conclude that this simple design is
    >> impossible to achieve.
    >>
    >> I'd like a big button, 50 pixels tall and wide. In the center of the
    >> button I'd like to say "Go", with the "G" about 25 pixels tall. On the
    >> bottom right corner, in small letters, I'd like a "^G" to suggest that
    >> you can use the keyboard, too.
    >>
    >> I can do this on my machine, using my fonts and sizes. I'd like the
    >> button to look about the same on your machine, using your fonts and
    >> sizes. In Java I'd use FontMetrics to ask about the size of your text
    >> and adjust accordingly. In JavaScript?

    >
    > Just evicting this idea from my head - take from it what you want. Could
    > you perhaps put a "G" by itself into a DIV and measure it's
    > offsetHeight. You could rewrite the innerHTML of the DIV with different
    > sizes and keep measuring, you'd eventually find out the height/width in
    > pixels of a "G" in each size [and/or font].
    >
    > If you're avoiding using an image for reasons of not wanting to impose a
    > button style on different OSes, perhaps just the Go and the ^G could be
    > GIFs with background transparency and you could have them in DIVs and
    > overlay them onto an empty button.


    I get a very fair approximation to this using a suite of transparent
    background button images (as the background), in absolutely positioned
    <divs> with the text specified in pixels written to the div and centered.

    ..

    By making all this a class in a style sheet, and fiddling, it works
    pretty much the same in all browsers.

    Here are some fragments to play with

    From a style sheet
    ..button1

    {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    background-image: url("../Images/Button1.gif");
    background-repeat: no-repeat;
    background-position: center center;
    text-align: center;
    cursor:default;
    font-size: 9px;
    color: #010180;
    vertical-align: middle;
    }

    And to draw a button

    <div class="button1" style="position: absolute; top: 10px; left: 10px;
    width: 125px; height: 35px" id="27"
    onmouseover="this.className='hotbutton'"
    onmouseout="this.className='button1'"
    onclick="this.className='button2';do_my_button();" >
    <div style="position: absolute; font-weight: bold; text-align: center;
    width:95px; left:15px; top:10px">MY BUTTON</div>
    </DIV>

    Apologies if it ain't perfect: I ripped it from some php.

    But you get the general idea.

    The classes button1, button2 and hotbutton change the text color and the
    button image to look like its been 'pressed'

    Help yourself to buttons

    http://www.tempest.templar.co.uk/Images/
    The Natural Philosopher, Jan 15, 2009
    #6
  7. On Jan 14, 10:17 am, Stevo <> wrote:
    > Just evicting this idea from my head - take from it what you want. Could
    > you perhaps put a "G" by itself into a DIV and measure it's
    > offsetHeight.


    That just might be the beginning of FontMetrics in JavaScript. Take a
    bow!
    Martin Rinehart, Jan 15, 2009
    #7
    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. Rick Spiewak
    Replies:
    1
    Views:
    415
    Rick Spiewak
    Jul 22, 2003
  2. Brian Birtle
    Replies:
    3
    Views:
    2,413
  3. =?Utf-8?B?VVJHRU5ULi5QbGVhc2U=?=

    IMPOSSIBLE QUESTION

    =?Utf-8?B?VVJHRU5ULi5QbGVhc2U=?=, Sep 4, 2004, in forum: ASP .Net
    Replies:
    4
    Views:
    587
    Greg Burns
    Sep 4, 2004
  4. Replies:
    0
    Views:
    736
  5. Replies:
    5
    Views:
    248
    Michele Dondi
    Jun 30, 2006
Loading...

Share This Page