I have a problem rendering the "font-smoothing" CSS property with html2canvas on all browsers I have (FF/Chrome/Safari/0pera)
But trying desperately to solve that, I eventually wondered why I had to smooth the text in the first place and i noticed that only the fonts displayed on a dark background were causing problems.
So, I made a JSFiddle to make some tests (see the link below)
If you are on Mac (I don't know about PC's browsers), you can see with jsFiddle that:
the black font on a white background is totally ok.
the white version of the same font on a black background is now bolder and messier for whatever reason.
And this would be resolved only if I apply a css "font-smoothing" property to it.
Nothing changed in the css and the font is absolutely standard.
All that changed is the constrast: dark background with a bright font or the contrary.
So, clearly, it's not a problem related to the font or to a technically blocking issue. It just depends on the background and the font color.
I originally thought it was because of my fancy font but even the standard webfonts will generate the problem.
So, at the end of the day, it only seems to be a matter of contrast.
Black on white is ok while white on black is not.
Is there any (css) workaround to get the same results, whatever the background luminosity/contrast or font color, whitout using "font-smoothing" as a non standardized fix then?
The contrast thing is probably a known issue and I can't believe it has no standard fix or, at least, a workaround that would work without browser-specific css properties.
Applying a css property according to the background color seems very awkward.
Here is the html:
<div class="white_no_smoothing">Test of text 0123</div>
<div class="black_no_smoothing">Test of text 0123</div>
<div class="black_smoothing" >Test of text 0123</div>
Here is the CSS:
.white_no_smoothing{
background:#fff;
color:#000;
width:250px;
height:50px;
display:block;
font-size:36px;
}
.black_no_smoothing{
background:#000;
color:#fff;
width:250px;
height:50px;
display:block;
font-size:36px;
}
.black_smoothing{
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background:#000;
color:#fff;
width:250px;
height:50px;
display:block;
font-size:36px;
}
JSFiddle:
https://jsfiddle.net/Lzy4s4tw/3/
Thanks.
Related
This should be simple:
I want to use SVG images in a responsive layout. It all appears to work fine, including in IE 9+ when I've tested in Browser Stack. However, on the Can I Use website it says "IE9-11 desktop & mobile don't properly scale SVG files. Adding height, width, viewBox, and CSS rules seem to be the best workaround." I've spent hours looking into workarounds given on the internet, but being a newbie I don't understand them. And it appears to work without any workarounds! Is this code okay?
Here is my HTML:
<div class="content">
<img src="resources/test.svg">
</div>
Here is my CSS
img {width:100%;}
.content {max-width:700px; margin:0 auto;}
Thank you ever-so-much
It depends on the contents of your SVG. It should work okay as long as your SVG has a viewBox but does not specify a width or height.
See: SVG in img element proportions not respected in ie9
I'm working on a visualisation involving stacked histogram with really thin bars.
The problem is that white background introduces unpleasant visual vibration and make bars somewhat hard to interpret:
http://i.stack.imgur.com/GN0XD.png
What I'm looking for is a way to set a specific colour for chart background. I've tried to set it for SVG element like so:
svg {
background-color: #ccc;
}
But (obviously) it doesn't work properly:
http://i.stack.imgur.com/ctbYo.png
How do I set a background colour so that it'll be exactly the same shape as a chart?
I managed to come to this quick-and-dirty solution. Just adding a one pixel pseudo-shadow to the right of each bar:
rect {
-webkit-svg-shadow: 1px 0px #ccc;
}
Produces this:
http://i.stack.imgur.com/xSVOD.png
How is the chart being instantiated? by using svg { background-color: #ccc;} you are setting the background color of all svg elements to #ccc (except where over-ridden), so if your chart is a child of another svg element with some margins it would explain why the alignment is no good.
One strategy to go about fixing may be to use your browser's debugging abilities (ctrl+shift+i to bring up 'developer tools' in chrome) to take a look at the DOM elements and try to narrow down which ones cover which areas of the graph vs the areas of the graph plus the margins on the bottom/left. not sure about other browsers but chrome is useful in that if you hover over an element in the html document it will 'highlight' that element in the browser. This might help you narrow down which objects specifically need to be stylized.
I have noticed that all my table borders when viewed in IE10 are showing up as dark grey / black, no matter what colour I set them within the HTML code.
How do I overcome this? Why is it doing it? The borders are appearing the correct colour in all other browsers.
Here is an example - http://www.xplore.net.au/programs.htm
Note the ugly black border which is actually set at:
<table width="950" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#dcdcdc">
IE10 no longer supports the bordercolor HTML attribute. Using presentational attributes on markup, such as tables, is deprecated, and sees less use these days. To guarantee things work in the future, you should consider switching to styling with CSS.
In this case, to get it working you could remove the border and bordercolor attributes, and add the styling via CSS instead.
See this example showing bordercolor no longer working in IE10, and the equivalent in CSS:
http://jsfiddle.net/kfxdh/
#css {
border: 3px solid green;
}
Note that unlike the border and bordercolor properties, this does not put borders around the individual cells. if you wish to emulate that, you could do the same by adding a border to the tds:
#css td {
border: 1px solid green;
}
See http://jsfiddle.net/kfxdh/1/
In IE10, child elements like tables inherit the color from parent tags like body tag. I also had the same issue in which my table borders are coming as RED, but when I removed the color attribute from BODY tab it worked for me.
Please try.
I am applying a border radius on a select element that has a background color.
Instead of following the curvers of the border, the background color overlaps the curves and appears in a square box.
I can't figure out what css property I must use to solve this issue.
background-color: #FF0;
border-radius: 24px;
border: 4px solid #F09;
Here is the jsfiddle: http://jsfiddle.net/JsgnR/
thanks for your help
My feeling about this is, to get this to work in every common browser, you will have to rebuild the select with JS ... unfortuneatly styling selects with css like a divbox still not is possible as you would expect. In latest Firefox your code looks nice in browser, because firefox decided to let the border overlap the select, in latest opera the border will be underneath the select, because they decided to.
you see that on the options , try to style them via css, you are not able and they look ugly
You can wrap <select> element in <span></span> and add the required properties to css for
This solution: http://jsfiddle.net/JsgnR/5/
I have a CSS style which displays a png image in background. It works well in all browser, except in ie6.
In ie6 the bacground image is stretched to fit the block. How do I solve this ? Here's the CSS which I'm using to do this.
.error
{
color: #D8000C;
background-color: #FFBABA;
background-image: url('error.png');
}
IE7 / FF3.5
IE6
You probably use a png transparency fix script for IE6, I think the problem lies there because it probably applies a scale method.
Read the comments on this page.
The documentation of your png transparency fix will probably cover this.
I personally found using transparent pngs in IE 6.0 to be a major pain in the ass despite all the various fixes out there. I know this is not an original answer, but I would probably just do a conditional check and replace the image with a gif or jpg version if you really need to support IE 6.0 here, instead of relying on hacks to support this. Or just drop IE 6.0 already, this year, I've talked every single client into not supporting IE 6.0 on their new projects. Seriously, it's about damn time that thing stopped making our professional lives so god damn miserable.
If you're using the AlphaImageLoader filter, make sure sizingMethod='scale' is not present. Remove it or set it to image instead of scale.
Belatedpng is the best script I have found for this problem:
http://www.dillerdesign.com/experiment/DD_belatedPNG/
set actual width and height for the background image and background-position.
.error
{
color: #D8000C;
background-color: #FFBABA;
background-image: url('error.png');
background-position:left;
width:251px;
height:72px;
background-repeat:no-repeat;
}
here width and height are actual size of the error.png image. hope it helps.