How to antialias SVG text in Firefox - firefox

Does anyone know the best way to anti-alias svg text that will work in Firefox?
I tried text-antialias:true but this has no effect, and also I tried using a stroke paint but this just thickens up the font and is not what I like.
Example:
<!DOCTYPE html>
<html>
<body>
<svg height="100" width="500">
<text y="50" x="250" text-anchor="middle" style="font-size: 40px" >Hello</text>
</svg>
</body>
</html>
I have uploaded this to http://jsfiddle.net/KJhrY/
This example appears antialiased in IE9 on my PC (Windows)

Firefox 25 will have support for the mox-osx-font-smoothing attribute!
So for firefox 25 you can use:
.yourclass{
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Firefox 25 will probably be released somewhere at the end of Oktober was released on 2013-10-29.
Nightly builds can be found at http://nightly.mozilla.org/

Try "text-rendering" attribute.
text-rendering = "optimizeLegibility"

Related

OCR A Extended font puzzle

I have 'OCR A Extended' font installed in Windows and I created the following test.html file, but in Chrome only the OCR A gets rendered as OCR text (class p.b), OCR A Extended (class p.a) gets rendered (computed) as Times New Roman, what's going on? In IE both are rendered as OCR. Same behavior in Windows 7 and Windows 10. Looks like a bug to me.
<html>
<head>
<style>
p.a {
font-family: "OCR A Extended";
}
p.b {
font-family: "OCR A";
}
</style>
</head>
<body>
<p class="a">1234567890</p>
<p class="b">1234567890</p>
</body>
</html>

Different font size rendering between Linux and OSX builds

For a "font-size: 1cm" css rule, Wkhtmltopdf for OSX renders a 1cm font size, whereas Linux build renders a ~ 0.77cm size.
Here is my HTML code :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style>
body {
font-size: 1cm;
line-height: 1cm;
font-family: sans-serif;
}
</style>
</head>
<body>
TEST ME 1<br />
TEST ME 2<br />
TEST ME 3<br />
TEST ME 4<br />
TEST ME 5<br />
TEST ME 6<br />
TEST ME 7<br />
TEST ME 8<br />
TEST ME 9<br />
TEST ME 10<br />
TEST ME 11<br />
TEST ME 12<br />
TEST ME 13<br />
TEST ME 14<br />
TEST ME 15<br />
TEST ME 16<br />
TEST ME 17<br />
TEST ME 18
</body>
</html>
Command :
wkhtmltopdf testPdf.html testPdf.pdf
Any idea?
Thanks!
I think this is related to #2463 issue. For linux version you can use that command wkhtmltopdf testPdf.html testPdf.pdf --zoom 1.28.
Found the answer here : http://blog.gluga.com/2012/05/wkhtmltopdf-font-and-sizing-issues.html
Meter/inch units doesn't seem to be consistent as wkhtmltopdf renders the html inside a Webkit rendering engine, which can be configurated with different screen resolutions.
So, the solution is to set fix CSS width and height to the page container.
In my case :
body {
font-size: 1cm;
line-height: 1cm;
font-family: sans-serif;
width: 1600px;
height: 1050px;
}
did the trick.
NOTE: In my case, in order to have a accurate dpi rendering on a A4 landscape orientation on OSX, I have to set low values (width: 1120px; with 1cm left and right margin): that led to a smaller rendering on Linux, which I fixed with --zoom 1.8 (I guess any high value works, it will only make it match full page's width, not more).

How to export d3.js animation to vector frames to create an AfterEffects sequence?

I'm creating some basic animations using d3.js, such as bar chart animations that show a transition between two sets of data. Ultimately, I want to bring this animation into Adobe AfterEffects to include as part of a larger video. I want to export the web animation as a series of vector frames (ai or svg, or png if necessary) to import into After Effects or Illustrator. How can I do this?
Thanks!
This actually may be quite simple with the way d3.js does transitions! Since d3.js directly changes the DOM elements for doing transitions, you can simply save the DOM elements at each 1/30th of a second. Here's a complete example:
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style>
svg { border:1px solid black; }
</style>
</head>
<body>
<svg id="svg" width="480" height="240" xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg><br/>
<button id="b1" type="button">Animate</button>
<script type="text/javascript">
var svg = d3.select("svg");
var b1 = d3.select("#b1");
var duration = 1000;
var nTimes = 30;
var x = new XMLSerializer();
var n = 0;
function outputToConsole() {
console.log(x.serializeToString(document.getElementById("svg")));
if(n++ >= 30)
return;
setTimeout(outputToConsole, 33); // 33 milliseconds is close to 1/30th of a second
}
b1.on("click", function() {
svg.select("circle").transition().duration(duration).attr("cx",150);
outputToConsole();
});
</script>
</body>
</html>
The last step would be to save each of those outputted svg elements into individual .svg files on disk (instead of just outputting them to the console like in the above example). I haven't tried it yet, but probably one could use something like FileSaver.js. Then optionally the .svg files could be converted into .png files using something like ImageMagick.

Canvas in table cell doesn't work on Firefox

I' try to drawing canvas using example2 taken from http://dev.opera.com/articles/view/html5-canvas-painting/. It works on Firefox 8.0.1 and Opera 11.52.
Then I modified the code put the canvas into a table cell and stop working.
I tried to put canvas outside the table and absolute positioned the canvas on a cell table still doesn't work.
The above problem happened only on Firefox, running well on Opera.
Here's the code
<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Sign-In</title>
<style type="text/css"><!--
#imageView { border: 1px solid #000; }
--></style>
</head>
<body>
<p>Please fill in name and id card no. Then sign-in on provided box</p>
<table>
<tr><td>Full Name</td><td><input name="name"><td> </tr>
<tr><td>ID Card No</td><td><input name="idcard"><td> </tr>
<tr><td>Signature</td><td>
<div id="container">
<canvas id="imageView" width="200" height="100"> </canvas>
</div>
</td> </tr>
</table>
<script type="text/javascript" src="http://dev.opera.com/articles/view/html5-canvas-painting/example2.js"></script>
</body></html>
Any idea?
Well, here is your code in jsfiddle: http://jsfiddle.net/7PRDq/
The problem is almost certainly the mouse handling code giving a bad X,Y in Firefox. If you try to draw a signature in the upper-left corner of the box you'll see that it is drawing with an incorrect offset.
If you make the canvas 2000x1000 instead of 200x100 you'll see the problem much more clearly!
You'll need to find more modern mouse code for FireFox.

my css3 media queries won't work when I move it to another site with https

I try a simple css3 media queries that will change background color when I change the browser to 480px width. It works fine when i put the files on my site, here: http://www.kangtanto.com/css3/ . But when I try the same files on my other site, with https, the media queries just won't work, the background color won't change when I change my browser size to 480px width. it is on my other site at https://dosenjaga.eepis-its.edu/home.html
this is my html code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" media="only screen and (max-width:480px)" href="css3.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Ini hanya mencoba saja lho</h1>
</div>
<div id="content">
Adding the specific code for devices inline might be a good way to use media queries if
you only need to make a few changes, however if your stylesheet contains a lot of
overwriting or you want to completely separate the styles shown to desktop browsers and those used for small screen devices, then linking in a different stylesheet will enable you to keep the CSS separate.
</div>
</div>
</body>
</html>
and this is my style.css file. On my other site I use style2.css, because there is a file with the same name on my server, so I gave it other name but the code is the same.
div#wrapper { width: 800px;}
div#header{
background-image:url(media_queries.png);
height: 93px;
position:relative;
}
div#header h1{
font-size:140%;
}
#content{
float:none;
width:100%;
background-color:#CCC;
}
#navigation{
float:none;
width:auto;
}
and this is my css3.css code
#media only screen and (max-width:480px){
div#wrapper { width: 400px;}
div#header{
background-image:url(media_queries.png);
height: 93px;
position:relative;
}
div#header h1{
font-size:140%;
}
#content{
float:none;
width:100%;
background-color:#8787C1;
}
#navigation{
float:none;
width:auto;
}
}
Thanks,
It is the problem of older versions of IE not the https, CSS3 is not supported in less then IE9. in IE9 it is working fine.
It's solved!!! I need to delete all my browser history by pressing Shift+ctrl+del on my fire

Resources