I am looking to increase the overall width of my HTML Rmarkdown output.
When producing PDF documents from Rmarkdowns there is an option to set the margin in the YAML section of the Rmd (ex. geometry: margin=.5in).
I am looking for something similar for HTML docs. The following link is a good example of my issue: https://rstudio.github.io/DT/extensions.html
As you can see on that html webpage, there is a lot of white space to the left and right of the datatables. Is there a way to reduce this margin space and thus increase the width of the datatables?
Thanks
Put this at the top (but below the YAML) of your rmarkdown document:
<style type="text/css">
.main-container {
max-width: 1800px;
margin-left: auto;
margin-right: auto;
}
</style>
Don't put it in a chunk but as plain text. It should set the max-width of the content area to 1800px.
As of rmarkdown 2.10, did get no results with the solutions proposed here or on the linked answer.
I could not get it to work with inline css in the .rmd file.
It did however work immediately when adding a doc.css file in the .rmd folder with just this entry:
div.main-container {
max-width: 1600px !important;
}
and adding it to the yaml header like this:
---
title: asd
author: abc
date: "`r format(Sys.time(), '%d %B, %Y')`"
output:
html_document:
toc: true
toc_float: true
toc_depth: 6
mathjax: null
css: doc.css
---
Something else inserts max-width into the html output, so you need to mark the width !important for it to work
<style type="text/css">
.main-container {
max-width: 100% !important;
margin: auto;
}
</style>
As explained here, you need to use this code:
datatable(..., options = list(autoWidth = TRUE,columnDefs = list(list(width = '200px', targets = c(1, 3)))))
Related
I found instructions to add a logo to the top of my Table of Contents (TOC).
https://rstudio4edu.github.io/rstudio4edu-book/book-fancy.html
However, the edits I made are not reflected in the bookdown website.
I have made edits to
_output.yml
bookdown::gitbook:
css: style.css
config:
toc:
before: |
<li class="toc-logo"><img src="docs/images/logos/logo-transparent.png"></li>
after: |
<li>Published with bookdown</li>
edit: https://github.com/rstudio/bookdown-demo/edit/master/%s
download: ["pdf", "epub"]
bookdown::pdf_book:
includes:
in_header: preamble.tex
latex_engine: xelatex
citation_package: natbib
keep_tex: yes
bookdown::epub_book: default
bookdown::bs4_book: default
and the style.css
/*--- LOGO ---*/
.toc-logo {
width: 200px !important;
object-fit: contain;
margin: 0 auto;
}
.toc-logo img {
max-width: 100%;
margin-bottom: 10px;
}
.summary > li:first-child {
height: auto !important;
}
my index.Rmd file looks like this:
title: "Book"
author: "FH"
date: "`r Sys.Date()`"
site: bookdown::bookdown_site
output: bookdown::gitbook
documentclass: book
bibliography: [book.bib, packages.bib]
biblio-style: apalike
link-citations: yes
cover-image: images/logos/logo-transparent.png
github-repo: FH/book
description: "Guide book."
I am not sure why the when I Build Book, the logo change is not reflected. Also it seems that maybe the "tile: "Book" in index.Rmd overrides everything else?
What it looks like now:
So apparently the code above for adding a logo works but only if you are building a bookdown::gitbook
I had been building a bookdown::bs4_book for which it is not possible to add a logo this way. To add a logo I ended up creating an template.html file and adding it to the _output.xml
_output.yml
bookdown::bs4_book:
template: template.html
css: style.css
I found an example to follow by looking at: https://github.com/jeroenjanssens/data-science-at-the-command-line/tree/master/book/2e
Alternatively you can edit the original template.html of bs4_book
https://github.com/rstudio/bookdown/blob/main/inst/templates/bs4_book.html
When I add a floating Table of Contents to my R-Markdown document, it always is on the left side of the page (with the content to the right), like so:
---
title: "some title"
author: "me"
date: "3/2/2020"
output:
html_document:
toc: TRUE
toc_float: TRUE
---
However, I'd like to move the floating TOC to the right side of the page. How can I accomplish this? The image below is what I'd like:
Insert the CSS chunk below (after YAML) and try increasing/decreasing the values of px (right and margin-left) for fine-tuning:
---
title: "some title"
author: "me"
date: "3/2/2020"
output:
html_document:
toc: TRUE
toc_float: TRUE
---
```{css toc-content, echo = FALSE}
#TOC {
right: 270px;
margin: 20px 0px 25px 0px;
}
.main-container {
margin-left: 200px;
}
```
The R Hmisc package hidingTOC function does this, allows for changing some of the characteristics of the display, and provides buttons labeled 1 2 3 that the reader can click to show the table of contents to level 1, level 1-2, level 1-3. No special yaml is needed; just have require(Hmisc) in your setup chunk and have the inline text sometime after that chunk: r hidingTOC(buttonLabel="Outline") or just use the default. You can also just say r Hmisc::hidingTOC() as the inline R code. Don't need to put these commands in a chunk; they render HTML which is automatically included in the document.
I have a table made in html/css that need to be printed on a 40.5cm x 21.5cm page, and I can't force, from css/html, to get printed on that size. I have this:
html, body {
width:40.5cm;
height:21.5cm;
margin:0cm;
padding:0cm;
}
#page
{
width: 40.5cm;
height: 21.5cm;
margin:0;
}
#media print {
html, body {
width: 405mm;
height: 215mm;
}
}
But every time I put print and "print to PDF", the PDF is created in "letter" page size. I tried to actually print it, and it appears on that size too. What I'm missing? I also tried #page size instead of #page width and height.
You can't override the print settings using css, the only solution for you it is create a pdf.
you can use https://parall.ax/products/jspdf and set the size using this:
open the website and change this: var doc = new jsPDF(); for this:
new jsPDF('p', 'mm', [405, 215]);
and you can print your custom
Since I am not familiar with css I was wondering if there is a simple way to "tell" my rmarkdown page to left align when rendering an HTML-page?
Something like this:
---
title: "My html-page"
output:
html_document:
body_placement: left
---
Maybe something like this:
---
title: "My html-page"
output: html_document
---
<style>
body {
position: absolute;
left: 0px;}
</style>
If you'd actually like some basic styles (i.e. not my theme:null suggestion), grab Skeleton and put normalize.css & skeleton.css in the same directory as your Rmd file. Then you can do:
---
title: "Title"
output:
html_document:
theme: null
css:
- normalize.css
- skeleton.css
keep_md: true
md_document:
variant: markdown_github
---
One
Two
```{r}
print("three")
```
which will result in:
You can add a third - my.css if you want to customize it a bit more.
In order to create a responsive website with Typo3 and Twitter Bootstrap, I would like to remove the height and width attributs of images
Here's how images are generated in Frontend via content element of type text & image and image
<img src="typo3temp/pics/a625b79f89.jpg" width="300" height="226" alt="blabla" />
I would like to remove the dimension attributes and get this:
<img src="typo3temp/pics/a625b79f89.jpg" alt="blaba" />
Can anyone help me ?
Call an image tag in document.ready function.
$('img').removeAttr('width').removeAttr('height');
FYI: There is no way to remove this with typoscript. The width and height attribute is hardcoded in sysext/cms/tslib/class.tslib_content.php function cImage. (Typo3 4.7)
It's not possible to remove the height or width image attributes with typoscript.
But you could override it with CSS in order to create a responsive website.
img {
height:100% !important;
width:100% !important;
}
Use jquery
set an id to your image object:
<img src="typo3temp/pics/a625b79f89.jpg" width="300" height="226" alt="blabla" id="myimage" />
$('#myimage').removeAttr("height").removeAttr("width");
here is alternative javascript code:
var myImage= document.getElementById("myimage");
myImage.removeAttribute("heigth");
myImage.removeAttribute("width");
This will be possible with TYPO3 6.2 LTS. Checkout http://forge.typo3.org/issues/49723.
To remove the effects of fixed width and/or height attributes without actually removing these attributes you can set them back to "auto" in your CSS definitions:
img {
height: auto !important;
width: auto !important;
}
I suggest to do that only for the img tags where you really need the pictures to be fluid. This could be done by adding an id or class to the img tags or any surrounding tag.
E.g. if your fluid images are located in a wrapper div with class "fluid_pics" you could use:
.fluid_pics img {
height: auto !important;
width: auto !important;
}
Often you will only need to set the height back to auto, as the width is already overwritten to be 100% by your framework (e.g. Twitter Bootstrap).
TypoScript to Remove "width" and "height" attributes from the source code. TYPO3 CMS 6.1+.
tt_content.image.20.stdWrap.parseFunc.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib {
width.unset = 1
height.unset = 1
border.unset = 1
}
tt_content.textpic.20.stdWrap.parseFunc.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib {
width.unset = 1
height.unset = 1
border.unset = 1
}
lib.parseFunc_RTE.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib {
width.unset = 1
height.unset = 1
border.unset = 1
}
tt_news example:
News List
plugin.tt_news.displayList.image.stdWrap.parseFunc.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib {
width.unset = 1
height.unset = 1
border.unset = 1
}
If your image has an id or another unique attribute assigned, you can easily do this:
var myImg=document.getElementById('myImage');
myImg && myImg.removeAttribute('height') && myImg.removeAttribute('width');
This is a VERY simple solution with jQuery. i found the answer at wpwizard.net.
Here's the URL:
http://wpwizard.net/jquery/remove-img-height-and-width-with-jquery/
Here's the jQuery:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($){
$('img').each(function(){
$(this).removeAttr('width')
$(this).removeAttr('height');
});
});
</script>
For Typo3 6.2 upwards you may set a custom image render layout
(snippet belongs to TS setup):
tt_content.image.20.1 {
layout {
mylayout {
# equals default rendering, except width and height removed
element = <img src="###SRC###" ###PARAMS### ###ALTPARAMS### ###BORDER### ###SELFCLOSINGTAGSLASH###>
}
}
}
Enable the custom layout for css_styled_content (snippet belongs to TS constants):
styles.content.imgtext.layoutKey = mylayout
See https://docs.typo3.org/typo3cms/TyposcriptReference/ContentObjects/Image/Index.html#cobj-image-layoutkey
for details on the IMAGE cObject.
There is a solution for old TYPO3s with TYPOSCRIPT:
stdWrap {
replacement {
10 {
search = /\s+(width|height)="[^"]+"/
useRegExp = 1
replace =
}
}
}
Use this stdWrap-TS where your image is rendered.
it dont work in 6.1 :/
but u can use CSS:
img {
display: block;
max-width: 100%;
height: auto;
}