How Do I Put the Greek Letter Pi on a Button?

[kvnsmnsn]

I'm trying to build a calculator in XHTML, and I've got a button that
currently reads "x <- pi", meaning load 3.141592654 into register x.
Is there some way to alter the button's label so that in the place of
"pi" I have the actual Greek letter pi? Any help on this would be
greatly appreciated.

---Kevin Simonson

"You'll never get to heaven, or even to LA,
if you don't believe there's a way."
from _Why Not_

 

[Jukka K. Korpela]

Scripsit (e-mail address removed):

I'm trying to build a calculator in XHTML, and I've got a button that
currently reads "x <- pi", meaning load 3.141592654 into register x.
Is there some way to alter the button's label so that in the place of
"pi" I have the actual Greek letter pi?

Yes, and you can even have a real arrow character instead of the clumsy
"<-".

<input type="button" id="compute" value="x ← π">

The above uses character references, with hexadecimal Unicode values. You
might find the following "mnemonic" alternative more readable as source:

<input type="button" id="compute" value="x &larr; &pi;">

Browser support tends to be fairly good these days, for relatively common
characters like the simple arrows and basic Greek letters.

Note, however, that common browser defaults may mean that the font used in
buttons is a sans-serif font where the letter small pi looks like
reduced-size capital pi, instead of the shape of small pi that people know
from math texts. Moreover, its typically in a small font size, smaller than
copy text! The following would usually help:

<style type="text/css">
input { font-family: Georgia, Times New Roman, serif; font-size: 100%; }
</style>

(You may wish to use class attribute on the <input> element and restrict the
styling to selected <input> elements only, using a class selector in CSS.)

 

[J.O. Aho]

I'm trying to build a calculator in XHTML, and I've got a button that
currently reads "x <- pi", meaning load 3.141592654 into register x.
Is there some way to alter the button's label so that in the place of
"pi" I have the actual Greek letter pi? Any help on this would be
greatly appreciated.

You could always try to use &pi; instead of your current pi

 

[Toby A Inkster]

Is there some way to alter the button's label so that in the place of
"pi" I have the actual Greek letter pi?

If your page uses some form of Unicode character encoding (e.g. UTF-8),
this should be fairly easy:

<input value="x ⇠π">

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact
Geek of ~ HTML/CSS/Javascript/SQL/Perl/PHP/Python*/Apache/Linux

* = I'm getting there!

 

[Michael]

Is there some way to alter the button's label so that in the place of
Just tried
<INPUT TYPE=submit VALUE='&pi;'>
which works on both my IE 6 and FF 1.5

Regards

Michael.

 

[kvnsmnsn]

=The above uses character references, with hexadecimal Unicode values.
You
=might find the following "mnemonic" alternative more readable as
source:
=
=<input type="button" id="compute" value="x &larr; &pi;">

Thanks, Jukka, this worked great.

My next question is, is there a way in XHTML to print an arrow that
points both ways? Is there a "&rlarr;", maybe?

Also, how do you put subscripts and superscripts on buttons? I've
currently got an "x ^ y" that I would rather represent as "x" with "y"
as a superscript, and a "log_x y that I would rather represent as
"log" with "x" as a subscript.

---Kevin Simonson

"You'll never get to heaven, or even to LA,
if you don't believe there's a way."
from _Why Not_

 

[Jukka K. Korpela]

Scripsit (e-mail address removed):

My next question is, is there a way in XHTML to print an arrow that
points both ways? Is there a "&rlarr;", maybe?

Things don't work quite that way, by making up entities. In HTML, you can
use any Unicode character. A small minority of them has entity names defined
for them, but that's rather irrelevant. So basically you could take a look
at the Unicode block Arrows and then consider how widely the characters in
it are available in _fonts_ in common use; this is relevant, entities are
not. Incidentally, there are entities &harr; for left right arrow and &hArr;
for left right double arrow, and &harr; alias ↔ is probably what you
want, since it's basically the two-way counterpart of &larr;

(XHTML adds nothing but confusion to HTML, as far as practical use as
delivery format of web pages at present is considered.)

Also, how do you put subscripts and superscripts on buttons?

There are Unicode characters for some subscripts and superscripts, but most
of them (beyond superscript 1, 2, and 3) are poorly supported in fonts, and
the repertoire is rather limited - there is no superscript y for example.

The other approach is to use <sub> or <sup> markup, but for that, you need a
context where markup (tags) are allowed, and a value="..." attribute (or any
attribute for that matter) is not such a context. There's the possibility of

I've currently got an "x ^ y" that I would rather represent as "x" with
"y"
as a superscript, and a "log_x y that I would rather represent as
"log" with "x" as a subscript.

You could use

<button type="submit" name="foo" value="bar">
<var>x</var>^<var>y</var>
</button>
<hr>
<button type="submit" name="foo2" value="bar2">
log_<var>x</var><var>y</var>
</button>

Beware that the rendering of button texts, especially with superscripts or
subscripts, can be rather awkward, so consider using a suitable style sheet
like

button { font-family: Verdana; font-size: 100%; }

The main problem with <button> is that Internet Explorer (including version
7) gets it fundamentally wrong. It does not send data like foo=bar or
foo2=bar2 as it should; instead it sends the name of the button followed by
an equals sign and the _content_ of the element, resulting in a mess
foo=%3CVAR%3Ex%3C%2FVAR%3E%3CSUP%3E%3CVAR%3Ey%3C%2FVAR%3E%3C%2FSUP%3E
This may not matter if you can arrange things so that all the buttons have
unique names, so that you can look at the name part of the data only, or if
you use buttons other than submit buttons (e.g. <button type="button" ...>
for scripted buttons that are supposed to work using client-side JavaScript.

 

[Roedy Green]

My next question is, is there a way in XHTML to print an arrow that
points both ways? Is there a "&rlarr;", maybe?

see http://mindprod.com/jgloss/htmlcheat.html#ENTITIES

 

[Jukka K. Korpela]

Scripsit Roedy Green:

see http://mindprod.com/jgloss/htmlcheat.html#ENTITIES

Sometimes it might make some sense to comment on a discussion three months
after others finished discussing it (and after correct answers to questions
were given), but that's hardly one of those cases. You are referring to your
page that contains many bogosities even on a casual look. Luckily you shout
in red: "I found the easiest way to learn HTML is to look at other people's
examples, to cut and paste from them, and to experiment by fiddling the
various parameters to see what the visual effects are." So anyone who takes
advice from you probably deserves all the mess he gets.

 

[Mike Duffy]

Scripsit Roedy Green:

anyone who takes advice from you probably deserves all the mess he gets.

But he said it was the *easiest* way to learn HTML, not the *best* way.