かなり疲れてるときの散歩

個人的にはHTML+CSS組版と呼んであげたいような気もする。3年生になったので実験レポートがパソコンで書けるようになったが、いずれにせよめんどくさかったというメモ。TeXは一年ほど前に先輩に手伝ってもらいながら入れたが記法が面倒だったのですぐ使わなくなった。

現状のやり方としてはStylusをParcelで変換・プレビューを見ながら普通のWebページとしてのスタイルを調整して、ある程度まとまったら書類としてのスタイルをVivliostyle Viewerを使って調整する。viola-savepdfはうまく動作しなかったのでViewerから直接印刷した。数式処理にはMathJaxを使っている。記事下部にスタイルは載せている。

参考にしたサイト

以下のような実際の書籍・論文のソースコードを見るのが手っ取り早い。

その他記事など。

ハマった点

Viewer上で数式が整形されない

MathJaxの数式はParcelでプレビューしたときには数式が表示されていたがViewer上ではそのままプレーンテキストとして表示されてしまう。

これは上述の宇宙論入門リポで述べられている問題で、\\\((.*?)\\\)<span data-type="tex" data-math-typeset="true">\($1\)</span> というような置換を噛ませば対処できる。

表がいい感じにならない


こういうの。MathJaxの出力の.mjx-blockあたりが邪魔してそう。数時間格闘した結果として、

  • td, thにwidthプロパティを指定すればなんとかなるかも
  • テーブルのwidthが足りていないと<caption>がそれに引っ張られてインライン数式が強制改行されてるかも
    • MathJaxが悪さしてそうだなーと思い込んでいたらそうじゃなかったパターン。単純に<table>width: 100%とかつけるとそれはそれでいろいろ狂うので<caption>にのみ広げることで回避した。

という推測。Webって難しいね。

グラフを入れたい

gnuplotで描画してからSVG出力(EPSはよくわからない)してrsvg-convertで変換(superuserの回答)。convertでは解像度(-densityなど)の指定がよくわからなかった。

$ gnuplot hoge.plt # graph.svgを出力  
$ rsvg-convert -f pdf -o graph.pdf graph.svg  

SVG画像が表示されない

SVG画像を<object>を用いて挿入するとVivliostyle上では表示されなかった。PNGに変換して<img>で無理やり埋め込んだ。印刷するのであればレスポンシブなどを考えなくて良いのが幸い。

draw.ioで描いたSVGを変換するとこうなってしまう。スクリーンショット(flameshot)を撮ったりして回避。

拡張のアイデア

  • 正規表現か何か使った独自記法。単位が特に面倒で、3[V]が \(3 \, \mathrm{[V]}\)というように膨れ上がってしまうので簡潔に書けるようにしたい。
  • テンプレートエンジンの導入。生のHTMLはいろいろキツいことがわかった。Slimがいいかなあ(StylusとSlim, 趣味がよくわかる…)。
  • AsciiMathの導入。下手にアルファベットで表記しようとしないことで簡潔になっている。
  • css-polyfills.jsを使えばVivliostyleを使わずにできるかもしれない(ページ処理とtarget-counterにしか使っていないので)。PostCSScssnextを組み合わせてBabelのように使っている記事は見つけた。
  • MathJaxのjsをロードするのではなく事前にコンパイルさせてしまいたい。おそらくブラウザ依存なところ(MathMLなど)があってあえてそうしているのだろうが、なんだか数式だけレンダリング時に処理するのも気持ちがわるい(?)のでPostHTMLあたりでできないだろうか。独自記法こそこれでできそう。
  • 表やグラフの相互参照はtarget-counterで行っているが、これは要素のidでしか参照できない。W3Cの仕様書にはこう書かれている。

    These functions only take a fragment URL which points to a location in the current document. If there’s no fragment, if the ID referenced isn’t there, or if the URL points to an outside document, the user agent must treat that as an error.

    「次の表にある通り」→「表4にあるとおり」というような相対的な位置指定ができたらいいなとか。

  • Parcelが思った以上に便利だった。いままでStylusの変換にはgulpを使っていたが、もっと活用したい。

  • Re:VIEW(大文字小文字これで合ってるかな?)も使ってみたい。

PDFが出力できてから学校の演習室に印刷しに行ったらプリンタの紙がなかった。適当に自前の古いコピー用紙を入れると、溜まっていたジョブが実行されて同級生のレポートが出てきた。しかもその後に印刷された自分のレポートに限って表が見切れていたのでコンビニに行くはめになった。

最後にスタイルを貼っておく。余分なプロパティが残っているかもしれない。Stylusはいいぞ。

@page  
  size A4  
  margin 3rem  
  counter-increment page  

  @bottom-center  
    margin -30px  
    height -30px  
    content counter(page)  

body  
  counter-reset section subsection page tbl  
  font-family 'Noto Serif CJK JP'  
  font-size 16px  

section  
  h1  
    counter-increment section   
    counter-reset subsection  
    font-size 1.5rem  
    break-after avoid-page  

    &::before  
      content counter(section) ". "  

  h2  
    counter-increment subsection  
    font-size 1.3rem  
    break-after avoid-page  

    &::before  
      content counter(section) "." counter(subsection) ". "  

table  
  border-collapse collapse  
  margin 2rem auto  
  break-inside avoid-page  
  counter-increment tbl  

  caption  
    width 30rem  
    margin 0 auto  

    *, .mjx-block  
      display inline !important  

    &::before  
      content "表" counter(tbl) " "  

  td  
    border solid 1px black  
    padding 3px  

    &.number  
      text-align right  
      width 10rem  

  th  
    height 1rem  
    width 10rem  

  &.aligncenter td  
    text-align center  

  &.numbers  

    td  
      text-align right  

.noindent  
  padding-left 1.2em  

ul, ol  
  margin 10px 0  

[data-cref^="#"]::after  
  content "表" target-counter(attr(data-cref url), tbl)  

// report-specific properties  
// graphs must be created by hand so we have to specify the numbers explicitly...  
[data-cref=fig-rrrr]::after  
  content "図1"  

[data-cref=fig-cccc]::after  
  content "図2"  

[data-cref=fig-dddd]::after  
  content "図3"  

[data-cref=fig-aaaa]::after  
  content "図4"                                                                        

2019/05/27 追記: 「グラフを入れたい」「SVG画像が表示されない」

この記事へのコメント

まだコメントはありません