■積分記号の作成
◇定積分の記号◇ 右の例1は積分記号の font-size を本文の文字の2倍にして,目分量で積分区間の下端,上端の位置を決めたものです. 積分記号については,ホームページ作成者の美的なこだわりがうかがえることが多く,長く傾斜しているのを好まれる方が多いようです.傾斜はfont-style:italic; で実現できます.よりスリムなfontを好まれる場合は,幾つか試してみることになりますが,その際 読者がそのfontを持っていなければ困りますので,第1希望,第2希望,・・・と妥協できる候補を並べるには font-family;○○, △△, □□; などとカンマで区切って並べることができます. |
例1 (中央位置) = f(x)dx = (中央位置) |
例1 function Int1(a_top, b_top) { document.write('<span class="mother1" style="position:relative;">'); document.write('<span class="child1" style="left:15px;top:-8px; font-size: 12px; font-weight:light;">'+ b_top + '</span>'); document.write('<span class="child1" style="position:absolute; left:-10px;top:-4px; font-size:32px; font-family:HG明朝E, MS 明朝,MS UI Gothic;font-weight:light;">∫</span>');// [?] document.write('<span class="child1" style="left:12px;top:18px; font-size: 12px; font-weight:light;">'+a_top +'</span>'); document.write('</span>'); document.write('<span class="mother1" style="position:relative; top:0px; left:0px; visibility:hidden;">'+'wn'+'</span>'); } |
|
◇文字送り量調整は本文と同じサイズの文字が無難◇ 積分記号のように font-size の大きな文字を使うときは,ダミーの hidden 属性の文字もその記号に用いたものと同じサイズの同じ文字を使う方が文字幅が一致してよいように思えますが,右の注1のように本文と全く異なるサイズの文字で文字送り調整を行うと,上下がずれます. 注1は, document.write('<span class="mother1" style="position:relative; font-size:32px; visibility:hidden;">∫</span>'); としたときの失敗例です. |
注1 (中央位置) = f(x)dx = (中央位置) |
◆所要時間15分程度の問題◆ 右の例2のように,引数なしにすれば,不定積分の記号にも使えるように変更してください. [ 答案例 ]
function Int2(a_top, b_top)
{ document.write('<span class="mother1" style="position:relative;">'); if(b_top == null || b_top == '') ; else document.write('<span class="child1" style="left:15px;top:-8px; font-size: 12px; font-weight:light;">'+ b_top + '</span>'); if(a_top == null || a_top == '') ; else document.write('<span class="child1" style="left:12px;top:18px; font-size: 12px; font-weight:light;">'+a_top +'</span>'); document.write('<span class="child1" style="position:absolute; left:-8px;top:-4px; font-size:32px; font-family:HG明朝E, MS 明朝,MS UI Gothic;font-weight:light;">∫</span>'); document.write('</span>'); document.write('<span class="mother1" style="position:relative; font-size:16px; visibility:hidden;">w</span>'); } →閉じる← |
関数呼び出し側 <Script Language="JavaScript">Int2();</Script>f(x)dx 例2 (中央位置) = f(x)dx = (中央位置) |
◆所要時間15分程度の問題◆ 右のような周回積分の記号をつくってください. [ 答案例 ] [ 教材例 ]
function Oint(a_top, b_top)
{document.write('<span class="mother1" style="position:relative;">'); if(b_top == null || b_top == '') ; else document.write('<span class="child1" style="left:15px;top:-8px; font-size: 12px; font-weight:light;">'+ b_top + '</span>'); if(a_top == null || a_top == '') ; else document.write('<span class="child1" style="left:12px;top:18px; font-size: 12px; font-weight:light;">'+a_top +'</span>'); document.write('<span class="child1" style="position:absolute; left:-8px;top:-4px; font-size:32px; font-family:HG明朝E, MS 明朝,MS UI Gothic;font-weight:light;">∫</span>'); document.write('<span style="position:absolute; left:2px;top:6px; font-size:10px; font-family:HG明朝E, MS 明朝,MS UI Gothic;font-weight:light;">○</span>'); document.write('</span>'); document.write('<span class="mother1" style="position:relative; font-size:16px; visibility:hidden;">xx</span>'); } →閉じる← |
例3 (中央位置) = f(x)dx = (中央位置) |