I'm aware of the existing options to make output wider :
option(width=200)
The issue is when using rmarkdown to go straight from an R file to html, the output is bounded by the size of the html box, not the predetermined R option for line width.
What is the CSS option or something similar I could change to get a wider output box?
I think you're looking for the max-width property of .main-container. The default bootstrap theme sets it to 940px. You can change it by adding something like this to the top of your Rmd file:
<style type="text/css">
.main-container {
max-width: 1280px;
}
</style>
Related
I have an external html file saved in asset folder. I load the file and wrap it using html.Iframe(), then output to html.Div() component. How to change the width of display html file?
Here is what I do:
fig_sector_heatmap_html_frame=html.Iframe(src=html_filename_regime_df_sector_styled,
className='heatmap-sector-html-div')
component is html.Div() which will be output of html.Iframe()
tt_sector_graph_html_div_1=html.Div(id='tt-sector-plot-html-div-1',className="heatmap-sector-html-div")
in CSS file:
.heatmap-sector-html-div {
height: 30vh;
width: 80vw;
margin: 0;
}
no matter how I change width from 80vw to 120 vw, the displaedy html width never change. For example, below figure you can see there is big empty right space. I'd like to make the heatmap bigger to fill the right space. I think what I need is to zoom the html. how to do zoom?
Thanks
I tried to convert this html resume to pdf and print it but as you see there is a problem in template after changing. For example compare skills in both html version and pdf version.
This is Github repo of this project: https://github.com/xriley/DevResume-Theme
And this is a sample of HTML file: https://themes.3rdwavemedia.com/demo/devresume/
How can I fix it for ever?
I need this: https://themes.3rdwavemedia.com/wp-content/uploads/2019/04/DevResume-Sketch-Template-PDF-Preview.pdf
Solution 1 - Without Coding:
You can select margins as custom from more settings to make changes for each page accordingly.
Then you can drag these blue dotted borders to adjust text based on your need.
As i have drag thelower border upward to make senior developer text to appear in next page.
Solution 2 - With Coding:
Simply adjust margins for each page from solution 1.
Then by using the #page in your CSS. You can modify margins when printing a document. You can't change all CSS properties with #page. Only few properties such as margins while printing the page etc.
#page:first { <----- first here is refering to only First Page
margin-left: 0.75cm;
margin-top: 0.25cm;
margin-bottom: 0.25cm;
margin-right: 0.75cm;
}
If you want to apply margins on all page then simply do this:
#page { your margins values }
You can read more about #page property here.
The space difference between 2 lines of code in my jupyter notebook is too much. I want to reduce it.
I checked out the custom.css file inside the custom folder in my .Jupyter directory, but I have no experience with CSS. I'm confused between so many options to change which one. Is it possible to change this?
In CSS, the distance between lines is defined as line-height. I'm not entirely sure how this will apply to you as i have never used Jupyter, but if it works from a CSS stylesheet you could use:
*{
line-height:10px; // Tweak till happy
}
In that custom.css file try to insert the following:
* { line-height: 140%; }
That's a line height parameter which makes the distance from one baseline (= the line on which the letters are put) to the next being 1.4 time the height of the maximum space that is used for letters.
Change that value until you find one that's convenient (120%, 160%, whatever)
The * character at the beginning makes that apply to all lines in the whole document. If headers and similar look okay and you only want to change the line height for "regular" text, write p instead of *, which will apply to all paragraphs, like
p { line-height: 140%; }
browser always load CSS which it see till the end of page load, If you want to edit something from your page but you want to create custom.css for that so linked that CSS on HTML page after Jupytor.css. After that Everything you will edit will be displayed in your page. Still explain your question more nicely if you are not achieving your goal. Thanks
I was able to change the space difference between 2 lines of code by tweaking the line-height part in the following code. It is inside the custom.css file inside the ~/jupyter/custom directory.
div.CodeMirror pre {line-height: 1.1 !important;}
I have my course book as html parts chapter-by-chapter. I have done some modifies on it. It seems very well when it is read on webpage but when I want to convert it to pdf or print it it seems narrow. The issue is that how the page can be fitted in A4. If you look at output.pdf which can be found on main page. Besides, the shared links for you understand me. (especially page 47). I can merge them just in a pdf file. I think that if the css can be edited, it will be fitted in A4 and seems in pdf like a book. I need your helps. As an example you can look at ch18.html and ch19.pdf I can't write other links because of reputation. But all files can be looked from main page.
Pages: http://bookfiles.host-ed.me/ch18.html and ch19.html
Css file: http://bookfiles.host-ed.me/static/CACHE/css/ab0ffefbadc3.css
I absolutetly newbie about css. Thank for your helps.
The issue appears to be with your max-width on your "document" div. You have it set at several different places in your css file based on the screen size. I would go through them one by one and find the one that is affecting your print file. You need to set your max-width to 100%. Having a max-width less than 100% is what is causing it to print narrow.
Once you identify which one is causing the problem, you can add a new style that only goes into affect when you print.
Add this to your CSS file, for example:
#media print and (color){
#lesson-fragment, [role="document"] {
width: 100%;
max-width: 100%;
}
}
You can also put other specific print styles inside of the #media print code. Like if you wanted to change the font size or color only when it printed.
I want to give some space to top of every page which is applied in only in printing mode.
is it possible or not..?
I am using:
#page { margin-top : 30px; }
But it doesn't get applied..
Are there any other methods available in css..?
You can do the following way.
#media print
{
body {margin-top:30px;}
}
This will select and target only the print related CSS changes. Hope this helps.
*PS: I have taken Body element, but if you want, you can target specific wrapper that is part of your HTML and you can target it specifically only if you want that wrapper to start from top with certain spacing. You have the solution with logic. Use it to match your scenarios.*