I'm currently trying to find a way to embed external images (PNG) in my R markdown HTML output file in a scalable way.
What I have tried so far only sets them to a width equal to the space available in HTML file (don't know how much that is in pixels, maybe around 800px) even though the original image size is ~1500x700.
What I would like is that when I increase the window size of the HTML viewer that also the images increase, at least up to their original resolution. Down-scaling works without problems.
My attempts:
```{r fig.width=100, fig.height=55, echo=FALSE}
library(png)
library(grid)
img <- readPNG("images/image.png")
grid.raster(img)
```
and
<img src="images/image.png">
...without success.
Anybody got an idea how to do that? I would really appreciate your help :)
You may want to use out.width instead of fig.width and fig.height, with percentage, which will be percentage of the text area. You can use it with include_graphics(). If you do not set out.height, the ratio will stay ok.
```{r, echo=FALSE, out.width='80%'}
knitr::include_graphics("images/image.png")
```
Related
I used a dataframe on rmarkdown, but when I knit to html it is too large and uses a lot of space. Is
there any way to make it more compact?
I've tried looking around in the DT instructions but haven't found any options to change that.
You can reduce the vertical spaces using the lineHeight property:
formatStyle(columns = 1:5, lineHeight='30%')
Is there any way to resize the image and reduce it's weight in Angular/TS or in CSS? I mean something like 'picture' tag in HTML 5.1.
Resizing the image on the frontend won't change it's weight, as the full image has to be retrieved from the server anyways. The 'picture' tag isn't able to do this either.
The only thing coming close to what I believe you want to achieve is this Angular directive I found online:
https://github.com/oukan/angular-image-compress
This also only compresses on the client side and won't change the weight of the image retrieved in the first place.
I am looking for a way to resize a tables contents using CSS to make sure the contents all show up when printing but yet still keep the text from wrapping for any individual cell. In this example,
<table class="datatables" id="table1">
<tr>
<td style="white-space:nowrap;">This is a table with a bunch of data that stretches off the page when printed.</td>
<td style="white-space:nowrap;">I want it to print on one line, not wrap but also be sized small enough to fit on a printed page.</td>
<td style="white-space:nowrap;">It currently cuts off most of this last column.</td>
</tr>
</table>
The last td is mostly cut off when printing but all these display as I intended on one line. For example purposes I put the style inline but would be using style sheets. My ideal solution would automatically resize the font to fit still on one line per row without wrapping. Any thoughts would be appreciated.
Controlling the output of printing is a nearly impossible task. You never know the variables of what printer the user is using, what fonts are available, what settings are set, etc.
I've had this issue before, and the most clean solution for the user was to convert the table to a .pdf, which will render nearly identical across machines and printers. While it may not seem so easy to do from a technical standpoint, there is a pretty straightforward solution: datatables.
Using the "table tools" plugin, you can create a .pdf formatted version of any table with just a few lines of code and the addition of a few extra files. Here's a working demo In a nutshell, provided your table is correctly formatted and not insanely large (make sure to use <thead> tags) then you should just be able to upload the required files, apply the demo code with a change in the selector to match your table, reference the swf file that facilitates creation of the .pdf, and it should work smoothly. Most issues I've seen in setup have to do with incorrect reference to the swf path.
Voila, printable, simple code.
Maybe you can try with
#media print
{
table.datatables {font-size:10px} /*Type the value that you want*/
}
You can check a print settings in your Chrome Browser by using "Find the Scale Fields" in "Print Options" and adjust the page size on your requirements.
This is not a full-proof solution, you need to check it which values will works for you.
Use CSS transform scale property.
In my case my table width was more hence I did this using javascript.
Since my width was too much, I scaled it lower and adjusted the margin and after javascriptwindow.print() I bring it back to the original state.
document.getElementById('your table id').style.transform = ("scale(0.8)");
document.getElementById('your table id').style.margin = ("0 0 0 -15%");
You can also do it using same property in CSS.
#table {
transform: scale(0.8); //Adjust this accrding to your need by printing
margin : 0 0 0 -15%; //Adjust this accrding to your need by printing
}
Is there a general way to define the size, in percent or pixels, for an image that is linked in org-mode?
Say I have the following link in my .org file:
[[~/images/example.jpg]]
This JPG is way too large, so if I export it to HTML or LaTeX or open it in org-mode with C-c C-o i will only see a fraction of the image.
As of Org 8.0, "Attribute lines now take plists" :
#+attr_html: :width 100px
#+attr_latex: :width 100px
[[~/images/example.jpg]]
As per Jacobo's comment, add the following to your init.el file:
(setq org-image-actual-width nil)
Then in org-mode, you can use this for inline previews of JPGs and PNGs.
#+ATTR_ORG: :width 100
[[~/images/example.svg]]
and if you want to size this for both inline previews and html output:
#+ATTR_HTML: width="100px"
#+ATTR_ORG: :width 100
[[~/images/example.svg]]
#+ATTR_HTML: width="100px"
[[~/images/example.jpg]]
This is a sample on how to resize an image using percentages (Org mode version 9.0.5):
#+CAPTION: Weight space
#+ATTR_HTML: :alt neural network :title Neural network representation :align right
#+ATTR_HTML: :width 50% :height 50%
https://i.stack.imgur.com/nzHSl.jpg
Here is a way to resize images in emacs Org mode for preview (not exporting). Typically,
We want to set an image to a specific width like 249px when we need to.
We want to set a default image width, so that we don't need to specify +attr_html for every image - that would be tedious.
This can be achieved by configuring org-image-actual-width like follows:
(setq org-image-actual-width (list 550))
Then, in your .org file, if you have
#+attr_html :width 249
[[~/images/example1.jpg]]
then the image will be displayed in preview at width 249px. For another image, where no +attr_* is specified, the default width of 550px will be applied.
[[~/images/example2.jpg]]
You can see this behavior from the documentation in org-mode source code:
When set to a number in a list, try to get the width from any
#+ATTR.* keyword if it matches a width specification like
#+ATTR_HTML: :width 300px
and fall back on that number if none is found.
I found it hard to understand what does "a number in a list mean", so I looked at the implementation, and indeed, something like (list 550) works.
For LaTeX, to remove the default width=.9\linewidth, set the org-latex-image-default-width to empty string. By this way, the image will have its natural size.
To do that on the fly use the set-variable emacs command. Or to set this variable permanently, add the following line in your init.el :
(setq org-latex-image-default-width "")
I need to create a PDF file from the HTML I have created usign rrdcgi. This page contains the details and graphs in PNG format. I have written the below code using Perl module HTML::HTMLDoc to create a PDF file using saved HTML file. The images are of size width 1048 and hight 266 but when creating a PDF file the images are not shown completly from the right side.
#!/usr/bin/perl
use strict;
use warnings;
use HTML::HTMLDoc;
my $filename = shift;
my $htmldoc = new HTML::HTMLDoc();
$htmldoc->set_input_file($filename);
$htmldoc->no_links();
$htmldoc->landscape();
$htmldoc->set_jpeg_compression('50');
$htmldoc->best_image_quality();
$htmldoc->color_on();
$htmldoc->set_right_margin('1', 'mm');
$htmldoc->set_left_margin('1', 'mm');
$htmldoc->set_bodycolor('#FFFFFF');
$htmldoc->set_browserwidth('1000');
my $pdf = $htmldoc->generate_pdf();
$pdf->to_file('foo.pdf');
I need help on following items:
How do I display the complete image on page.
Any help with the Perl code would be really appreciated.
Have a look to HTML::HTMLDoc documentation:
set_browserwidth($width)
specifies the browser width in pixels.
The browser width is used to scale
images and pixel measurements when
generating PostScript and PDF files.
It does not affect the font size of
text. The default browser width is 680
pixels which corresponds roughly to a
96 DPI display.
Please note that
your images and table sizes are equal
to or smaller than the browser width,
or your output will overlap or
truncate in places.
You said that images are 1048 width but you specified 1000 on browser width using:
$htmldoc->set_browserwidth('1000');
try to increase browserwidth parameter to fit your images.