Mathematizing HTML Pages

	Home Page	About Me
Philosophy	Friends' Web Pages	Caving	Photography
Fractals	Comets	SciFi/Fantasy/RPG	Mathematics
	Space Science	The Codex
Science Links	Space Science Links	Physics Links	Other Links

Math Notation in HTML

There is a lot that can be done for math symbols with HTML. A lot of it doesn't get press because no one uses the formatting tags. To figure out how I did anything on this page, click "view page source" and check out how I finagled the solution. Everything I present first does not use special fonts. To do more than that, scroll down to the second section, "Speaking Greek".

If it seems like I am really not making sense because the math I'm talking about does not seem to correspond with what is on the page, or the symbols I am claiming to be using are not right or "broken," then e-mail me at iareth@io.com and tell me. Web browsers are like screwdrivers. They're not quite standardized. You've got your "Phillips" web browser and your "flat head" web browser - and knowing that, you think you have it all figured out. Then you find some "Alan" code, and everything stops.

Algebra notation can be accomplished well, with exceptions, for example, the equation:
         V·Ue^kx = ¹/₂x²y/z + xe^kx
Notice that I have a dot at the midline the last equation. In Macintosh, you can go to Key Caps and see what all 256 combinations for a standard font like Times New Roman do and thus find out how to type various mathematical symbols. This multiplication symbol in Windows is [Alt 250]. In order to find other such "exotic" symbols, you have to experiment. You can also cut and paste them indefinitely, which is what I do once I have a complete "library" on a page. I found many such symbols by cutting and pasting a piece of the text of a compressed file. Superscripts and subscripts are supported by SUP and SUB tags in HTML, and these can be nested:
         a^{b_{c^{d_{e^{f_{g^h_i}}}}}}
which is a remarkably useful feature for rendering things like:
        e^{¹/₂[f(x)]² + g(y)}
Although Internet Explorer (unfortunately) does not automatically reduce the size of sub/super-scripted characters.

The big killer in HTML is fraction notation, but the fraction

can be rendered in one line as:
         (x² - y²)/(x² + y²)^0.5 or;
         (x² - y²)/(x² + y²)^1/2 or;
         (x² - y²)·(x² + y²)^-1/2 etc.

Now obviously you can use an image, as I did for the original fraction, and this is common on many pages. To do this, follow the following rules:

      1:  Create a new image in whatever image processor you use, such as Corel or Photoshop. Your image processor needs to be able to save images as transparent GIF files, or something equivalent, such as PNG files. The new image needs to be 8 bit, or "palated color."
      2:  Use the text generator feature to type in the separate lines of your fraction (x² - y² and x² + y² in the example above) and the fraction bar. You should need to use 12 point type, since this is what default browser fonts are usually set to. However, paint programs are notorious for handling font size changes by blurring the images. You may need to start with a large size then reduce it, making sure the "anti-aliasing" option is turned off when resampling the image. If you can't force it to work, use the HEIGHT and WIDTH commands in HTML to change it, which is what I had to do above.
      3:  Use object move or cut & paste functions to move the pieces to where they are desired.
      4:  Crop the image to as close as the expression as you can on all four sides without cutting into it.
      5:  Save the image as a transparent GIF, using the background as your transparency color.
      6:  This image can now be called by HTML in line where needed. Cropping it close reduces the disturbance it generates in the text. When calling the image, use the ALIGN = CENTER option to make the center of the fraction bar more closely align with the text. If you generate images for each of your "problematical" expressions, you can then use them as many times as you want. The browser usually only needs to upload the image once, and it will then appear in all of its instantiations.

Some low quality fractions can be made with the underline (U) tag, but the underline creeps up into the superscripts in the top line, and of course you can't actually set this equal to anything and have it look nice. This is a disfunctional fraction. It only looks good when it's a little below or above everything else.
x - y
x² + y²

Calculus notation is done in a similar fashion to the rest of algebra, e.g.
         ^d⁴/_dx⁴f(x) = d_xxxxf(x) = f^iv(x)
Using similar symbols that actually exist in HTML helps, for example you can let ѓ = integral, so:
        ѓѓ(e^kx + x²)dx² = e^kx/k² + x⁴/4 + C₁x + C₂
There is also the paragraph symbol § which looks like a closed path integral:
         §f_a(x)dx = 0

Just make sure you let your audience know what you're doing when you use a substitute symbol.

Matrix elements are harder, but still clear:
R^xy_zt
but if you want Greek indices, you are out of luck except for µ. With cleverness, you can still do things like
R_µv - ¹/₂g_µvR = G_µv = 4piT_µv.
It's really irritating that the formatting of Einstein's Equation can be accomplished within standard HTML, but I can't get a Greek pi.

