• ITに強い編集プロダクション・リブロワークスのWebサイト

    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に取り込み、スクリプトで自動的にサイズ指定が反映されるようにしました。