arinoth's memo

arinothのメモ

置換リストとCSSについて

Electron製Markdownツールを実案件で使い始めつつブラッシュアップを図っているのですが、 置換リストやCSSの書き方にそれなりに工夫が必要なことがわかってきました。

f:id:arinoth:20160515085214p:plain

置換リスト(_postReplaceList.json)は、Markdownにはできない範囲指定——つまりレイアウト指定を行うために、 原稿に入れた特定の文字をHTMLタグに置き換える仕組みです。

たとえば、次のようにMarkdown原稿を書いて、

┏セクションヘッダー━━━━━━━━━━━━━━━━━━━━━━━━━━┓
## インラインとグリッドを理解する
本文や画像のパーツをバラバラのフレームにしていると、
後からの修正対応が大変になります。

┗━━━━━━━━━━━━━━━━━━━━━━━━━━セクションヘッダー┛

置換リストを次のように書くと、

    {
        "f": "┏セクションヘッダー━━━━━━━━━━━━━━━━━━━━━━━━━━┓",
        "r": "<div class=\"secheader\">"
    },
    {
        "f": "┗━━━━━━━━━━━━━━━━━━━━━━━━━━セクションヘッダー┛",
        "r": "<\/div>"
    },

こういうHTMLになります。

<div class="secheader">
<h2 id="-">インラインとグリッドを理解する</h2>
<p>本文や画像のパーツをバラバラのフレームにしていると、
後からの修正対応が大変になります。</p>
</div>

置換リストについて

目立たせたい記号と書きやすい記号を使い分ける

セクション頭のブロックや、コラムのような部分には目立つレイアウト指定を入れるようにすると、 生のMarkdown原稿も読みやすくなる……と思っています。

サンプルとして用意した原稿ファイルでは、 セクションヘッダーやコラムなどの指定には罫線記号を使い、それ以外は【】と【/】を使うようにしてみました。

┌コラム─────────────────────────────────────┐
#### コラム:グリッドフォーマットを適用せずにペースト
【段組み】

フレームグリッドを使う時に困るのは、ペースト時にグリッドフォーマットが適用されるため、
コピー&ペーストするだけでスタイルがオーバライドされてしまう点です。

【/段組み】
【図】
![](img/s4-fig6.png)
【キャプ】半角スペースでコメントの//が揃えばOK【/キャプ】
【/図】
└─────────────────────────────────────コラム┘

置換リストは_postReplaceList.jsonの内容次第なので、自分で書きやすいものに変更してOKです。

改行に要注意

Markdownでは通常のテキストはHTMLのp要素になるので、

【図】

<p>【図】</p>

のように変換されます。

なので、単純に【図】を<div class="figure">に変換する置換リストを書くと、

<p><div class="figure"></p>

となってしまいます。div要素の開始タグをp要素のタグで囲んでいるという、HTMLとして不適切な状態になります。

もう1つ注意が必要なのは、アキ行を入れたときと入れないときで、p要素のタグの入り方が変わってくるという点です。

以下の書き方だと全体が1つのp要素になりますが、

【図】
![](img/s4-fig6.png)
【キャプ】半角スペースでコメントの//が揃えばOK【/キャプ】
【/図】

以下のように空けて書くと、各行が独立したp要素になります。

【図】

![](img/s4-fig6.png)

【キャプ】半角スペースでコメントの//が揃えばOK【/キャプ】

【/図】

改行の入れ方が細かすぎると原稿に集中できないので、あまりスマートな解決方法ではないのですが、 置換リストの最後のほうに余計なp要素のタグを取り除く置換指定を加えることにしました。

    {
        "f": "<p>(<div class=\"[^\"]+\">)</p>",
        "r": "$1"
    },
    {
        "f": "<p><\/div><\/p>",
        "r": "<\/div>"
    },

この置換指定の副作用として、div以外の要素が使いにくくなります。 例えば図はfigureで囲むことにすると、figureに対してもp要素のタグを取り除く指定が必要になります。

絶対にp要素にしたいところは前後に改行を入れる

改行周りでは色々と困った面があって、 次のようにまったく空けずに書いた場合、

【段組み】
フレームグリッドを使う時に困るのは、ペースト時にグリッドフォーマットが適用されるため、
コピー&ペーストするだけでスタイルがオーバライドされてしまう点です。
【/段組み】

Markdownが変換された結果はこうなります。

<p>【段組み】
フレームグリッドを使う時に困るのは、ペースト時にグリッドフォーマットが適用されるため、
コピー&ペーストするだけでスタイルがオーバライドされてしまう点です。
【/段組み】</p>

【段組み】を<div class="column">に置換し、先ほど説明した方法で余計なp要素を取り除いた場合、p要素のタグがまったくなくなってしまいます。

<div class="column">
フレームグリッドを使う時に困るのは、ペースト時にグリッドフォーマットが適用されるため、
コピー&ペーストするだけでスタイルがオーバライドされてしまう点です。
</div>

上もしくは下だけ空けた場合、さらに困ったことに<p></p>の一方だけが残ってしまう場合もあります。

とりあえずの解決方法として、通常段落とレイアウト指定の記号が続くときは、空けて書くように注意するしかありません。

【段組み】

フレームグリッドを使う時に困るのは、ペースト時にグリッドフォーマットが適用されるため、
コピー&ペーストするだけでスタイルがオーバライドされてしまう点です。

【/段組み】

いずれはDOMを見て自動的に直すようにしたいところではありますが……。

CSSについて

CSSを書く際に注意が必要なのは、Markdownで標準で変換されるh1~h6やp要素などにはクラス指定とかができないという点です。 置換リストによって加えたdiv要素などにクラスを付けておき、子孫セレクタを使って間接的に指定することになります。

セレクタの優先順位などを考えると、要素セレクタCSSファイルの前のほうに書いて、子孫セレクタは後のほうに書く決まりにしておくとわかりやすいかもしれません。

floatレイアウトが崩れやすい?

現状のVivliostyleだと、floatプロパティを使ってパーツを横並びにするようなレイアウトが崩れやすいような気がします。 Flexboxを使ったほうが確実な印象です。

/*図版横並び*/
.figure-h{
  display: flex;
  flex-direction: row;     /*横並びにする*/
  align-items: flex-start; /*縦に伸ばさない*/
  margin-bottom: 5mm;  
}