I am really stressed out with this, i have built an entire designer with Fabricjs, gone through some right hoops with the text to make it work how it's needed. The problem is now when the data from the canvas is sent to the server for a full resolution render with NodeJs (fabricjs in node) the fonts are coming out looking different to they do in the browser.
All the fonts are installed on the server, and the correct font does render, it just seems to have different spacing between the characters even though the fabric version is the same and all the extension code is the same on browser and server side, all the TTF fonts are the same etc etc
Here is the browser version:
And here is the node js version:
As you can see the font is correct on the node one compared to the browser one, but it's being rendered slightly differently.
Is there a solution anyone knows of to fix this?
I don't believe that there is any way to solve this problem when using fabric.js
Text in fabric.js can be scaled arbitrarily, but then it is rasterized and displayed as a canvas object like any other image.
You can see in the fabric.js demos that the text will stretch like an image until your input is complete, then it re-renders to a new image at that scale.
Knowing that this is how fabric.js handles text, it is possible to select two scales that produce quite different results:
In the image above you can see that the two fonts are pretty much the same size, but the one on the right (slightly larger) has been rasterized such that it appears to have a bolder appearance. It's the best example I could reproduce with limited time.
This is why rendering the fabric.js objects in your browser at a smaller resolution than the server will lead to the font appearing slightly different.
If you try rendering the browser version at the same size as the server you are likely going to get the same results.
Related
I am trying to make a copy of the popular browser game Travian.com. I am currently working on the maps and I was able to get the farms overview image as a png.
What I am trying to accomplish with that map is:
Each element (farm) should be clickable) and redirect to that specific farm page.
As you could see on the map, farms are not just simple squares.
Once I had the farms.png picture, I used on online tool to convert a png into a .svg file. Using a free software, I was able to draw circles around each map to build my svg.
This is the result:
I recently read about canvas and I was wondering if canvas would be a better option in my case rather using svg?
You need to try it yourself and see if it gets redrawn quickly enough that the game is sufficiently responsive for you. If the map is very detailed, the redraw may be too slow and make your game feel slow. You really need to try it and see. If it's too slow for you, then you may need to either:
use bitmap images, or
keep the maps as SVGs, but render them to a Canvas on first load. This way they'll be sharp at whatever resolution screen the user has.
I am experiencing two weird things happening with svg rendered in safari (works fine in Chrome/Edge/FF and heck even IE)
Lines not defined in SVG will appear and disappear randomly when panning around.
Lines defined in SVG might disappear randomly when panning around.
Not really that easy to describe so I made a video for it
https://youtu.be/BqlItab0k_g
I did not use any fancy SVG feature like script or media query. The only elements used are text/path/rectangle.
The SVG is generated by me and optimized using SVGO
[Codepen](https://codepen.io/alt22247/pen/vwzBmL)
The svg is base64 encoded since I can't upload svg to code pen. Had to use code pen instead of SO built in since the base64 encoded img text exceed SO limit. Feel free to decode it back to text.
I can't think of any way to mess up the SVG without causing a parse error so I believe this is a Safari bug. But we need to support Safari regardless (typical life of a web dev).
So the question is: What is causing this and is there any work around I can do rather than wait for Apple to fix it 10 years later?
Does anyone know if there is a workaround for this? Internet Explorer 10 and Window phone 8 are not able to correctly scale background SVG images when a user zooms. Looks like IE rasterizes the SVG on load.
Here is an example: The first image is the SVG as a background image. Zoom in on a MS Surface or Windows 8 phone and you'll see it blurs horribly.
The second image is the same SVG as an img tag. Zoom this on a Surface or Windows 8 mobile phone and it scales as you would expect (nice and clean).
Is there any property that can be added to make IE10 behave? Or is it merely a case of waiting for the folks at Redmond to fix it?
The problem is that IE, and other browsers such as Firefox rasterise the SVG before displaying it, so it will become blocky when zoomed.
The easiest way to fix this is to make the SVG file larger than is needed. For example double the size, or more if the user is likely to zoom in further. You can then resize the SVG image with CSS to display it at the correct size. This way the image will be naturally larger, so wont become blocky, unless you zoom in even further. At default zoom level the image is scaled down rather than up, which browsers usually handle better.
Edit: You can find further info on this issue under the “SVG and CSS Backgrounds” heading at http://dbushell.com/2012/03/11/svg-all-fun-and-games/
I have been making my own webfont taking as a starting point articles from web designer depot and intridea.
I know different engines render fonts differently and but the issue I'm having is that firefox renders the font higher than chrome - at the size I am displaying the font this is very noticeable (3 or 4 px - which on a button means they're totally misaligned).
I have also referenced Github's octicon documentation - when checking out how octicons compare browser they look great! No noticeable difference as far as I can see. How did they achieve this?
I am using inkscape and have tried a couple of different svg starter templates. Setup is Set width: 1024 and have tried the icons at various sizes with no different outcome. i.e. 512pt square and aligned just under the baseline.
My question is what rules do I need to impliment when creating a webfont to get the smallest difference between browser rendering of the font?
This is a complicated question that involves something called vertical metrics. A font has three sets of these. the first set, found in the 'hhea' table, are generally specific to Mac. The other two sets, found in the 'OS/2' table relate to Windows (and Linux). The idea is to get these values equalized. Our Generator has a feature called oddly enough 'Fix Vertical Metrics' which does a best guess at these. Note that Github used the Generator for finishing their icons.
I know this doesn't relate specifically to SVG fonts, but I'm pretty sure this is where your problems lie. Having different vertical metrics values screws up the baselines across platforms.
Some reading:
http://blog.typekit.com/2010/07/14/font-metrics-and-vertical-space-in-css/
http://webfonts.info//webfonts-know-how/part-1-we-need-talk-about-line-height
http://code.google.com/p/googlefontdirectory/wiki/VerticalMetricsRecommendations
There's a webapp, icomoon : http://icomoon.io/app/
It make the job pretty well but you have to test the rendering of the different icons.
They offert a lot of icons if you don't want do design everything.
I had the same problem, and solved it by manually setting the metrics for all three types.
You can see my working solution with screenshots of the settings here: https://stackoverflow.com/a/20609766/955413
I used the Icomoon App to create the Emoji icon font as well as for creating custom icon fonts on a per project basis.
The Icomoon App allows you to do each of the following :
Get one or more icons from several popular icon fonts
Upload other fonts, which may be icon fonts but also regular fonts
Upload SVG files to use as icons
Combine any number of icons from any number of available fonts
Set the UNICODE hex value for whichever characters you need
Export and/or save the font set you create
For more details, see Create webfont with Unicode Supplementary Multilingual Plane symbols.
I've placed an image on top of a div. I'm trying to blend the image into the div (The div is a solid color). In Google Chrome, it looks great! The colors blend perfectly. In IE 7, however, the colors show a hard line even though they should be the same color! After some examination (a print screen put into paint.net to check the actual RGB values), IE 7 is actually lightning up my image.
The blend has to look seamless. Google Chrome was fine with this thus far. Any ideas why IE 7 wont display the color right?
The two browsers are using different rendering engines. There are minor differences between them in how they render graphics, particularly jpegs.
The differences are minor but unavoidable.
Most of the time it goes unnoticed; it only makes an appearance in cases like yours when you try to position it against an element with a solid background colour that is supposed to be the same.
You may be able to resolve the issue by using a different image format. Try saving the image as a PNG. PNGs tend to be rendered more accurately between the browsers than jpegs, so that might be enough to solve your problem.
If that doesn't solve your problem, you could try using PNGs alpha transparency feature to produce an image with a fade to transparent at the edge, and then overlap the background colour behind it. This will definitely give you a smooth transition, but is a bit more technical, so harder to achieve. It will also give you problems with older versions of IE (IE6 for sure, I think you'll be okay with IE7), as they had some major bugs with PNG transparency. (If this is an issue for you, there are work-arounds for this; google IEPNGFix for more)