# How to write mathematical symbols such as ^p (p-cap) correctly inHTML?

Discussion in 'HTML' started by vinay, Aug 11, 2009.

1. ### vinayGuest

How do i write mathematical symbols such as ^p (p-cap) , Po(p-not) in

vinay, Aug 11, 2009

2. ### Jukka K. KorpelaGuest

Re: How to write mathematical symbols such as ^p (p-cap) correctly in HTML?

vinay wrote:

> How do i write mathematical symbols such as ^p (p-cap) , Po(p-not) in

This is a broad question and one could write a book on it (except that it
would not sell).

I'd suggest starting from
http://www.cs.tut.fi/~jkorpela/math/
and defining the symbol repertoire that you expect to need. The repertoire
should be taken into account when selecting the fonts that you primarily
suggest for rendering.

For specific questions on particular symbols, more exact questions are
needed.

The description "^p (p-cap)" is loose but probably good enough: you seem to
mean letter p with circumflex above. Of course "^p" as such cannot say this,
as it is just two simple characters in succession, and "^" does not even
look much like the circumflex diacritic (it's much larger and differently
positioned), but the notation is suggestive anyway. Since p with circumflex
does not appear as a sepately coded ("precomposed") character in Unicode,
the only way to represent it as a character is to use letter p followed the
combining circumflex accent U+0302. You can enter these as such if you use a
suitable editor and input method, but for a casual need, a character
reference is suitable:

I don't understand "Po(p-not)", perhaps because it is literally some new
math. I thought the character "¬" as a prefix operator for negation, so that
"¬p" means "not p", and "¬" is easy and safe, since it's an ISO-8859-1
character. But if you mean some notation where a negation symbol appears in
the position of a diacritic mark above a character, then the situation is
essentially the same as in the previous case - except that you need to
define what diacritic is.

How these work on browsers is a different issue, and a tough one. Basically,
you would limit your audience considerably, but perhaps not excessively -
maybe the topic area is such that people interested in it can be expected to
read web papers with lots of fancy special characters for breakfast, so that
they have had to make their browser render them properly. It really does not
take much more than to download and install one or two fonts with very large
character coverage, such as Code2000.

Then there's esthetics. Using Code2000, for example, p̂ does not look
too good: the diacritic is to the right of the vertical middle line of the
basic character. Using Arial Unicode MS, it's much better. So what can you
do? Using Arial Unicode MS for copy text is questionable, and so is using it
for a few symbols in a text otherwise in some other font.

