☰

правильное изменение размера изображений PNG в разметке с помощью pandoc для html/pdf/docx

tag-icon • tag-icon pdf html png markdown pandoc
правильное изменение размера изображений PNG в разметке с помощью pandoc для html/pdf/docx

Я пытаюсь использовать markdown с pandoc для конвертации одного документа в 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. PNG размером 250x256 пикселей с низким разрешением (72 пикселя/дюйм) будет отображаться в PDF как правильный размер примерно на странице и отображаться в разумном размере в html, но PNG с теми же размерами (250x256 пикселей), но с высоким разрешением (300 пикселов/дюйм) будет изменен на крошечный размер на странице в выходном PDF. Я хочу сохранить набор изображений PNG в указанном мной размере и сделать их отображаемыми в этом размере в обоих форматах HTML/PDF/DOCX.

Я готов отказаться от автоматической поддержки docx (или потом заняться большим объемом ручного форматирования) лишь бы иметь PDF/HTML.

Как мне указать pandoc не изменять размер PNG-файлов для PDF или изображений и отображать их в правильных изображениях? Спасибо.

решение1

Размеры преобразуются в пиксели для вывода в HTML-подобных форматах. Используйте опцию, --dpiчтобы указать количество пикселей на дюйм. По умолчанию — 96 точек на дюйм.

Найдите наиболее распространенный элемент на ваших фотографиях и используйте его. Измените только исключения.

Примеры: 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;"/>

и соотношение будет правильным.

Ссылка:Pandoc Readme

Для HTML и EPUB все атрибуты, кроме width и height (но включая srcset и sizes), передаются как есть. Другие писатели игнорируют атрибуты, которые не поддерживаются их выходным форматом.

Атрибуты ширины и высоты изображений обрабатываются особым образом. При использовании без единицы измерения предполагается, что единицей измерения являются пиксели. Однако можно использовать любой из следующих идентификаторов единиц: px, cm, mm, in, inch и %.Между числом и единицей измерения не должно быть пробелов.

Размеры преобразуются в дюймы для вывода в страничных форматах, таких как LaTeX. Размеры преобразуются в пиксели для вывода в HTML-подобных форматах. Используйте опцию, --dpiчтобы указать количество пикселей на дюйм. Значение по умолчанию — 96 точек на дюйм.

Единица % обычно относится к некоторому доступному пространству. Например, приведенный выше пример будет отображаться как:

  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](КонТекст).

Некоторые форматы вывода имеют понятие класса (ConTeXt) или уникального идентификатора (LaTeX \caption), или и того, и другого (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}

Связанный контент