[Contents]
Copyright © 2012 jsd

Decorated Symbols (e.g. x-bar, q-dot, v-vector) in HTML
John Denker

1  A Style Recommendation

In ordinary situations, it is good policy to not decorate vectors at all. That is, rather than representing a vector as v (with an arrow) or v (boldface), I recommend writing plain v. If you want to indicate the scalar magnitude of the vector v, you can write simply |v|.

I only use the v symbol when I am quoting somebody else, not when I am writing in my own voice.

This policy is pretty much mandatory when doing anything with Clifford Algebra, because there are many grades (scalar, vector, bivector, et cetera). For one thing, there simply aren’t enough decorations to distinguish all the possibilities. Secondly, you quickly discover that there is a better way to make the distinctions that need to be made: Make it part of the definition of the symbol. That is, if you want s to represent a scalar, say so. If you want b to represent a bivector, say so.

By way of analogy, consider dimensional analysis. We do not decorate symbols to indicate the dimensions of the corresponding quantity. If we want x to represent a length, we just say so. If we want v to represent a velocity, we just say so. Keeping track of the grade of an object is just as easy as keeping track of the dimensions.

In a complicated document, it helps to have a legend or glossary that tabulates the meaning of the symbols. In a long document that acquires more symbols as it goes along, you can have a short glossary near the front and progressively longer glossaries farther along. Example:

v ... velocity   contravariant vector
a ... acceleration   contravariant vector
m ... mass   invariant scalar
E ... energy   frame-dependent scalar

2  Workable Decorations

If you decide you must decorate your symbols, you will find that it is not easy to produce decent-looking decorations in HTML.

I figured out a technique that works reasonably well when using firefox to view HTML documents. The technique wors for a dot (perhaps to indicate a time derivative), for an overbar (perhaps to indicate an average), and for an arrow (to indicate a vector). Here are my best results:

...a...b...X...       
   
  ...a‌·...b‌·...X‌·...  xxx‌·xx  |r| |r‌·| r2 r‌·2     
   
  ...a...b...X...       
             (1)

These were done using HTML element-positioning features. Some macros for implementing these decorations are presented in section 4.

3  Other Options : Pros and Cons

We now discuss the advantages and disadvantages of other techniques that you might be tempted to try.

  1. Let’s try the built-in \bar{...} operator. HEVEA implements this using HTML style="text-decoration:overline". The problem is, HEVEA forgets to use the math-italic font, so the result doesn’t look good in equations, as we see on the LHS of the following equation

    ...ā...b...X...  ...a...b...X...      
    (non-italic)   (math italic)
                 (2)

    Also note that the width of the bar depends on a funny way on the symbol that is getting barred, which may or may not be what you want.

    If you want to use style="text-decoration:overline", you can fix the font issue by hand, in the raw HTML:

    ...a...b...X...  
                 (3)

    which seems fine. That’s an OK solution for the overbars; the only problem is that it doesn’t generalize to the dots and the arrows.

  2. The built-in \dot{...} operator is unreliable. It works for some letters (such as x) but fails for others (such as q). For more on this, see reference 1. Also note that once again, we have issues with the math-italic font:

    ...ẋ...Ẋ... q  
                 (4)

  3. As defined by unicode (not HTML per se), there are some “combining diacritical marks” including dots and arrows. This seems like the right solution in theory; the only problem is that these diacritical marks are not yet properly supported. On linux/firefox, they look ugly, as you can see on the LHS of equation 5 ... and on mac/safari and windows/IE they are not supported at all.

    ...a⃗...b⃗...X⃗... ≠...a...b...X...       
                 (5)

    I don’t know whether this is a problem with the fonts or with the implementation-code in the browser. For present purposes, I don’t care. I’m looking at this from the user point of view, and all I know is that the user gets a bad result.

  4. Trying to place decorations atop a symbol using the HTML <table> feature is not satisfactory. The spacing is wrong, and there does not appear to be any way to fix it.
  5. Another possibility is to publish the equations as images. Given an equation typeset in LATEX, there are tools such as tex4ht that know how render it as an image. This is always an option, but it comes at a cost, namely reduced flexibility.

    If you’re going to render the equations as images, why not go all the way and publish the entire page as an image??? I do that sometimes; many of my documents are available in both HTML and PDF.

    The advantage of HTML is that it allows the browser some flexibility as to how to render the page. Nowadays there are getting to be more and more types of devices, with small screens, large screens, and who-knows-what ... so flexibility is perhaps more important than ever.

4  The Macros

Note: We use funny spellings (barr insted of bar, dott instead of dot) so as to not conflict with the HEVEA built-ins.

The capitalized macros (Dott, Barr, etc.) are for tall symbols, i.e. capital letters, or letters with ascenders.

