Is this impossible?

[Martin Rinehart]

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?

 

[Stevo]

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.

 

[Thomas 'PointedEars' Lahn]

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

 

[Martin Rinehart]

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.

 

[Thomas 'PointedEars' Lahn]

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

 

[The Natural Philosopher]

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/

 

[Martin Rinehart]

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!