« HTML + CSS で数式組版 (その9) | トップページ | HTML + CSS で数式組版 (その11) »

2009年3月22日 (日)

HTML + CSS で数式組版 (その10)

再度 HTML 出力に戻ります。 CSS に手を付けて気付きましたが、 span 要素が div 要素に入っていないのはまずい。位置指定ができなくなってしまいます。

(defun gen-html-elem1 (ast rest?)
  (cond ((atom ast) nil)
        ((and (atom (car ast)) (listp (caddr ast)))
         (list 'div
               (list 'class
                     (format nil "~A~A" (car ast) (cadr ast)))
               (gen-html-elem1 (caddr ast) nil)))
        ((and (atom (caar ast)) (eq (caar ast) 'argend))
         (gen-html-elem1 (cdr ast) nil))
        ((and (atom (caar ast)) (eq (caar ast) 'text))
         (if rest?
             (gen-html-elem1 (cdr ast) rest?)
           (cons
            (list 'div
                  (list 'class
                        (format nil "b~A" (cadar ast)))
                  (gen-html-elem2 ast))
            (gen-html-elem1 (cdr ast) t))))
        (t
         (cons (gen-html-elem1 (car ast) nil)
               (gen-html-elem1 (cdr ast) nil)))))

(defun gen-html-elem2 (ast)
  (cond ((atom ast) nil)
        ((atom (car ast))
         (cond ((eq (car ast) 'text)
                (list 'span
                      (list 'class
                            (format nil "~A~A" (car ast) (cadr ast)))
                      (list 'text (caddr ast))))
               (t nil)))
        ((and (atom (caar ast)) (eq (caar ast) 'text))
         (cons (gen-html-elem2 (car ast))
               (gen-html-elem2 (cdr ast))))
        (t nil)))

(defun gen-html-elem (ast)
  (gen-html-elem1 ast nil))

ということで、 span 要素は全部 div のなかに入れました。

(gen-html-elem (parse-string "x = \\frac{a}{b} + c" 0))
=>
((div (class "b1") ((span (class "text1") (text "x")) (span (class "text3") (text "="))))
 (div (class "frac9")
      ((div (class "argbegin10")
            ((div (class "b11") ((span (class "text11") (text "a"))))))
       (div (class "argbegin13")
            ((div (class "b14") ((span (class "text14") (text "b"))))))))
 (div (class "b17") ((span (class "text17") (text "+")) (span (class "text19") (text "c")))))

math2html を実行しますと:

(math2html "x = \\frac{a}{b} + c")
=>#<buffer: *math2html*>

このように:

<html>
<body>
<div class="math">
<div class="b1">
<span class="text1">x</span>
<span class="text3">=</span>
</div>
<div class="frac9">
<div class="argbegin10">
<div class="b11">
<span class="text11">a</span>
</div>
</div>
<div class="argbegin13">
<div class="b14">
<span class="text14">b</span>
</div>
</div>
</div>
<div class="b17">
<span class="text17">+</span>
<span class="text19">c</span>
</div>
</div>
</body>
</html>

|

« HTML + CSS で数式組版 (その9) | トップページ | HTML + CSS で数式組版 (その11) »

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/80472/28753188

この記事へのトラックバック一覧です: HTML + CSS で数式組版 (その10):

« HTML + CSS で数式組版 (その9) | トップページ | HTML + CSS で数式組版 (その11) »