Vivliostyleで制作を進めていると、かんたんなトリミングを行いたいことがしばしばあります。トリミング済みの画像を用意すればよいのですが、エディタから画像編集ソフトに切り替えて調整し直すのは集中力を削がれます。画像ごとGitで管理している場合は、ファイル数を増やしたり再調整をコミットするたびにリポジトリが肥大化します。さらにバージョン管理の観点では、ページに影響を及ぼす差分が原稿ではなく画像側に残るのもうまくありません。次のようにobject-view-boxを用いて、中間ファイルを作らずに原稿側でシュッと調整できます。こういった実験的な機能を活用できるのもCSS組版とりわけVivliostyleの利点です。

---
link:
  - rel: stylesheet
    href: data:text/css,@page%7Bsize:A5;%7D
---

CSSでは1in = 96pxと定義され、1in = 25.4mmなので、793pxは793 \* 25.4 / 96 = 209.81mm相当です。その40%は83.92mmとなり、紙面148mm×210mmの幅半分より少し大きい程度で掲載されます。

![object-view-boxのBaselineステータス表記](image.png){style="object-view-box: xywh(557px 434px 793px 304px); zoom: 40%"}

元画像

$ npx --yes @vivliostyle/cli@11.0.2 preview manuscript.md