Operator notation has to be simulated, but because of the built-in Icelandic capability of Word and HTML, you can get some close symbols. For instance, if you let р be the partial differential operator, you can get:
р_xx + р_yy + р_zz - р_tt/c², and
р_xx + р_yy + р_zz + iр_tt/c
I think that printers use bold letters for vectors because of the difficulty of putting circumflex markers on things. Perhaps that is the origin of e₁, e₂, e₃, and e₄ for unit vectors.

If you let Р gradient operator and Ј = Delambertian operator, you can simplify wave equations:
         (р²/рx² + р²/рy² + р²/рz² - р²/(cрt)²)V = 0 or
         рV²/рx² + рV²/рy² + рV²/рz² = рV²/(cрt)²
so they become:
        Р²V - рV²/(cрt)² = Ј²V = 0
You can even use an unuseр ASCII coрe, since most HTML readers render these as boxes, to get
        ²V = 0

(The characters Р and р represent magiscule and miniscule letters for the "th" sound in English "then"; Ю and ю represent the "th" in "thin." "Рen рis юin юinkr юot 'рat's enuff!'")

Here are some unusual symbols gleened from the Web:

§ і Р р ° № (r) 1/4 3/4 ± Я Ш ш · ё ¦ Ч Ю ю Ж ж Ї » ў

Speaking Greek

There is a FONT FACE command in HTML that is supposed to get any font installed on the system where the web browser is running. You have to have your browser configured to allow user defined fonts in order for this to work. If you have done this and have the standard Symbol font installed, the following line will be in Greek:

Caire ўHduqae

Well, pretty good Greek, anyway. Symbol doesn't support Greek accent marks.

The Symbol keyboard looks like this:

        ~ ! @ # $ % ^ & * ( ) _ +
         Q W E R T Y U I O P { }
         A S D F G H J K L : "
            Z X C V B N M < > ?

        ` 1 2 3 4 5 6 7 8 9 0 - =
         q w e r t y u i o p [ ]
         a s d f g h j k l ; '
            z x c v b n m , . /

Under Mac OS you can use Key Caps to get the other two keyboards full of math symbols. In Windows, you use [Alt] + [#], where # are the ASCII codes 128-255, and need to experiment, though the following list should help. Missing numbers generated repeated characters.

128     З 129     ь 130     й 131     в 132     д 133     а

134     е 135     з 136     к 137     л 138     и 139     п

140     о 141     м 142     Д 143     Е 144     Й 145     ж

146     Ж 147     ф 148     ц 149     т 150      ы 151     щ

153      Ц 154      Ь 155      ў 156      Ј 157      Ґ 158      P

160      б 161      н 162      у 163      ъ 164      с 165      С

166      Є 167     є 168     ї 169     _ 170     ¬ 171     1/2

172     1/4 173     Ў 174     « 175     » 176     _ 179     ¦

183     + 224     _ 225     Я 227     ¶ 230     µ 240     _

241     ± 246     ч 248     ° 250     · 252     n 253     І

Not all, by far, of the symbols available using the "Insert Symbol" command in Word, are available in the symbol font as ## 0-255. You cannot, at least under Windows, reliably use the insert symbol command, save the file as text, and have it come out right when converted back online by a FONT FACE command. But you can cut and paste the symbols off of this page and use the resulting latin characters - maybe. We're now entering the territory of Internet legerdemain. In any case, now you can say
C =2pr, A = 4pr², V = ⁴/₃pr³, and J = 2p²r³,
Even on the Internet. (But do you know what that last one is the volume of?)

Some more equations, while "speaking Greek."
______
2ax = -b ±Цb² - 4ac Lots of underlining and clever spacing. This may not work in some browsers.

С²J = 0

          Ґ
         _е ^xⁿ/_n! = e^x                                  This doesn't work so well.
        n = 0

"x($y; y = x + 1)

- ^h²/_8p²mС²Y + VY = ^¶²/_¶t²Y Those who recognize the Schrцdinger Equation know there is a famous symbol missing from the character set.

бxс = ѓѓѓrcosfsinq|Y_l^m|²R_nl²drd(cosq)df = 0

back to the top of the page

UGIAINE

128 З	129 ь	130 й	131 в	132 д	133 а
134 е	135 з	136 к	137 л	138 и	139 п
140 о	141 м	142 Д	143 Е	144 Й	145 ж
146 Ж	147 ф	148 ц	149 т	150 ы	151 щ
153 Ц	154 Ь	155 ў	156 Ј	157 Ґ	158 P
160 б	161 н	162 у	163 ъ	164 с	165 С
166 Є	167 є	168 ї	169 _	170 ¬	171 1/2
172 1/4	173 Ў	174 «	175 »	176 _	179 ¦
183 +	224 _	225 Я	227 ¶	230 µ	240 _
241 ±	246 ч	248 °	250 ·	252 n	253 І