Maybe the best results could be achieved by using special markup like
<span class="math">...</span>
for all mathematical expressions in the document, including isolated
instances of symbols (as in "let <span class="math">p̂ </span
denote - -"), and using a style sheet like

..math { font-family: "Arial Unicode MS", "Code2000", "Everson Mono Unicode",
"Lucida Sans Unicode"; }

(There might be good fonts to be added to the list, of course.)

Ideally you would generate the special markup programmatically. If you need
to write it by hand, you might save some typing by using a short class name
like "m" and using <a> instead of <span>. As such, without attributes, <a>
is semantically as empty as <span>.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

Jukka K. Korpela, Aug 11, 2009

3. ### Herbert BlennerGuest

Re: How to write mathematical symbols such as ^p (p-cap) correctly inHTML?

On Aug 11, 10:25 am, vinay <> wrote:
> How do i write mathematical symbols such as ^p (p-cap) , Po(p-not) in

If you want to display superscripts then use an inline style such as
<SUP>exponent</SUP>. HTML mimics the negation operator by using
<SPAN style="text-decoration: overline">some text</SPAN>.

I hope this helps.

Herbert

Herbert Blenner, Aug 12, 2009
4. ### John HoskingGuest

Re: How to write mathematical symbols such as ^p (p-cap) correctly in HTML?

On Tue, 11 Aug 2009 22:50:35 +0300, Jukka K. Korpela wrote:

> vinay wrote:
>
>> How do i write mathematical symbols such as ^p (p-cap) , Po(p-not) in

>
> This is a broad question and one could write a book on it (except that it
> would not sell).

Oh, what would you know about that? Have you ever tried it? Sheesh.

>
> ...

> I don't understand "Po(p-not)", perhaps because it is literally some new
> math.

I took this to be a slight garbling by the OP of "p-nought", that is, of p
followed by a subscript zero. Of course, it could well be new math. I
haven't even finished with the old math, so what do I know?

--
John
Meet the new math: same as the old math.
We won't get fooled again

John Hosking, Aug 12, 2009
5. ### Jukka K. KorpelaGuest

Re: How to write mathematical symbols such as ^p (p-cap) correctly in HTML?

Herbert Blenner wrote:

> On Aug 11, 10:25 am, vinay <> wrote:
>> How do i write mathematical symbols such as ^p (p-cap) , Po(p-not) in

>
> If you want to display superscripts then use an inline style such as
> <SUP>exponent</SUP>.

What has the question got to do with superscripts?

> HTML mimics the negation operator by using
> <SPAN style="text-decoration: overline">some text</SPAN>.

Which "the negation operator"? You seem to imply that "o" after "P" means a
line over "P". This is admittedly a better guess than superscript zero and
corresponds to one way (an odd way if you ask me, and even if you don't) of
denoting negation in formalisms.

Maybe we'll never know what the question was really about...

But there are serious flaws with your claim that HTML mimics the negation
operator. It's actually quite absurd. First, text-decoration is CSS and has
nothing to do with HTML. Second, using CSS to convey such an essential
information as logical negation is - really absurd. This is not about the
visual rendering of the letter "P" but about something purported to express
the negation of P.

If you wanted to use a horizontal line above a letter as a symbol of
negation, then the question really is whether it would be better to use
COMBINING MACRON U+0304 or COMBINING OVERLINE U+0305 for it. On the
practical side, both of them tend to produce awful results when used after
"P", on present-day browsers. After "p", the situation is different, and I'd
vote for U+0305 on the practical ground that it tends to be longer.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

Jukka K. Korpela, Aug 13, 2009

Re: How to write mathematical symbols such as ^p (p-cap) correctly inHTML?

On Aug 13, 3:33 pm, "Jukka K. Korpela" <> wrote:
> Herbert Blenner wrote:
> > On Aug 11, 10:25 am, vinay <> wrote:
> >> How do i write mathematical symbols such as ^p (p-cap) , Po(p-not) in

>
> > If you want to display superscripts then use an inline style such as
> > <SUP>exponent</SUP>.

>
> What has the question got to do with superscripts?
>
> > HTML mimics the negation operator by using
> > <SPAN style="text-decoration: overline">some text</SPAN>.

>
> Which "the negation operator"? You seem to imply that "o" after "P" means a
> line over "P". This is admittedly a better guess than superscript zero and
> corresponds to one way (an odd way if you ask me, and even if you don't) of
> denoting negation in formalisms.
>
> Maybe we'll never know what the question was really about...
>
> But there are serious flaws with your claim that HTML mimics the negation
> operator. It's actually quite absurd. First, text-decoration is CSS and has
> nothing to do with HTML. Second, using CSS to convey such an essential
> information as logical negation is - really absurd. This is not about the
> visual rendering of the letter "P" but about something purported to express
> the negation of P.
>
> If you wanted to use a horizontal line above a letter as a symbol of
> negation, then the question really is whether it would be better to use
> COMBINING MACRON U+0304 or COMBINING OVERLINE U+0305 for it. On the
> practical side, both of them tend to produce awful results when used after
> "P", on present-day browsers. After "p", the situation is different, and I'd
> vote for U+0305 on the practical ground that it tends to be longer.
>
> --
> Yucca,http://www.cs.tut.fi/~jkorpela/

Probably best to display a gif of the equation.

7. ### JWSGuest

Re: How to write mathematical symbols such as ^p (p-cap) correctlyin HTML?

vinay wrote:
> How do i write mathematical symbols such as ^p (p-cap) ,

I obtained excellent results using mathml. Mathml is difficult to
"hand-code"; but by including a piece of javascript called
asciimathml, it can be done with an easy "shorthand". E.g p-cap
can be written as `hat(p)`. You can even use (La)TeX notation.

Examples (with explanation & links) are on my experimental pages:

http://www.jw-stumpel.nl/bounce.html
http://www.jw-stumpel.nl/test/greenhouse.html

In the second example, I managed to produce numbered equations.

Never mind the (mostly bullshit) content of those pages. Just look

JWS, Aug 14, 2009

Re: How to write mathematical symbols such as ^p (p-cap) correctly inHTML?

On Aug 14, 7:00 am, JWS <> wrote:
> vinay wrote:
> > How do i write mathematical symbols such as ^p (p-cap) ,

>
> I obtained excellent results using mathml. Mathml is difficult to
> "hand-code"; but by including a piece of javascript called
> asciimathml, it can be done with an easy "shorthand". E.g p-cap
> can be written as `hat(p)`. You can even use (La)TeX notation.
>
> Examples (with explanation & links) are on my experimental pages:
>
> http://www.jw-stumpel.nl/bounce.htmlhttp://www.jw-stumpel.nl/test/greenhouse.html
>
> In the second example, I managed to produce numbered equations.
>
> Never mind the (mostly bullshit) content of those pages. Just look

Doesn't work in IE7 on my computer.

www.richardfisher.com

9. ### JWSGuest

Re: How to write mathematical symbols such as ^p (p-cap) correctlyin HTML?

> Doesn't work in IE7 on my computer.

It did on mine (when I was still using Windows/IE7; in fact better
than in FF at the time, although FF has since been improved). Did
you install Mathplayer and the math fonts? Is javascript enabled?

JWS, Aug 14, 2009

Re: How to write mathematical symbols such as ^p (p-cap) correctly inHTML?

On Aug 14, 9:07 am, JWS <> wrote:
> > Doesn't work in IE7 on my computer.

>
> It did on mine (when I was still using Windows/IE7; in fact better
> than in FF at the time, although FF has since been improved). Did
> you install Mathplayer and the math fonts? Is javascript enabled?

Of course I didn't install those items. Nor will 99.99% of people
viewing the web site. However, it did display OK in FF.

www.richardfisher.com

11. ### JWSGuest

Re: How to write mathematical symbols such as ^p (p-cap) correctlyin HTML?

> On Aug 14, 9:07 am, JWS <> wrote:
>>> Doesn't work in IE7 on my computer.

>> It did on mine (when I was still using Windows/IE7; in fact
>> better than in FF at the time, although FF has since been
>> improved). Did you install Mathplayer and the math fonts? Is
>> javascript enabled?

>
> Of course I didn't install those items. Nor will 99.99% of
> people viewing the web site. However, it did display OK in FF.
>

I think that is a bit pessimistic. Certainly at least 0.02 % of
the people who are interested enough in the content of a page to
search for it in Google, will have the sense to follow
instructions which are clearly displayed at the beginning of it.

But of course math in html remains a problem for now; mathml is
not well known, and kludges like displaying gifs are clearly
switching to FF, a "really good" solution does not seem to exist yet.

JWS, Aug 14, 2009
12. ### Herbert BlennerGuest

Re: How to write mathematical symbols such as ^p (p-cap) correctly inHTML?

On Aug 13, 3:33 pm, "Jukka K. Korpela" <> wrote:
> Herbert Blenner wrote:
> > On Aug 11, 10:25 am, vinay <> wrote:
> >> How do i write mathematical symbols such as ^p (p-cap) , Po(p-not) in

>
> > If you want to display superscripts then use an inline style such as
> > <SUP>exponent</SUP>.

>
> What has the question got to do with superscripts?

Many programming languages use ^ to denote exponentiation. For example
2^p means two raised to the pth power.

>
> > HTML mimics the negation operator by using
> > <SPAN style="text-decoration: overline">some text</SPAN>.

>
> Which "the negation operator"? You seem to imply that "o" after "P" means a
> line over "P". This is admittedly a better guess than superscript zero and
> corresponds to one way (an odd way if you ask me, and even if you don't) of
> denoting negation in formalisms.

In Boolean Algebra, they write the negation of A is a overlined A and

>
> Maybe we'll never know what the question was really about...

You have a knack for understatement.

>
> But there are serious flaws with your claim that HTML mimics the negation
> operator. It's actually quite absurd. First, text-decoration is CSS and has
> nothing to do with HTML. Second, using CSS to convey such an essential
> information as logical negation is - really absurd. This is not about the
> visual rendering of the letter "P" but about something purported to express
> the negation of P.

I was careless in attributing overline to HTML when it belongs to
CSS.

Herbert

>
> If you wanted to use a horizontal line above a letter as a symbol of
> negation, then the question really is whether it would be better to use
> COMBINING MACRON U+0304 or COMBINING OVERLINE U+0305 for it. On the
> practical side, both of them tend to produce awful results when used after
> "P", on present-day browsers. After "p", the situation is different, and I'd
> vote for U+0305 on the practical ground that it tends to be longer.
>
> --
> Yucca,http://www.cs.tut.fi/~jkorpela/

Herbert Blenner, Aug 15, 2009
13. ### Athel Cornish-BowdenGuest

Re: How to write mathematical symbols such as ^p (p-cap) correctly in HTML?

On 2009-08-14 19:22:42 +0200, JWS <> said:

>> On Aug 14, 9:07 am, JWS <> wrote:
>>>> Doesn't work in IE7 on my computer.
>>> It did on mine (when I was still using Windows/IE7; in fact
>>> better than in FF at the time, although FF has since been
>>> improved). Did you install Mathplayer and the math fonts? Is
>>> javascript enabled?

>>
>> Of course I didn't install those items. Nor will 99.99% of
>> people viewing the web site. However, it did display OK in FF.
>>

> I think that is a bit pessimistic. Certainly at least 0.02 % of
> the people who are interested enough in the content of a page to
> search for it in Google, will have the sense to follow
> instructions which are clearly displayed at the beginning of it.

It is realistic, though. I don't think we're yet at the point where we
can assume that mathematically literate people will have browsers that
can cope with MathML. If you're writing pages primarily for students
taking a mathematics class it's probably OK to expect them to install
the right software, but otherwise it's too much like the "This site is
optimized for Netscape 4.0" notices one used to see everywhere and will
probably irritate as many people as they encourage.

Having said that, I was very impressed with how well your page at
http://www.jw-stumpel.nl/bounce.html appears in FF (3.0.13, MacOS
10.4.11) without any preparation on my part (i.e. without installing
anything that wasn't there already). It was a great deal better than I
expected. None of the other browsers I tried did as well, though
Mozilla wasn't too bad. Safari and iCab showed a mess.

For the moment I think we still need to prepare a PDF page with LaTeX
for people who really need perfect mathematical typography, and make it
clear in a prominent note at the beginning of the HTML version that the
typography is at best approximate.
--
athel

Athel Cornish-Bowden, Aug 19, 2009