Trying to print my views to PDF and I am getting pdfs rendered as for mobile device. Basically, I think smallest screen is detected and css styles for mobile are used. Is there a way to fix this?
I tried to change format size and make it really big, tried to use landscape orientation, but content would just scale up and it would still show with mobile styles.
I am thinking to render a partial view to pdf and have custom css file just for pdf exports, but that seems like a lot of not necessary work
Any ideas?
Thanks
What you could be doing is using the print media type in your stylesheet. It would look something like this:
#media print {
p {
font-family: Helvetica, Arial, sans-serif;
font-size: 18px;
color: red;
}
}
Maybe you already use this media type and put it in your mobile styling? Might want to put it above any responsive input and see how that works out?
Related
I have an SVG image on my website (I do not have an SSL certificate yet so it may display a security error before you enter) and the font I had used when making this image was Segoe UI. On my desktop it looks fine however whenever I look at it on a mobile device it shows up as Times New Roman. I have tried this as a work around but still no good:
#media (max-width: 576px) {
#heroimg {
font-family: Arial, sans-serif;
}
}
My thought process when adding this code in my css would be that incase whatever device can't load the font, load Arial.
You need to convert all the text to outlines before uploading the SVG.
You can do this in Adobe Illustrator by selecting the text and going to Type > Create Outlines
I'm embedding a Vimeo video with a particularly long title on a responsive site, and I'm wondering if it's at all possible to override the Vimeo player's CSS with my own to control font-size, most importantly. The player embed options on Vimeo do not seem to allow for these sorts of adjustments. Using Firebug to inspect the actual embed code, I tried using variants of the following CSS to override the default player font style within a media query, but to no avail:
iframe #player .controls-wrapper .title h1 {
font-size: 12px !important;
}
I'm assuming I'm unable to override the CSS because the embedded iframe's stylesheet must take precedence (?) I'm frankly surprised that the text-size doesn't seem to be responsive by default. Any ideas for a solution are much appreciated.
You could try to change it using jQuery. Give this a shot:
jQuery(document).ready(function () {
jQuery('iframe').contents().find('#player .controls-wrapper .title h1').css({'font-size':'12px'});
});
I am looking for a ressource where I can download CSS styles suitable for Rstudio/knitr markdown output?
The default look of the default CSS-style is fine, but I would like to find a CSS style where the content is positioned in the middle of the screen.
something like this (ignore content, colors, sidebar etc):
http://www.barackobama.com/news/
not like this (which is similar to the default):
http://stat.ethz.ch/R-manual/R-patched/library/stats/html/Normal.html
I don't really know CSS so I can't do it myself. I have tried to change the margin in the default CSS style from 0px to 200 px:
body, td {
font-family: sans-serif;
background-color: white;
font-size: 16px;
margin: 200px;
}
The problem with this "solution" is that it only works when the browser window is maximized, and pdf printed from the browser are too narrow also.
edit: This is good:
https://gist.github.com/andyferra/2554919
edit2: The preview version of Rstudio ( RStudio 0.98.932 - Windows XP/Vista/7/8) has a nice default CSS. Get it here: http://www.rstudio.com/products/rstudio/download/preview/
edit3: The newest version of Rstudio now includes some very nice CSS-styles to choose from :) http://www.rstudio.com/products/rstudio/download/
Not just a CSS resource, but you can take a look at the knitrBootstrap project, which provides a way to convert Rmarkdown to HTML styled with the bootstrap framework, including a CSS style chooser and some fancy javascript add-ons :
https://github.com/jimhester/knitrBootstrap
Can any one help me in printing a webgrid in landscape
You have to do this in CSS, defining a stylesheet appropriate for printing. You can't control the printer preferences from a browser.
In other words, is up to the user to select the paper orientation he wants to use. You can only "help it" a bit using appropriate styles for printing. Read here.
One common approach to this is to create a custom print CSS stylesheet. It can be pretty simple.
This short article will guide you through a simple example.
Once you grasp the concepts involved, you can add specific CSS for your web page.
Here are the basic steps:
1) Reset all the padding and margins:
body {margin:0; padding:0; line-height: 1.4em; word-spacing:1px;
letter-spacing:0.2px; font: 13px Arial, Helvetica,"Lucida Grande", serif;
color: #000;}
2) Remove elements you don't want to print, such as the page header, logo, menus, etc. In your case, you may want to hide everything but the grid.
#logo, #catnavi, .topnavi, .more-link, .navigation, #sidebartop, #related, #social,
#sponsors, .tabs, #allpost, .toolbar, .splitbox, #commentform, #commentabs .idTabs,
.postmeta-content .comments, #respond h3, .tag, .footerlinks {display:none;}
3) Optionally, display the URL in the print document (hiding links will hide the URL)
4) Optionally, insert page breaks
#comments {page-break-before: always;}
5) Add a <link> tag at the top of the page to include the .css file.
i want to use a icon in jQuery Mobile on a span element...and i want to support retina display too. So how can i use a icon without giving my span a fix width?
Should i use Media Queries and try to get it working that way or is there any "offical way" to do it?
Regards
Nils
Here is my procedure for making custom icons in jQM.
You need 2x png's one that is 18x18 and another that is 36x36
In your css:
//non-retina
.ui-icon-amazing {
background-image: url("custom.png");
}
//retina
#media only screen and (-webkit-min-device-pixel-ratio: 2) {
.ui-icon-amazing {
background-image: url("custom-hd.png");
background-size: 18px 18px;
}
}
To use your new icon, which you have called 'amazing' simply use the appropriate data-icon= attribute
data-icon="amazing"
and the icon will get applied.
You get bonus points for base64 encoding your png directly into your stylesheet.