CSS組版の面白さは、本来別の用途で作られたCSSのプロパティが、本の組版にピタッとはまる瞬間にあると思います。
ただし、はまらないものもあり、その1つが画像サイズの指定です。一般的にDTPソフトでは、画像のプリントサイズ(画素数×dpiで求められる物理寸法)を100%として、パーセンテージで指定します。
それに対してCSSで%指定といえば、親要素を100%とした指定です。もしくは物理寸法のミリやインチなどの指定になります。
これがどう問題になるかというと、CSSで50%と指定した場合、次のようになります。元の画像サイズと関係なく、同じ大きさになってしまいます。
DTP的(というかIT書的?)には、本来の画像サイズを保って次のように貼りたいのです。
HTML側のwidth属性で調整すれば近いことはできるのですが、画像ごとに計算が必要になってしまいます。
<img src="c1.png" width=400>
![](c1.png){width=400}
うちのようにIT書ばかり作っている環境では作業効率を大きく左右するので、Vivliostyle利用ツール(MDBP)に機能を加えて、画像を加工する機能を持たせています。
https://github.com/libroworks/mdbp-vscode
Markdown記法を使って次のように書くと、
![](img0/c1.png?svgimg=35,118,60)
通常ならこういうHTMLになりますが
<img src="img0/c2.png?svgimg=35,118,60">
JavaScriptで変換して、次の形に変換します。
<svg width="118mm" height="60mm" viewBox="0 0 118 60">
<image width="451.203" height="239.889" xlink:href="img0/c1.png" transform="translate(0,0) scale(0.35)"></image>
</svg>
インラインSVGを利用しているので、svgimgと呼んでいます。
URLのパラメータ記法(GETメソッドでフォーム送信したときに使われる「?キー=値」の形式)を使って、他のMarkdown、HTML記法に影響が出ないようにし、
?svgimg=倍率,幅,高さ,xシフト量,yシフト量
の形式で指定します。倍率以外の単位はミリです。
第2パラメータ以降は省略できるので、状況に応じて使い分けると理解しやすいです。
サイズ指定のみ 35%
![](img0/c2.png?svgimg=35)
幅も指定 35%で幅118ミリ
![](img0/c2.png?svgimg=35,118)
高さも指定 35%で幅118ミリ、高さ70ミリ
![](img0/c2.png?svgimg=35,118,70)
Yシフト量も指定 35%で幅118ミリ、高さ53ミリ、Y方向に-28ミリ
![](img0/c2.png?svgimg= 35,118,53,,-28)
何年も前に書いたものなので、実装はよく覚えていないのですが、画像解像度を72dpiとみなして(Adobe製品の標準dpi)加工しています。
下記コードの230行目あたり
https://github.com/libroworks/mdbp-vscode/blob/main/lib/markdown-book-preview-convert.js
うちではCSS組版を使って原稿整理していても、最終的にInDesignで組むことが多いので、svgimgで指定した内容はXMLを介してInDesignに取り込み、スクリプトで自動的にサイズ指定が反映されるようにしました。