- Suggested Extraction Guidelines
- Creating Transparent GIFs
Links to Individual Symbol PNGs Here are links to the PNG version of each symbol in the symbol chart. (For the GIF version, click on the chart above.) Each image is an n x 19 pixel transparent PNG. The file name is the name listed followed by ".png". In most cases, whenever a lowercase alphanumeric LaTeX symbol name exists, I used it; otherwise I made up my own name. There is also a 10 x 19 blank PNG not in the table. You can also download the whole set.
Over time these images may be updated, including a change of their names.
| Line in chart | Links to the PNG images on that line |
| 1 (Roman) | rma rmb rmc rmd rme rmf rmg rmh rmi rmj rmk rml rmm rmn rmo rmp rmq rmr rms rmt rmu rmv rmw rmx rmy rmz |
| 2 (Roman caps) | rmca rmcb rmcc rmcd rmce rmcf rmcg rmch rmci rmcj rmck rmcl rmcm rmcn rmco rmcp rmcq rmcr rmcs rmct rmcu rmcv rmcw rmcx rmcy rmcz |
| 3 (math italic) | a b c d e f g h i j k l m n o p q r s t u v w x y z |
| 4 (math italic caps) | ca cb cc cd ce cf cg ch ci cj ck cl cm cn co cp cq cr cs ct cu cv cw cx cy cz |
| 5 (bold) | bfa bfb bfc bfd bfe bff bfg bfh bfi bfj bfk bfl bfm bfn bfo bfp bfq bfr bfs bft bfu bfv bfw bfx bfy bfz |
| 6 (bold caps) | bfca bfcb bfcc bfcd bfce bfcf bfcg bfch bfci bfcj bfck bfcl bfcm bfcn bfco bfcp bfcq bfcr bfcs bfct bfcu bfcv bfcw bfcx bfcy bfcz |
| 7 (digits and miscellaneous) | 0 1 2 3 4 5 6 7 8 9 emptyset circleds backp doubles yen copyright dollar pounds ss flat natural sharp clubsuit diamondsuit heartsuit spadesuit ddag vareighthnote pd nc |
| 8 (Greek) | alpha beta gamma delta epsilon varepsilon zeta eta theta vartheta iota kappa lambda mu nu xi pi varpi rho varrho sigma varsigma tau upsilon varphi phi chi psi omega |
| 9 (Greek caps) | cgamma cdelta ctheta clambda cxi cpi csigma cupsilon cphi cpsi comega |
| 10 (Hebrew and letter-like symbols) | aleph varaleph beth gimel daleth amalg amalg imath jmath ell wp re im partial nabla sum prod coprod digamma varkappa hbar hslash mho finv game bbbk complement eth backepsilon subscrh subscrl |
| 11 (calligraphic) | cala calb calc cald cale calf calg calh cali calj calk call calm caln calo calp calq calr cals calt calu calv calw calx caly calz |
| 12 (script) | scra scrb scrc scrd scre scrf scrg scrh scri scrj scrk scrl scrm scrn scro scrp scrq scrr scrs scrt scru scrv scrw scrx scry scrz |
| 13 (blackboard bold) | bba bbb bbc bbd bbe bbf bbg bbh bbi bbj bbk bbl bbm bbn bbo bbp bbq bbr bbs bbt bbu bbv bbw bbx bby bbz |
| 14 (fraktur) | fraka frakb frakc frakd frake frakf frakg frakh fraki frakj frakk frakl frakm frakn frako frakp frakq frakr fraks frakt fraku frakv frakw frakx fraky frakz |
| 15 (fraktur caps) | frakca frakcb frakcc frakcd frakce frakcf frakcg frakch frakci frakcj frakck frakcl frakcm frakcn frakco frakcp frakcq frakcr frakcs frakct frakcu frakcv frakcw frakcx frakcy frakcz |
| 16 (subscripts) | suba subb subc subd sube subf subg subh subi subj subk subl subm subn subo subp subq subr subs subt subu subv subw subx suby subz sub0 sub1 sub2 sub3 sub4 sub5 sub6 sub7 sub8 sub9 |
| 17 (superscripts) | supa supb supc supd supe supf supg suph supi supj supk supl supm supn supo supp supq supr sups supt supu supv supw supx supy supz sup0 sup1 sup2 sup3 sup4 sup5 sup6 sup7 sup8 sup9 |
| 18 (capital subscripts) | subca subcb subcc subcd subce subcf subcg subch subci subcj subck subcl subcm subcn subco subcp subcq subcr subcs subct subcu subcv subcw subcx subcy subcz subinfty sublp subrp subplus subminus |
| 19 (capital superscripts) | supca supcb supcc supcd supce supcf supcg supch supci supcj supck supcl supcm supcn supco supcp supcq supcr supcs supct supcu supcv supcw supcx supcy supcz supinfty suplp suprp supplus supminus |
| 20 (Greek subscripts) | subalpha subbeta subgamma subdelta subepsilon subvarepsilon subzeta subeta subtheta subvartheta subiota subkappa sublambda submu subnu subxi subpi subvarpi subrho subvarrho subsigma subvarsigma subtau subupsilon subvarphi subphi subchi subpsi subomega subeq sublt suble subgt subge |
| 21 (Greek superscripts) | supalpha supbeta supgamma supdelta supepsilon supvarepsilon supzeta supeta suptheta supvartheta supiota supkappa suplambda supmu supnu supxi suppi supvarpi suprho supvarrho supsigma supvarsigma suptau supupsilon supvarphi supphi supchi suppsi supomega supeq suplt suple supgt supge |
| 22 | llangle llbrack rrangle rrbrack vdvdash lt join percent minus shortminus period smallprime atsign bigdiamond semicolon checkmark bigbox comma plus eq colon notsubset backtick apostrophe backquote quote octothorpe |
| 23 | vdots ldots notapprox maltese notsucccurlyeq questionmark invquestion ddots gt notpreccurlyeq notsupset cdots largetimes acute bar vec dot ddot hat supfrown grave tilde check breve supast subin notsim |
| 24 | bigtriangleup bigtriangledown vee wedge oplus ominus otimes oslash odot dagger amp le prec preceq ll subset subseteq sqsubseteq in |
| 25 | vdash smile frown ne ge succ succeq gg supset supseteq sqsupseteq owns dashv parallel notin equiv sim simeq |
| 26 | asymp approx cong bowtie propto models doteq perp supperp infty smallint prime surd top forall exists lnot leftarrow bigleftarrow to subto bigto |
| 27 | leftrightarrow bigleftrightarrow uparrow updownarrow nearrow swarrow mapsto hookleftarrow leftharpoonup rightharpoonup rightleftharpoons longleftarrow biglongleftarrow onetoone onto |
| 28 | longrightarrow biglongrightarrow longleftrightarrow biglongleftrightarrow biguparrow bigdownarrow bigupdownarrow searrow nwarrow longmapsto hookrightarrow leftharpoondown rightharpoondown onetooneonto |
| 29 | bigvee bigcap bigcup bigsqcup biguplus bigodot bigotimes bigoplus bigwedge int oint lp rp lfloor rfloor vert lbrack rbrack lceil rceil lbrace rbrace langle rangle solidus |
| 30 | bang downdownarrows lplp rprp downarrow invbang vartriangle triangledown square lozenge angle measuredangle nexists backprime varnothing blacktriangle blacktriangledown blacksquare blacklozenge bigstar sphericalangle diagup diagdown dotplus smallsetminus |
| 31 | doublecap doublecup barwedge veebar doublebarwedge boxminus boxtimes boxdot boxplus divideontimes ltimes rtimes leftthreetimes rightthreetimes curlywedge curlyvee |
| 32 | circleddash circledast circledcirc centerdot intercal leqq leqslant eqslantless lesssim lessapprox approxeq lessdot llless lessgtr lesseqgtr lesseqqgtr |
| 33 | doteqdot risingdotseq fallingdotseq backsim backsimeq subseteqq ssubset sqsubset preccurlyeq curlyeqprec precsim precapprox vartriangleleft trianglelefteq vddash vvdash |
| 34 | smallsmile smallfrown bumpeq bbumpeq varpropto blacktriangleleft therefore geqq geqslant eqslantgtr gtrsim gtrapprox gtrdot gggtr |
| 35 | gtrless gtreqless gtreqqless eqcirc circeq triangleq thicksim thickapprox supseteqq ssupset sqsupset succcurlyeq curlyeqsucc succsim succapprox vartriangleright trianglerighteq |
| 36 | v2dash shortmid shortparallel between pitchfork blacktriangleright because nless nleq nleqslant nleqq lneqq lneq lvertneqq lnsim lnapprox |
| 37 | ngtr ngeq ngeqslant ngeqq gneq gneqq gvertneqq gnsim gnapprox nprec npreceq precneqq precnsim precnapprox nsim nshortmid nmid |
| 38 | nvdash nv2dash ntriangleleft ntrianglelefteq nsubseteq nsubseteqq subsetneq varsubsetneq subsetneqq varsubsetneqq nsucc nsucceq succneqq succnsim succnapprox ncong |
| 39 | nshortparallel nparallel nvddash nvvddash ntriangleright ntrianglerighteq nsupseteq nsupseteqq supsetneq varsupsetneqq supsetneqq varsupsetneq leftleftarrows leftrightarrows lleftarrow |
| 40 | twoheadleftarrow leftarrowtail looparrowleft leftrightharpoons curvearrowleft circlearrowleft lsh upuparrows upharpoonleft downharpoonleft multimap leftrightsquigarrow rightrightarrows rightleftarrows rrightarrow |
| 41 | twoheadrightarrow rightarrowtail looparrowright curvearrowright circlearrowright rsh restriction downharpoonright rightsquigarrow nleftarrow nbigleftarrow nleftrightarrow nrightarrow nbigrightarrow nbigleftrightarrow |
| 42 | pm mp setminus cdot times ast star diamond circ bullet div cap cup uplus sqcap sqcup triangleleft triangleright wr bigcirc |
| 43 | pfun ffun psurj bij pinj finj defs ndres nrres smallcirc spot semi inbag uminus limg rimg lblot rblot osmallplus osmalltimes filledsquarewithdots squarewithdots convolution |
| 44 | currency cent wlozenge kreuz smiley blacksmiley frownie sun brokenvert diameter invdiameter phone recorder clock permil bell ataribox pointer lightning photon gluon eighthnote quarternote halfnote fullnote twonotes |
| 45 | vhf aplbox aplinv aplleftarrowbox aplrightarrowbox apluparrowbox apldownarrowbox aplinput aplminus apllog aplstar aplvertdown aplnotdown aplnotland aplnotlor aplcirc aplcircbot notbackslash notslash aplcomment desnode astrosun newmoon fullmoon leftmoon rightmoon |
| 46 | mercury venus mars jupiter saturn uranus neptune pluto earth conjunction opposition ascnode_or_leo vernal_or_aries libra taurus scorpio gemini sagittarius cancer capricornus aquarius virgo pisces hexstar varhexstar |
| 47 | davidstar leftcircle leftcircleb rightcircle rightcircleb leftbcircle rightbcircle wbox xbox wbowtie wdiamond octagon hexagon varhexagon pentagon varangle invneg leftturn rightturn wvarpropto leadsto varint iint iiint varoint oiint thorn cthorn dh cdh openo inve |
| 48 | moon varuranus varneptune varpluto skull biohazard radiation laserbeam textdbend stopsign bicycle blitza mayazero jackstar sixteenstarlight snowflakechevron scissorright scissorleft handright handleft bighandright bighandleft |
| 49 (Roman subscripts) | subrma subrmb subrmc subrmd subrme subrmf subrmg subrmh subrmi subrmj subrmk subrml subrmm subrmn subrmo subrmp subrmq subrmr subrms subrmt subrmu subrmv subrmw subrmx subrmy subrmz |
| 50 (Roman capital subscripts) | subrmca subrmcb subrmcc subrmcd subrmce subrmcf subrmcg subrmch subrmci subrmcj subrmck subrmcl subrmcm subrmcn subrmco subrmcp subrmcq subrmcr subrmcs subrmct subrmcu subrmcv subrmcw subrmcx subrmcy subrmcz nmegill publicdomain |
How to Use the Symbols The basic way to reference a GIF (or PNG) image on a web page is with an IMG tag. For example " -->
renders the symbol " ". The ALT attribute provides accessibility for people using text-only browsers such as w3m, links, and lynx. The TITLE attribute is optional and causes a "tool tip" with the symbol name to appear when hovering over the symbol. The WIDTH and HEIGHT (which is always 19) are optional but make the page load faster with fewer browser jumps while rendering the page. You can see the WIDTH and HEIGHT in the tool tip that appears when you pass your cursor over the symbol chart above, or you can click on the symbol and inspect its properties in your browser. If you use WIDTH and HEIGHT make sure you get them right, for otherwise the symbol will be distorted.
The STYLE="margin-bottom:-4px" attribute shifts the symbol vertically so that it lines up with the text. On a page with many symbols, we would ordinarily put this attribute in a CSS directive, as you can see from the source code of this web page. If you use this CSS directive, be aware that images that aren't math symbols must have the attribute STYLE="margin-bottom:0px" to override the CSS; again, you can see that done on this web page.
When you finish editing your web page, verify that its syntax is correct with W3C's on-line HTML Validator [external]. Just because it "looks right" on your particular browser version doesn't mean it will display correctly on others.
There are a couple of ways you can mix the symbol images with the rest of your page. One way is to use special symbols mixed with the normal browser text. Here is an example of a formula from mathematical logic, "For any x, there exists a y not equal to x." The HTML source code looks like this (for simplicity, we omitted the optional but recommended WIDTH and HEIGHT attributes):
| SRC="x.gif" ALT="x" /> SRC="exists.gif" ALT="exists" /> SRC="y.gif" ALT="y" /> SRC="y.gif" ALT="y" /> SRC="ne.gif" ALT="=/ x.gif" ALT="x" /> |
and here is the result, independent of your browser font setting:
It is possible to build two-dimensional formulas by using table cells to determine the placement of symbols. For example,
|
looks like this:
In the code above, the parentheses and integral sign were stretched using the HEIGHT attribute, while preserving the original WIDTH.
Semi-Automated HTML Generation Typing in the IMG tags as described above can be tedious. Here is another way that may save you time if you have a page with many equations. We will show you how you can type this into a text editor:
| The square root of 2 is irrational: ` sqrt 2 e/ QQ ` , where ` QQ ` is the set of rational numbers. |
then programatically generate HTML code that displays like this:
| The square root of 2 is irrational: , where is the set of rational numbers. |
The overall idea is very simple. You define mnemonics for your math symbols, such as sqrt for the square root surd. When the program encounters these mnemonics enclosed in backticks (`), it replaces the mnemonics with the HTML code you specified for them.
I will show you how to do this by exploiting the web-page generation feature built into a program called "Metamath". Note that Metamath was designed for a completely different purpose, and you must follow the instructions below carefully to coax it into accomplishing our goal. (In principle a specialized program could be written that would be simpler to --> use, but I'll leave that task for someone else if they are interested. The method described here is one I use myself, and I thought it would be useful to share it.)
First, download and compile the Metamath program according to the instructions on the Metamath Home Page. For Windows, you can download the pre-compiled version metamath.exe (0.5MB) instead. Then create an input file for Metamath with a text editor (Notepad or equivalent), using the following example to guide you. You may want to copy and test this example to make sure everything works. The lines you will customize are shown in red . The 5 lines shown in black should not be modified!
| $( DO NOT EDIT ANY LINE WITH A "$" ON IT! $) $c dummy $. $( LIST YOUR MNEMONICS BELOW. $) $c QQ 2 e/ sqrt $. $( DEFINE YOUR MNEMONICS BELOW. $) $( $t htmldef "QQ" as ""; htmldef "2" as ""; htmldef "e/" as " "; htmldef "sqrt" as ""; htmldef "dummy" as ""; $) $( TYPE YOUR TEXT TO BE TRANSLATED BELOW. $) $( The square root of 2 is irrational: ` sqrt 2 e/ QQ ` , where ` QQ ` is the set of rational numbers. $) dummy $a dummy $. |
- The third line (first red line) is a list of the mnemonics that you want to use to represent the GIF (or PNG) symbol images, separated by spaces (and line breaks if necessary). These mnemonics, which are case-sensitive, may consist of any non-white-space characters except "$"; also avoid the backtick (`), single quote ('), and double quote (") since they involve special rules.
- The 4 red "htmldef" lines associate your mnemonics with the HTML code for the GIF (or PNG) symbol images. In general this can be any HTML code you want, not just IMG tags. Note that in the "htmldef" line for "e/", there are spaces around the IMG tag, which are often good to include around binary relation or operation symbols for better appearance. If a line is very long and you want to break it up into several lines for better readability, you can do it like this:
| htmldef "QQ" as " " ALT='QQ' />"; |
Once you build up a collection of the "htmldef" lines you need, you can use them over and over. The Metamath master database file set.mm (7MB) has inside of it many "htmldef" lines pre-defined for you that you can clip out if you like. It also references some custom GIFs with names beginning with an underscore; you probably don't care about those but if you want them they can be found in the Metamath Proof Explorer download.
Next run the Metamath program, giving it the commands "read dummy.mm", "show statement dummy /html", and "exit". (On Windows, put the files "metamath.exe" and "dummy.mm" in the same folder. Click on "metamath.exe" to run the program.) The session will look like this, with the commands you will type shown in red :
| Metamath - Version 0.07x 25-Apr-05 Type HELP for help, EXIT to exit. MM> read dummy.mm Reading source file "dummy.mm". 12 lines (653 characters) were read from "dummy.mm". The source has 3 statements; 1 are $a and 0 are $p. No errors were found. However, proofs were not checked. Type VERIFY PROOFS * if you want to check them. MM> show statement dummy /html Creating HTML file "dummy.html". 5 typesetting statements were read from "dummy.mm". MM> exit |
The Metamath program thinks it is generating a web page for the Metamath site, and there is a lot of extra stuff in its output file "dummy.html" that is irrelevant for our purposes. To extract the relevant HTML code, open "dummy.html" in your text editor, search for the string "Description: ", and copy the text after it and up to the string "". Paste it into your HTML file. For our example, the code section you will copy looks like this:
| The square root of 2 is irrational: ALT='sqrt' /> SRC='notin.gif' WIDTH=10 HEIGHT=19 ALT='e/' /> WIDTH=13 HEIGHT=19 ALT='QQ' />, where is the set of rational numbers. |
When pasted into your HTML file, it will display like this:
| The square root of 2 is irrational: , where is the set of rational numbers. |
Suggested Extraction Guidelines Sometimes you may want to create your own GIFs or PNGs by extracting symbols from the symbol chart (which can be saved as "symbols.gif" by right clicking on it in your browser). For example, you may not like the cell size I chose, or you may want to have a subscript directly below a superscript, or you may want to build two-dimensional formulas, or you may feel you have improved the design of a bit map.
Each individual symbol image provided here is an n x 19 pixel transparent GIF (or PNG). The width n is the width of the symbol plus (usually) a pixel of padding on each side. If we call the bottom row 1, then roman letter "I" is aligned between rows 5 and 15 inclusive. These numbers were chosen because they will properly align the symbols with a 12-point browser fonts Times New Roman and Arial.
Creating Transparent GIFs There are many graphics programs that can clip out images and create transparent GIFs or PNGs. One of them, The GIMP (GNU Image Manipulation Program), is a free program included with most Linux distributions, including RedHat 7.2, which we describe below. It is also available for Windows. For other graphics programs, consult your user's manual. (By the way, our image map above that lets you click on symbols in the symbol chart was created using The GIMP's Imagemap plugin.)
Here is how to use The GIMP to extract a symbol from the symbol chart and create a transparent GIF from it. We show the exact process down to each individual keystroke and mouse click, so even if you have never used The GIMP before you should have no trouble with this. We assume you have saved the symbol chart into your directory as the file symbols.gif (in the Mozilla browser, right-click on it and select "Save Image. ").
Note: the "webify" plug-in must be installed in The GIMP. This happens automatically with a full install of The GIMP on RedHat 7.2.
The following instructions are for the Gnome window manager. They should be similar in KDE. You can also type "gimp" at the bash command prompt in a terminal emulation window.
| For search engines | This page was last revised on 2-Oct-2015. Your comments are welcome: Norman Megill | W3C HTML validation [external] |
