Vivliostyle CLI v9.3+（Vivliostyle.js v2.33+）では、marginなどを拡張する*-inside/*-outsideプロパティとfloatやtext-alignなどに対するinside/outsideキーワードが追加されました。これらはPrinceに先行実装され¹、いくつかのドラフトで言及されている²³案であり、ノド側・小口側の配置を指定するものです。

この記事では、私が理解した有用そうな例をいくつか挙げます。完全なデモはこちらを参照してください。

> cmd /c ver
Microsoft Windows [Version 10.0.26100.4349]

> vivliostyle --version       
cli: 9.3.0
core: 2.33.0

左右対称なページレイアウトを作成する

日本語文書の本文レイアウトでは、ノドおよび小口のアキは綴じ目に対して対称であることが一般的です。Vivliostyleでこの指定を実現するために、これまでは@page :left/:rightに対してmargin-left/rightを入れ替えた指定を使用してきました。

従来の指定

---
lang: ja
---

<style>
@page {
  size: A5;
}

@page :left {
  margin-left: 10mm;
  margin-right: 20mm;
}

@page :right {
  margin-left: 20mm;
  margin-right: 10mm;
}

body {
  background-color: aqua;
}
</style>

<div style="break-after: page"></div>

# 左ページ

<div style="break-after: page"></div>

# 右ページ

margin-inside/outsideを使用することで、以下のように1つの@pageルールで左右対称のページレイアウトを指定できるようになります。

---
lang: ja
---

<style>
@page {
  size: A5;
  margin-outside: 10mm;
  margin-inside: 20mm;
}

body {
  background-color: aqua;
}
</style>

<div style="break-after: page"></div>

# 左ページ

<div style="break-after: page"></div>

# 右ページ

小口からある幅だけ離して配置する

「左右どちらのページに配置される場合でも、小口からある幅だけ離して配置したい」という要求があるものとします。例えば引用（blockquote要素）で有用かもしれません。従来はどちらのページに配置されたかプレビューで確認し、手動でクラスを設定することで実現してきました。Markdownでblockquote要素にクラスを設定するためには、blockquote自体をHTMLで記述するか、blockquoteはMarkdownで記述してdiv要素などでラップする必要が生じます。

従来の指定

---
lang: ja
---

<style>
@page {
  size: A5;
}

blockquote {
  background-color: aqua;
}

.quote-on-left {
  padding-left: 10mm;
}

.quote-on-right {
  padding-right: 10mm;
}
</style>

<div style="break-after: page"></div>
<blockquote class="quote-on-left">日本国民は、正当に選挙された国会における代表者を通じて行動し、われらとわれらの子孫のために、……</blockquote>
<div style="break-after: page"></div>
<blockquote class="quote-on-right">日本国民は、恒久の平和を念願し、人間相互の関係を支配する崇高な理想を深く自覚するのであつて、……</blockquote>

新たな方式では、以下のように小口からの距離をかんたんに表現できます。クラスを使用する必要がなくなったので、シンプルなMarkdownを取り戻すこともできました。

---
lang: ja
---

<style>
@page {
  size: A5;
}

blockquote {
  background-color: aqua;
  padding-outside: 10mm;
}
</style>

<div style="break-after: page"></div>

> 日本国民は、正当に選挙された国会における代表者を通じて行動し、われらとわれらの子孫のために、……

<div style="break-after: page"></div>

> 日本国民は、恒久の平和を念願し、人間相互の関係を支配する崇高な理想を深く自覚するのであつて、……

図版をノドに寄せる

図版についても同様です。これまでfloatで右に寄せる・左に寄せる指定を手動で出し分けていました。

従来の指定

---
lang: ja
---

<style>
@page {
  size: A5;
}

img {
  width: 120px;
  height: 120px;
  margin: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Crect x='0.5' y='0.5' width='119' height='119' fill='none' stroke='%23000' stroke-width='1'/%3E%3Cline x1='0' y1='120' x2='120' y2='0' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E");
}

.img-on-left {
  float: right;
}

.img-on-right {
  float: left;
}
</style>

<div style="break-after: page"></div>
<img class="img-on-left">

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div style="break-after: page"></div>
<img class="img-on-right">

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

今後は、「ノドに寄せる」「小口に寄せる」といった指定が可能になります。

---
lang: ja
---

<style>
@page {
  size: A5;
}

img {
  width: 120px;
  height: 120px;
  margin: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Crect x='0.5' y='0.5' width='119' height='119' fill='none' stroke='%23000' stroke-width='1'/%3E%3Cline x1='0' y1='120' x2='120' y2='0' stroke='%23000' stroke-width='1'/%3E%3C/svg%3E");

  float: inside;
}
</style>

<div style="break-after: page"></div>
<img>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<div style="break-after: page"></div>
<img>

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.