☰

pandoc を使用して HTML/PDF/docx のマークダウンで PNG 画像のサイズを正しく設定する

tag-icon • tag-icon pdf html png markdown pandoc
pandoc を使用して HTML/PDF/docx のマークダウンで PNG 画像のサイズを正しく設定する

私は、Pandoc で Markdown を使用して、1 つのドキュメントを HTML、PDF、および docx に変換しようとしています。これは、数式を含まないテキストといくつかの画像のみを含む非常にシンプルなドキュメントです。画像は PNG 形式です。これを使用して、Markdown ソースに画像を含めます。

<div style="float:center" markdown="1">

![my caption](./figures/myimage.png)

</div>

次のようにコンパイルします。

# html
pandoc myarticle.md -c mystyle.css -o myarticle.html
# pdf
pandoc myarticle.md -V geometry:margin=1in -o myarticle.pdf
# docx
pandoc myarticle.md -o myarticle.docx

PNG画像の中には、同じ寸法HTML 形式と PDF 形式ではサイズが異なります。低解像度 (72 px/インチ) で 250x256 ピクセルの PNG は、PDF ではページ上でほぼ正しいサイズで表示され、HTML でも適切なサイズで表示されますが、同じ寸法 (250x256 ピクセル) で高解像度 (300 px/インチ) の PNG は、PDF 出力のページ上で小さくなるようにサイズが変更されます。指定したサイズの PNG 画像のセットを保持し、HTML/PDF/DOCX 形式の両方でそのサイズで表示したいと考えています。

私は PDF/HTML を使用するためだけに、自動 docx サポートを放棄する（または後で多くの手動書式設定を処理する）つもりです。

PDF または画像の PNG のサイズを変更せず、正しい画像で表示されるように Pandoc に指示するにはどうすればよいですか? よろしくお願いします。

答え1

寸法は、HTML のような形式で出力するためにピクセルに変換されます。--dpiオプションを使用して、1 インチあたりのピクセル数を指定します。デフォルトは 96dpi です。

写真の中で最も一般的な要素を見つけて、それを使用します。例外のみを変更します。

例: dpi、幅、高さ。

dpi 情報を指定する場合:

デフォルトを上書きするには、記載されているように --dpi オプションを追加します。

ほとんどの写真の高さや幅が共通している場合は、簡単に修正できるはずです。

たとえば、次の行を次のように変更します。

![my caption](./figures/myimage.png){ width=250px }

または

![my caption](./figures/myimage.png){ height=256px }

または、HTML マークアップで次のように実行します。

<img src="./figures/myimage.png" alt="my caption" style="width: 250px;"/>

または

<img src="./figures/myimage.png" alt="my caption" style="height: 256px;"/>

比率は正しくなります。

参照：パンドック リードミー

HTML および EPUB の場合、幅と高さを除くすべての属性 (ただし、srcset とサイズは含む) がそのまま渡されます。他のライターでは、出力形式でサポートされていない属性は無視されます。

画像の幅と高さの属性は特別に扱われます。単位なしで使用する場合、単位はピクセルであると見なされます。ただし、px、cm、mm、in、inch、% のいずれかの単位識別子を使用できます。数字と単位の間にスペースを入れないでください。

LaTeX のようなページベースの形式での出力では、寸法はインチに変換されます。HTML のような形式での出力では、寸法はピクセルに変換されます。--dpiオプションを使用して、インチあたりのピクセル数を指定します。デフォルトは 96dpi です。

% 単位は通常、利用可能なスペースを基準とします。たとえば、上記の例は次のようにレンダリングされます。

  1. <img href="file.jpg" style="width: 50%;" />(HTML)、
  2. \includegraphics[width=0.5\textwidth]{file.jpg}(LaTeX)、または
  3. \externalfigure[file.jpg][width=0.5\textwidth]（コンテクスト）。

\caption一部の出力形式には、クラス (ConTeXt) または一意の識別子 (LaTeX )、あるいはその両方 (HTML)の概念があります。

幅または高さの属性が指定されていない場合は、フォールバックとして、画像解像度と画像ファイルに埋め込まれた dpi メタデータを確認します。

数値と単位の間、およびフィールドとそのプロパティの間にスペースを入れてはいけないことに注意してください。つまり、これらは両方とも機能しません。

![image](/path/to/image){ width = 100% }
![image](/path/to/image){ width=100 px }

スペースがある場合、タグは無視され、ドキュメント内の通常のテキストとして公開されます。

答え2

画像にスタイルを適用するには、この
CSS スタイルを試してみてください

img[src*="#thumbnail"] {
   width:150px;
   height:100px;
}
img[title="thumbnail"] {
   width:200px;
}
img[alt$="-thumbnail"]{
    width:300px;
}

MDコーディングスタイル

![img](link#thumbnail) <!-- src = link#thumbnail -->
![img](link "thumbnail") <!-- title = thumbnail -->
![img -thumbnail](link) <!-- alt = img -thumbnail -->

答え3

マークダウン ファイルを使用すると、以下のように画像の幅と高さを設定できます。これにより、画像ごとに異なる寸法を設定できます。

![Title](YOUR_IMAGE_PATH){width=150px height=100px}

関連情報