☰

dimensionar correctamente las imágenes PNG en Markdown con pandoc para html/pdf/docx

tag-icon • tag-icon pdf html png markdown pandoc
dimensionar correctamente las imágenes PNG en Markdown con pandoc para html/pdf/docx

Estoy intentando utilizar Markdown con pandoc para convertir un solo documento a html, pdf y docx. Es un documento extremadamente simple que contiene sólo texto sin matemáticas y algunas imágenes. Las imágenes están en formato PNG. Incluyo una imagen usando esto en la fuente de rebajas:

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

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

</div>

y compilarlo como:

# 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

Noté que algunas imágenes PNG que tienenlas mismas dimensionesobtenga un tamaño diferente en los formatos HTML y PDF. Un PNG de 250x256 px con baja resolución (72 px/in) aparecerá en PDF con el tamaño correcto aproximadamente en la página y aparecerá en un tamaño razonable en HTML, pero un PNG que tenga las mismas dimensiones (250x256 px) pero sea Se cambia el tamaño de alta resolución (300 px/pulgada) para que sea pequeña en la página en la salida PDF. Quiero mantener un conjunto de imágenes PNG en un tamaño que yo especifique y que aparezcan en ese tamaño en los formatos HTML/PDF/DOCX.

Estoy dispuesto a renunciar al soporte automático de docx (o a lidiar con una gran cantidad de formateo manual después) solo para tener PDF/HTML.

¿Cómo puedo decirle a Pandoc que no cambie el tamaño de los archivos PNG para PDF o imágenes y que aparezcan en sus imágenes correctas? gracias.

Respuesta1

Las dimensiones se convierten a píxeles para su salida en formatos similares a HTML. Utilice la --dpiopción para especificar el número de píxeles por pulgada. El valor predeterminado es 96 ppp.

Encuentra el elemento más común en tus imágenes y úsalo. Modifique únicamente las excepciones.

Ejemplos: ppp, ancho, alto.

Si le das la información de dpi:

Agregue la opción --dpi como se indica para anular el valor predeterminado.

Si la mayoría de sus imágenes tienen una altura o un ancho común, eso debería corregirse fácilmente.

Por ejemplo, cambió la línea a:

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

o

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

O haga esto en formato HTML directo:

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

o

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

y la proporción será correcta.

Referencia:Léame de Pandoc

Para HTML y EPUB, todos los atributos excepto ancho y alto (pero incluidos srcset y tamaños) se pasan tal cual. Los demás escritores ignoran los atributos que no son compatibles con su formato de salida.

Los atributos de ancho y alto de las imágenes se tratan de manera especial. Cuando se utiliza sin unidad, se supone que la unidad son píxeles. Sin embargo, se puede utilizar cualquiera de los siguientes identificadores de unidad: px, cm, mm, pulgadas, pulgadas y %.No debe haber espacios entre el número y la unidad.

Las dimensiones se convierten a pulgadas para la salida en formatos basados ​​en páginas como LaTeX. Las dimensiones se convierten a píxeles para su salida en formatos similares a HTML. Utilice la --dpiopción para especificar el número de píxeles por pulgada. El valor predeterminado es 96 ppp.

La unidad % es generalmente relativa al espacio disponible. Por ejemplo, el ejemplo anterior se representará en:

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

Algunos formatos de salida tienen una noción de clase (ConTeXt) o un identificador único (LaTeX \caption), o ambos (HTML).

Cuando no se especifican atributos de ancho o alto, la alternativa es observar la resolución de la imagen y los metadatos de ppp incrustados en el archivo de imagen.

Tenga en cuenta que no debe haber espacios entre el número y la unidad, ni el campo y su propiedad, es decir, ambos no funcionarán:

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

Si tiene espacios, la etiqueta se ignora y se publicará como texto normal en su documento.

Respuesta2

Aplicar estilo a la imagen, por favor prueba este
estilo CSS

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

estilo de codificación md

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

Respuesta3

Usando archivos de rebajas, puede establecer las alturas del ancho de la imagen como se muestra a continuación. Esto le permite establecer diferentes dimensiones para cada imagen.

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

información relacionada