\justhtml{
%%%%%%%%
%% Note that {\overline #1} is not acceptable,
%% because it buggers the baseline of the expression.

\def\barr#1{\begin{rawhtml}<i>\end{rawhtml}#1\begin
{rawhtml}<span style="position: relative;
        bottom: 1.0ex;
        letter-spacing: -1.2ex;
        right: 1.0ex">&ndash;</span></i>\end{rawhtml}}

\def\Barr#1{\begin{rawhtml}<i>\end{rawhtml}#1\begin
{rawhtml}<span style="position: relative;
        bottom: 1.3ex;
        letter-spacing: -1.2ex;
        right: 1.0ex">&ndash;</span></i>\end{rawhtml}}

%% same as above, but upright (not italicized)
\def\ubarr#1{\begin{rawhtml}\end{rawhtml}#1\begin
{rawhtml}<span style="position: relative;
        bottom: 1.0ex;
        letter-spacing: -0.9ex;
        right: 0.7ex">&ndash;</span>\end{rawhtml}}

\def\uBarr#1{\begin{rawhtml}\end{rawhtml}#1\begin
{rawhtml}<span style="position: relative;
        bottom: 1.2ex;
        letter-spacing: -0.9ex;
        right: 1.3ex">&minus;</span>\end{rawhtml}}

\def\xBarr#1{\begin{rawhtml}\end{rawhtml}#1\begin
{rawhtml}<span style="position: relative;
        bottom: 1.3ex;
        letter-spacing: -0.9ex;
        right: 0.7ex">&ndash;</span>\end{rawhtml}}

\def\twiddle#1{\begin{rawhtml}<i>\end{rawhtml}#1\begin
{rawhtml}<span style="position: relative;
        bottom: 1.0ex;
        letter-spacing: -1.2ex;
        right: 1.4ex">~</span></i>\end{rawhtml}}

\def\Twiddle#1{\begin{rawhtml}<i>\end{rawhtml}#1\begin
{rawhtml}<span style="position: relative;
        bottom: 1.3ex;
        letter-spacing: -1.2ex;
        right: 1.2ex">~</span></i>\end{rawhtml}}

\def\vect#1{\begin{rawhtml}<i>\end{rawhtml}#1\begin
{rawhtml}<span style="position: relative;
        bottom: 1.0ex;
        letter-spacing: -1.2ex;
        right: 1.2ex">&rarr;</span></i>\end{rawhtml}}

\def\Vect#1{\begin{rawhtml}<i>\end{rawhtml}#1\begin
{rawhtml}<span style="position: relative;
        bottom: 1.3ex;
        letter-spacing: -1.2ex;
        right: 1.2ex">&rarr;</span></i>\end{rawhtml}}

\def\dott#1{\begin{rawhtml}<i>\end{rawhtml}#1\begin
{rawhtml}<span style="position: relative;
        bottom: 0.8ex;
        letter-spacing: -0.7ex;
        right: -0.1ex">&zwnj;&middot;</span></i>\end{rawhtml}}

\def\Dott#1{\begin{rawhtml}<i>\end{rawhtml}#1\begin
{rawhtml}<span style="position: relative;
        bottom: 1.15ex;
        letter-spacing: -0.7ex;
        right: 0.1ex">&zwnj;&middot;</span></i>\end{rawhtml}}

\def\ddott#1{\begin{rawhtml}<i>\end{rawhtml}#1\begin
{rawhtml}<span style="position: relative;
        bottom: 0.8ex;
        letter-spacing: -0.2ex;
        right: 0.6ex">&zwnj;&middot;&middot;</span></i>\end{rawhtml}}

\def\Ddott#1{\begin{rawhtml}<i>\end{rawhtml}#1\begin
{rawhtml}<span style="position: relative;
        bottom: 1.15ex;
        letter-spacing: -0.2ex;
        right: 0.6ex">&zwnj;&middot;&middot;</span></i>\end{rawhtml}}

%% html combining circumflex accent:
\def\oldhatt#1{#1\begin{rawhtml}&#x302;\end{rawhtml}}

\def\hatt#1{\begin{rawhtml}<i>\end{rawhtml}#1\begin
{rawhtml}<span style="position: relative;
        bottom: 0.4ex;
        letter-spacing: -1.2ex;
        right: 1.2ex">^</span></i>\end{rawhtml}}

\def\Hatt#1{\begin{rawhtml}<i>\end{rawhtml}#1\begin
{rawhtml}<span style="position: relative;
        bottom: 0.6ex;
        letter-spacing: -1.2ex;
        right: 1.2ex">^</span></i>\end{rawhtml}}


}

\justpdf{
\def\barr#1{{\bar{#1}}}
\def\hatt#1{{\hat{#1}}}
}

decorations.tex     (DL)

5  References

1.
Elizabeth J. Pyatt “Glyph du Jour: Thermodynamic Q-dot” (2008)
http://www.personal.psu.edu/ejp10/blogs/gotunicode/2008/11/glyph-du-jour-thermodynamic-q-.html
[Contents]
Copyright © 2012 jsd