I want images in my Pandoc exported Word docx files to be scaled a little.
By default, an image can be around 640px of width at 72dpi so it is exported by Pandoc to the full width of my reference docx (which means: it isn't scaled down by Pandoc to make it fit the space).
I'd like all my images to look a little bit crispier when printing the document (or zooming on screen). I'd like all of them to be scaled down visually by 1/4th or 1/3th (staying at the same resolution).
I played around with --dpi option of Pandoc and set it to 300 (by default it's 96), which didn't have an effect on the size of the images.
I also tried to set the dpi of my images using Photoshop, which simply resulted in bigger images, but they were also displayed bigger when exported using Pandoc (regardless of the --dpi option).
The only way which had the desired effect was to set an explicit width in Markdown:
{ width=2cm }
But this needs a lot of calculation on my side to get the desired value, because using { width=50% } makes the image have half of the width of the surrounding container. Not what I need.
I think I misunderstand something general about this topic. Maybe somebody can explain me a bit.
Related
When I export ggplots from R (with ggsave in svg) to modify them in inkscape, I run into the following problem:
I use the text tool to select some text (axis labels for example). If I want to increase font size in the drop down menu, inkscape only increases the height of the text, width stays the same. I am left with text with the wrong aspect ratio.
This must be due to some type conversion (text to object for example) that is done at some point (ggplot, ggsave or inkscape). Until now I have been unable to figure out how to solve this. So far, I have reverted to deleting the existing text and creating new text in inkscape (adjusting font size works totally normally then)
Code to create input for Inkscape:
tdf <- data.frame()
tpl <- ggplot(tdf) + xlab("testtext")
ggsave(filename="tpl.svg",plot=tpl,height=5,width=8,device="svg")
It appears svglite introduces a textLength parameter which hard-codes the width. Interstingly, Illustrator seems to not care about this when editing the file, but Inkscape does.
You could try another device, svg may not be a great choice as it appears to split words into individual letters, but gridSVG::gridsvg seems to works. Or use a pdf device, which Inkscape can also import.
I have a document in HTML format. The fonts are specified in 'pt' units (e.g 14pt).
I also have page width specification (e.g 400pt), so when the text line is longer than 400, it will wrap to the next line.
I would like the appeared font size in QTextEdit to match the window widget size. Such that if I make the window smaller, the fonts will get smaller. If i make the window bigger, the appeared fonts will get bigger. In any case, the line will break at the exact same place.
Similar to the editing experience in Pages or Word.
What is the best way to accomplish that?
If an image is 200px by 200px and you give that image a class in css with the same dimensions, will the browser still resize that image via css?
Ive been looking frequently into reducing page load time and one of the things that comes up is resizing via css slowing down page load time.
If you apply a class to your image with some fixed dimensions, then it will stuck to the defined dimensions.
Unless you define "max/min-width" and "max/min-height" instead of width and height.
The loading time is not about the dimension of the image but more about the size (octets) of the file (here an image). The performance are poorly influenced by the dimension of it.
No, because image will be same size (as downloaded from server). Also, since width/height of class is same as image, image will not be resized. And I don't think that resizing such images has any impact on page load times.
We can resize image propertionally from css but can't reduce load time from css
Full optimization of images can be quite an art to perfect as there are such a wide variety of images you might be dealing with. Here are the most common ways to optimize your images for the web.
Use proper file formats. If you have icons, bullets or any graphics that don't have too many colours use a format such as GIF and save the file with lower amounts of colours. If you have more detailed graphics then use JPG file format to save your images and reduce the quality.
Save your images in the proper dimensions. If you are having to use HTML or CSS to resize your images, stop right there. Save the image in the desired size to reduce the file size.
To resize your images you will have to use some form of program. For basic compression you can use a simple editing program such as GIMP. For more advanced optimization you will have to save specific files in Photoshop, Illustrator or Fireworks.
Source Link
Edit:
Check this link to get more idea about speeding up page loading time
I'm working on a printing template in the browser for print-to-pdf, and am using a transparent .png overlay in one section.
This happens both with transparent .png files and transparent .gif files:
Chrome, when printing (both to .pdf, and in the print preview window), seems to outline transparent images with a 1px gray line:
Exhibit A:
I've tried this in several other browsers (including Safari) and none appear to do what Chrome does. Has anyone seen this before? I need to find a way to disable it or hack it on the Chrome side so that this will work across browsers.
To see this in action, click here: http://jsfiddle.net/brandonscript/nELwd/ (just an <img /> tag) and press Cmd/Ctrl+P to bring up the print preview. You'll see this in the preview and if you print to .pdf. Make sure you have "Background colors and images" enabled, or you won't see any images.
Note: I'm not looking for workarounds after it's been printed and I'm aware that if you size the image to 100% and view the .pdf at 100% zoom you don't see the gray line. I need to programmatically (or otherwise) remove the gray line prior to printing the .pdf.
I have experimented enough and considered all the answers above while doing so.
Suspiciously, Upon saving your image and opening in gimp and some pokes into it, What I found was this.
Which makes me think that your image in truth, containing the gray border around it. My suggestion is you remove that layer and make that empty space around the actual image to transparent.
EDIT(response to #remus comment)
I do not know if my claim is correct, but I am believing that the image is not what you are expecting it to be. You need to correct that image. I have tested with another image of mine, pasted on the fiddle is not having any border around it in screen and print preview. (And the final pdf too). Sorry if this Answer is correct and hurts you.
Though I haven't come across this exact issue, I do a lot of work with css printing (for pdf and browser printing) and more often than not I have to use 2 images: 1 for screen and 1 for printing (do not use transparency for the printing one in yuour case):
<img src='http://apigee.ignite.ms/iloveapis/portal/badge/heart-overlay.gif' width='300' height='400' class="screen"/>
<img src='http://apigee.ignite.ms/iloveapis/portal/badge/heart-overlay_print.gif' width='300' height='400' class="forPrinting"/>
in your main css file:
img.forPrinting { display:none }
in your print css file which should be declared after your main css file:
img.screen {display:none }
img.forPrinting { display:block; }
Short Answer:
Change your PDF printing preset to a higher resolution.
you'll get:
The Long version:
I noticed you have re-sized the image by changing its width height properties in the HTML code.
So I made sure your image is exactly in the size you need it and it will not have this strange contour.
See Link: jsfiddle.net/cyVqw/
I have a print preview:
PDF screenshot:
To verify that in any size the PDF will keep your image transparency I checked
PDF saved in a Higher resolution preset i.e. "Print Quality". this resulted in a large file but with better zooming quality:
Here is High Resolution 33% preview:
High Resolution 200% preview
So, what you need to do is to adjust your PDF quality preset.
I've been trying the CSS photo gallery example here to set up my own (here is the code). Everything works fine except:
(1) The divs are setup using absolute measures in px. I find it frustrating to have to resize and adapt my photos to fit them. Instead, is there a way to setup up all the dimensions of the gallery (via the CSS), such as in % or em, so that the gallery adapts to the images I put in it, and also dynamically fit the viewport size of a browser?
(2) I tried to add my own photos to the gallery, yet if my photos' dimensions don't match that of the divs, they overflow. Is there a way to specify larger images to change their sizes to fill their containers, and maintain their aspect ratio?
Thanks.
(1) I would not set up the entire gallery in % or scale it dynamically to fit the browser. This can lead to unexpected results and problems. To fit the images into the divs you could set up a bash script with imagemagick to resize all your images. (May even your server can do this for you. If you are on Windows there are programs to batch-resize images like Shrink-O-Matic.)
(2) You can just set up a fixed hight or width (only one of them) to put the image in a fixed dimension. The browser will then scale the image to fit that value proportionally. The CSS would look like this:
#container .pics span img {height: 400px;}
That should work.
If you really want a gallery that "scales" to the browser size, may you have to look around for another one. There are thousands out there and it would be to much work to modify this one to your needs.
Good luck.