☰

Richtige Größenanpassung von PNG-Bildern in Markdown mit Pandoc für HTML/PDF/Docx

tag-icon • tag-icon pdf html png markdown pandoc
Richtige Größenanpassung von PNG-Bildern in Markdown mit Pandoc für HTML/PDF/Docx

Ich versuche, Markdown mit Pandoc zu verwenden, um ein einzelnes Dokument in HTML, PDF und Docx zu konvertieren. Es ist ein extrem einfaches Dokument, das nur mathematikfreien Text und ein paar Bilder enthält. Die Bilder sind im PNG-Format. Ich füge ein Bild mithilfe dieses in die Markdown-Quelle ein:

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

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

</div>

und kompilieren Sie es wie folgt:

# 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

Mir ist aufgefallen, dass einige PNG-Bilder, diedie gleichen Abmessungenwerden in HTML- und PDF-Formaten unterschiedlich dimensioniert. Ein PNG mit 250 x 256 Pixeln und niedriger Auflösung (72 Pixel/Zoll) wird in PDF ungefähr in der richtigen Größe auf der Seite angezeigt und in HTML in einer angemessenen Größe, aber ein PNG mit denselben Abmessungen (250 x 256 Pixeln), aber hoher Auflösung (300 Pixel/Zoll), wird in der PDF-Ausgabe so skaliert, dass es auf der Seite winzig aussieht. Ich möchte einen Satz PNG-Bilder in einer von mir angegebenen Größe behalten und sie in beiden Formaten HTML/PDF/DOCX in dieser Größe anzeigen lassen.

Ich bin bereit, auf die automatische Docx-Unterstützung zu verzichten (oder mich anschließend mit viel manueller Formatierung herumzuschlagen), nur um PDF/HTML zu haben.

Wie kann ich Pandoc anweisen, die Größe von PNGs für PDFs oder Bilder nicht zu ändern und sie in den richtigen Bildern anzuzeigen? Danke.

Antwort1

Für die Ausgabe in HTML-ähnlichen Formaten werden die Abmessungen in Pixel umgewandelt. Verwenden Sie die --dpiOption, um die Anzahl der Pixel pro Zoll anzugeben. Der Standardwert ist 96 dpi.

Suchen Sie das häufigste Element in Ihren Bildern und verwenden Sie dieses. Ändern Sie nur die Ausnahmen.

Beispiele: dpi, Breite, Höhe.

Wenn Sie die dpi-Informationen angeben:

Fügen Sie die Option --dpi wie angegeben hinzu, um die Standardeinstellung zu überschreiben.

Wenn die meisten Ihrer Bilder eine gemeinsame Höhe oder Breite haben, sollte dies leicht korrigiert werden können.

Sie haben beispielsweise die Zeile wie folgt geändert:

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

oder

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

Oder tun Sie dies in direktem HTML-Markup:

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

oder

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

und das Verhältnis wird richtig sein.

Referenz:Pandoc-Readme

Für HTML und EPUB werden alle Attribute außer Breite und Höhe (aber einschließlich srcset und Größen) unverändert weitergegeben. Die anderen Writer ignorieren Attribute, die von ihrem Ausgabeformat nicht unterstützt werden.

Die Breiten- und Höhenattribute von Bildern werden speziell behandelt. Bei Verwendung ohne Einheit wird davon ausgegangen, dass es sich um Pixel handelt. Es können jedoch auch die folgenden Einheitenkennungen verwendet werden: px, cm, mm, in, Zoll und %.Zwischen der Zahl und der Einheit dürfen keine Leerzeichen stehen.

Für die Ausgabe in seitenbasierten Formaten wie LaTeX werden die Abmessungen in Zoll umgewandelt. Für die Ausgabe in HTML-ähnlichen Formaten werden die Abmessungen in Pixel umgewandelt. Verwenden Sie die --dpiOption, um die Anzahl der Pixel pro Zoll anzugeben. Der Standardwert ist 96 dpi.

Die %-Einheit ist im Allgemeinen relativ zu verfügbarem Speicherplatz. Das obige Beispiel wird beispielsweise wie folgt dargestellt:

  1. <img href="file.jpg" style="width: 50%;" />(HTML),
  2. \includegraphics[width=0.5\textwidth]{file.jpg}(LaTeX) oder
  3. \externalfigure[file.jpg][width=0.5\textwidth](Kontext).

Einige Ausgabeformate verfügen über das Konzept einer Klasse (ConTeXt) oder einer eindeutigen Kennung (LaTeX \caption) oder über beides (HTML).

Wenn keine Breiten- oder Höhenattribute angegeben sind, besteht der Fallback darin, die Bildauflösung und die in der Bilddatei eingebetteten dpi-Metadaten zu berücksichtigen.

Beachten Sie, dass zwischen der Zahl und der Einheit sowie dem Feld und seiner Eigenschaft keine Leerzeichen stehen dürfen, da beides nicht funktioniert:

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

Wenn Sie Leerzeichen haben, wird das Tag ignoriert und als normaler Text in Ihrem Dokument veröffentlicht.

Antwort2

Wenden Sie den Stil auf das Bild an. Bitte versuchen Sie diesen
CSS-Stil

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

MD-Codierungsstil

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

Antwort3

Mithilfe von Markdown-Dateien können Sie die Breite und Höhe der Bilder wie unten angegeben festlegen. So können Sie für jedes Bild unterschiedliche Abmessungen festlegen.

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

verwandte Informationen