I have the following modification to the notebook style sheet
.output_area {font-size: 101%;}
i.e., I'm slightly increasing the size of the default font.
Using print(... I have absolutely no problem, while using display(Latex(... I have what looks like a totally unnecessary scrollbar, see picture below, where you can also see (part of) the code that produced the output.
Is it possible to increase the size of the fonts in the output_area without introducing the unnecessary scrollbar?
Tx in advance, g
Edit: I forgot to mention, w/o the css modification there is no scrollbar...
Put overflow: hidden; in the css (I do it for pre as well)
I think this will mess up really long output cells but I don't have any.
You can also use div.output_latex {...} to format only latex, which is really mathjax in the browser.
The easiest way to figure it out is to right click on the part you want in Chrome and choose developer tools (other browsers may have similar tools).
You can see that the overflow is last set in output_subarea so you have to overwrite it after that block is read. You can make another style section "output_subarea" or just put it in the "output_latex" section.
The "output_area" section is the whole wrapper for output including the place with Out[nn]: .
Related
Due to Chrome (and other Blink browsers) having a bug where only the first 500 columns are painted i need either a fix/hack, or an alternative solution.
See bug here (there is 509 pages - not 500): https://codepen.io/anon/pen/pLxozK
/* codepen link must be accompanied by code */
column-width: 400px;
I parse EPUB html to a single file. The EPUB's styling must be preserved, so i can't change the html structure.
CSS columns does a good job of rendering such a flat document horizontally. But the 500 limit in Blink means blank pages in Android Webviews.
Is there any workaround for this bug?
Users can adjust font size etc meaning amount of columns can change. So an alternative solution must be able to adjust.
What a cool little bug, I've never seen that before!
By the looks of things you'll need to add display:none to some of your divs. You'll need to use Javascript to see what's in view and see what's not. You'll get the added bonus of not using any system resources unnecessarily as you won't be painting any of the pages that aren't in view.
I've been experimenting with this for over a week and I'm about to give up, as I think this is not possible, but I wanted to reach out to this awesome community first.
What I'm trying to achieve is to, somehow, overcome the stacked z-index settings.
Let me show you an example so you maybe get the idea faster:
http://raulmellado.com/clientes/zindextest/
What I'd like is to have the green div (#shouldbeontop) on top of all elements (I am setting it to position:fixed).
In other responses in stackoverflow (yes I've read dozens of threads here), the answer is to change the html, move elements around, etc, but my problem is that I'm creating the #shouldbeontop and #scrollbar elements dynamically using js (my application is a bit more complex than this example, but I've tried to simplify to share my problem here).
I've created a js that can be embedded (ideally) on any webpage which will add the elements, so I can use js if needed, but I can just assume that the #shouldbeontop and #scrollbar elements will be there; the rest could be any html/css combination that's already there.
Usually, where there is no z-index in different divs, this works beautifully, but as soon as there is some stacking, it breaks :-(
If you would like to see a real life application of this, here you can find a quick & dirty demo: http://videngage.me/demo/demo1.html (here there is no z-index, so the video [#shouldbeontop in my simplified demo] is always shown on top (when you scroll down), but here http://www.members.skolahudbyonline.eu/rytmus-trening-majstra/ the video goes behind when you scroll down)
Is there an universal solution for this (using css and/or js), or should I just give up?
Thanks sooooooooo much for your help
Is there a way, without javascript, to load a small image for a background before the real image is downloaded? Without javascript because I know how to do it with it.
I can't test if the following CSS3 would work because it works too quick:
body {
background-image:url('hugefile.jpg'), url('tinypreload.jpg');
}
If the tinypreload.jpg is only, say 20k, and the hugefile.jpg is 300k -- would this accomplish the task? I assume that both downloads would start at the same time instead of being consecutive.
Update
Timing the results using Firefox's profiling revealed that it's not practical / not worth it to load a smaller background first. Main reason is the connection time. For tiny pictures it's the same time to connect as it is to download the content. For images where this becomes worth it -- the file size is not recommended for mobile.
If you still want to achieve this effect - combine all your "necessary" images into 1 file and display them as cropped background with correct offset. Load your high-res images through javascript, and update the content afterward.
You could exploit css load order and overrides to achieve this result.
Try loading the small image from your main css file and then put a <style></style> tag at the bottom of the html page. The inline style will override the main style but will load last because of it's position in the code.
The difference would be milliseconds though, so it may be too quick. It's also hacky and would result in invalid, but working code. Worth a shot though.
If you're trying to fix a mobile problem then have a look at this article on context specific images as that might be a more effective way to go.
This article on CSS3 multiple backgrounds may also help, as you may be able to exploit the stacking order to achieve the result you're after
It would be useful to know what problem you are trying to solve beyond load order, as it's hard to give advice on this one.
As I said in my comment you can use the 'net' tab in firebug for firefox (called timeline in chrome) to see the actual load order on your page - you can even filter it (on firefox) for CSS only or images only - this will enable you to test.
My client (who is obsessed with pixel perfection) dislikes the way browsers render font-face fonts.
At the moment I am using font-squirrel to convert OTF fonts to webfonts.
The problem is, I don't see any alternatives. I could create a PNG file holding all these texts, but that doesn't sound like a browser-user-friendly solution.
The typical example of a design I have to work on is:
What would be your approach?
I'm assuming that by "dislikes the way browsers render #font-face" your'e referring to the blink which happens. If not, you should elaborate.
The top one is web-font and the bottom one is screengrab from PSD. Both using same font family, same spacing. The client wants to look it more like the bottom one.
I'm assuming that by "dislikes the way browsers render #font-face" your'e referring to the blink which happens. If not, you should elaborate.
Currently there's only 3 options to remove that blink. The first two are obvious solutions - use images, or use web safe fonts. These, obviously, defeat the purpose.
The third option is to embed base64 code for the fonts in your CSS. This increases the size (kb) of your CSS files, but it will completely eliminate the blink which tends to occur because the font is loaded with the CSS so there's no blink when a secondary file is loaded.
usage for including bas64 fonts looks like this:
#font-face {
font-family: "FontName";
src: url("data:font/opentype;base64,[ the base64 code here ]");
}
There are a few online bas64 converters that you can feed a .otf file to and they'll spit out the base64 code. Here's one such converter.
An approach that I have used is to create background images to represent all display-text, and then use CSS to "hide" the actual text, and show only the image. For the sake of accessibility, the text should not be hidden using display:none or display:hidden though. Instead, use a large negative text indent to move the text off the left side of the display, or put it in a nested, absolutely-positioned element somewhere outside of the display area.
I usually use the negative indentation for all text not contained in a clickable element, and the nested, absolutely positioned element technique for anything that is contained in a clickable element (so the active element outline does not expand off the left side as can happen in some browsers).
Another common and popular way of handling this is automatic font replacement (using JavaScript). This solution is friendly to users of screen readers, because the HTML contains plain text and the replacement is done using JavaScript, in the browser.
An example of this is technique is sIFR, which is open source and uses Flash as the replacement.
It looks like it has been bolded. Try setting font-weight to normal.
What are the right sizes for a webpage to be printed on A4 size paper? What other stuff should be considered?
*inline CSS is preferred in this case
Clarification: This web-page's only propose is to be printed, since it is a receipt.
Clarification # 2: This web-page is for the internal use of the company I'm working for. They would like it to look professionally designed receipt.
Clarification # 3: This web-page must be printed on one page -of A4 size- only.
Answer
I'd recommend using two different style sheets.
For viewing in the browser you could set the table width to the width of an A4 paper: 21cm. (Minus margins 18cm.)
For printing the size of the table should be "100%", which means the printer fills the whole width of the page, using the margins given by the browser's settings. (Those page margins are what makes it impossible for you to make a printout look exactly the same.)
Possibly working
Make the table narrow enough to be safe it's in the page margins. Then center that table vertically.
Solution for perfect layout
There's no way you're going to achieve that with HTML & CSS, it's just not designed to allow exact layouts!
Create PDFs online and let the users download them. Most browsers are able to render PDFs anyway.
the best way is use from #Media command in stylesheet
for example
#media print{}
use for print layout of all control and
#media screen{}
used for screen layout of control, just think you have a
<div class="wrapper">content</div>
and then in your media you should have
#media print{ .wrapper{width: 100%;background-color:Transparent;color:Black;}}
and
#media screen{ .wrapper{width: 100%;background-color:#cdebcd;color:Red;}}
with this #media you can style your layout totaly different for print and screen. you can also use
.SomeDivOrContent{visibility:hidden;display:none;}
to hide ites in print.
let me know was it helpfull or not
Like the other guys said you need to use a print CSS, but remember one thing:
display:none; //is your friend!
You can use this to make sure elements such as your navigation etc are not printed out.
By the way A List Apart has this great article on print stylesheets, check it out.
Make your printable version as simple and free from page furniture as possible.
You should create a print-specific stylesheet that as a minimum removes any width restrictions on the page so the print page can flow the text to fit the output paper.
You should also be aware that most browser don't print CSS background images by default so don't rely on them being present on the printed page.
EDIT: In answer to your comment, I would make the receipt as simple as possible. The main issue is you don't have control over the end-user's printer so you can't know for sure exactly how wide the printable area is.
Design the page using a liquid/flowable layout and try and keep it simple. Amazon's receipt style that you get in the delivery box is probably worth using for inspiration.