■　a の上に b を書くには (原理の解説)

◇はじめに◇
　HTML文書では通常，文字は左から右へ順に表示され，改行されれば下の行に移り，左端から再び右へ進みます．
　したがって，右図上のように 123a と書いてから上に b と書くためには，通常の流れを外れなければなりません．
　数学や物理で用いられる数式をＷｅｂ上で表現するためには，このように自然な流れを逸脱して，上や左に戻ることが重要です．
　右図左は元素周期表から希土類元素(ランタノイド)が吹き出しているイメージを表わしています。また，右図右は，掲示板の本文の１箇所に画鋲でとめて張り紙がしてあるイメージを表わしたものです．このようなイメージで，通常文書の途中に別の文書を貼り付けると，上で述べた目的を実現することができます。
123
◇考え方の基本◇ 
　position:absolute; で書けば，書かれた順序によらず left:99px; top:99px;(99は数字の入る場所)で座標を指定して文字を書くことができますが，position:absolute; を単純に用いると，画面の左上を原点とする座標となります．このため，文章の途中で上下左右に移動したいとき，それまでに書き込まれた文字数・文字サイズがあらかじめ定まっている場合を除き「どの場所から」書き始めるのかを求めることができません．特に，ブラウザではユーザが文字サイズを変更できるのが通常であるため，何文字か記入したときに画面上のどの位置にあるか特定できません．
position:relative; で書けば，上図の赤で示した位置がleft:0px; top:0px; となります．そこで，position:relative; の親シートの中で position:absolute; で動くことを考えます．top (y座標の指定)で文字位置の上下を調整し，プラスで下に，マイナスで上に動きます．

例１･･＜関数定義側＞
function frac1(ue, shita) //引数の意味：ue = 上に書く文字列，shita = 下に書く文字列
{
 document.write('<span style="position:relative;">'); //current positionの取得
     document.write('<span style="position:absolute; top:-16px; font-size:16px;">'+ue+'</span>'); //1文字分上に書く
     document.write('<span style="position:absolute; top:0px; font-size:16px;">'+shita+'</span>'); //通常位置に書く
 document.write('</span>');                               // current position への復帰
}

※　なぜ，<div> <p> でなく <span> を使うのか? 改行されると文中に収まらないからです．
◇安心するのはまだ早い-No.1-◇
右の例は，例１で作成した関数を用いて，･･＜関数呼び出し側＞
123<Script Language="JavaScript">frac1('b','a');</Script>456
と記入したときの見え方を示したものです．数字の4が重なってしまっているのが分かります．
position:absolute; で記入している間は，何文字書き込まれても current position が進んでいませんので，通常文書に復帰したとき，直前の position:relative; からスタートします．その結果，a と 4が重なります．
　そこで，引き続く文字への文字送り量を調整するために，
position;relative; に復帰後，hidden 属性でもう一度必要文字数書き込ば文字送りの問題は解決します．次の例２は，上に書く文字列と下に書く文字列の長い方の分だけ文字を送る方法です．
123456
例２･･＜関数定義側＞
function frac2(ue, shita)
{document.write('<span style="position:relative;">');
document.write('<span style="position:absolute; top:-16px; font-size:16px;">'+ue+'</span>');
document.write('<span style="position:absolute; top:0px; font-size:16px;">'+shita+'</span>');
document.write('</span>');

haba = Math.max(ue.length, shita.length);  //上と下の文字数の大きい方を haba とする
for(kk = 0; kk < haba; kk++)
         document.write('<span style="position:relative; visibility:hidden;">'+'n'+'</span>'); //標準的な文字幅のnを文字数だけ印字する
}
◇安心するのはまだ早い-No.2-◇
　上下に書くことは自然に「分数」を意識することとなり，分数として使えることを期待するのが自然の流れです．右の例を見ると，通常の分数よりは上にずれていることが分かります．そこで，センターラインを引くことは後回しにして，「センターラインの位置を通常文字の中央に持ってくること」が次の課題となります．文字サイズを16pxにするときは，中央位置は8pxです．
　各文字の位置を下に 8px だけ移動するには，(ア) absolute の top に8 ずつ加える方法 (イ) 初めの relative で top を8pxにする方法の２つが考えられます．今の例では，結果は同じになりますが，後に分数を合成するようになると，この判断は大きな分かれ目となります．(楽しみを残して，ここでは(ア)(イ)２つの例を示してみます．)
123456
例３･･＜関数定義側＞
function frac3(ue, shita)
{
 document.write('<span style="position:relative; top:8px;">');
      document.write('<span style="position:absolute; top:-16px; font-size:16px;">'+ue+'</span>');
      document.write('<span style="position:absolute; top:0px; font-size:16px;">'+shita+'</span>');
 document.write('</span>');

 haba = Math.max(ue.length, shita.length);
 for(kk = 0; kk < haba; kk++)
      document.write('<span style="position:relative; visibility:hidden;">'+'n'+'</span>');
}
------------------------
function frac4(ue, shita)
{
 document.write('<span style="position:relative;">');
      document.write('<span style="position:absolute; top:-8px; font-size:16px;">'+ue+'</span>');
      document.write('<span style="position:absolute; top:8px; font-size:16px;">'+shita+'</span>');
 document.write('</span>');

 haba = Math.max(ue.length, shita.length);
 for(kk = 0; kk < haba; kk++)
      document.write('<span style="position:relative; visibility:hidden;">'+'n'+'</span>');
}
------------------------
･･＜関数呼び出し側＞
123<Script Language="JavaScript">frac3('d','dx');</Script>456
------------------------
123<Script Language="JavaScript">frac4('d','dx');</Script>456
frac3 見え方
123456
 frac4 見え方
123456
◇成果と課題◇
○　解決したこと
　　できなかったことができるようになったことは長足の進歩です．

○　解決していないこと
１　分数とするには，センターラインがまだ引けていません．上の例３の区切り線のように破線が見えるようでは困ります．
２　上の例で分かるように，文字数が少ない方の文字位置が通常の書き方と異なっています．
３　分子や分母に上付き文字，下付き文字などを書き込んだり，入力欄を作ると<sup><sub><input>などの制御用のタグが入りますが，上の方法ではこれらのタグの文字数も数えており，正常に表示されません．
４　分数の分母が分数の足し算になっているような場合，すなわち関数の合成の可能性については上の方法では解決策が見えていません．
５　font-size の変更の可能性には触れていません．
○メニューに戻る