I have a problem with some text rendering with the HTML5 Canvas that you can see at http://jsfiddle.net/qcVAV/.
It seems that Firefox and Internet explorer measure the text and fill it consistently, but Chrome doesn't.
In the provided link, you'll see that Internet Explorer and Firefox appear the same, and the measureText call shows that the provided text measures to 1679. In Firefox there is extra precision. For Chrome, however, the text measures to 1651.
I tried adding in the css reset http://cssreset.com - as I thought that maybe the css could be throwing things off.
What else can I do (if anything) to get text to be rendered consistently?
Sorry, you're out of luck here!
Text is not only measured differently on every browser, it scales and renders vastly differently, too! Try multiplying the font size by 4 and mutliplying the scale by 4, the results might surprise you. Kerning in some browsers will be off, and Opera looks awful when a scale is applied at all.
The only way to make measureText consistent is to pre-compute.
The only way to make fillText consistent is to use images instead of text. It's must faster, anyway.
Both of these are untenable if the text is extremely dynamic, but if you only ever write say, less than 100 different pieces of text in your app, images are probably your best bet.
Related
I am stuck in a problem and require your guidance.
We want to display 100% same text in Mozilla, Chrome and IE11.... same word spacing, line height etc.
So far what I learned is all 3 browsers use different render engines and different font file extensions.
Is there anyway we can force all three browsers to use same font rendering engine or same font extension to achieve 100% accurate results?
Already tried the following trick in CSS but no result:
text-rendering: optimizelegibility;
The only way to control the rendering engine used is to make pre-rendered images of text and use those instead of real text. Use alt attributes on the images, so screen readers and search engines etc can make sense of it too.
Even with images, browsers on different systems may scale it slightly differently. You cannot guarantee every pixel will be identical (and you shouldn't try).
I'm attempting to use word-break to break a word with long character that exceeds its parent's width.
In this example, I have a <div> with width:43px and word "play" in it. In chrome, the word fits, but in Firefox, the word got is split over two lines.
Chrome Screenshot
Firefox Screenshot
http://jsfiddle.net/chenx/7rYAm/
Here is the jsfiddle, you can try to open it in both Firefox and Chrome to see the difference.
What I want is, they're both output the same result. I'll prefer Chrome as the correct result.
This could affect my apps, as they'll screenshot the view to canvas, and I don't want the customer complaining about output difference between browsers. What's the best practice here? Can word-break be standardized across browsers?
Thank you!
word-break is standardized. What's not standardized is how wide the word "play" will be. It depends on the font used, the exact font rasterization algorithm used, on antialiasing settings, and so forth.
On Windows, Firefox and Chrome use two different OS-provided font subsystems (GDI and DirectWrite), which have different rasterization and antialiasing behavior, leading to different widths of text.
The best practice in situations like this is to not use an overly small width for the parent and probably to test what happens when a user with poor eyesight forces a larger font than you asked for.
This is what I dislike about browsers doing their own thing. Firefox uses word-break: keep-all. On the other hand, Chrome uses word-break: break-word.
I've spent eons diving into #font-face issues for RTL languages, font-rendering on different browsers, PDF support, and so on.
My objective is to have CSS-compatible Arabic (a RTL language) text on an HTML document, which , when rendered into a PDF, looks, renders, and wraps exactly the same on the PDF as it did on the HTML webpage, regardless of the user's browser or platform.
I've been using #font-face but it turned out that Windows machines render fonts a little wider than they do on a Mac, while the PDF generator is browser-independent and seems to render fonts more like a Mac does. So what happens is that Windows users see one line of text, while the PDF ends up having the last word on that line wrapped over onto the next line, and so the PDF is not exactly what the Windows user expected it to be.
I thought at one point that Cufon could be the solution because apparently it looks the same cross-browser - but I think it doesn't support Arabic? I tried generation PDFs using wkhtmltodpf and PhantomJS, but despite being awesome 'virtual' browsers, both use Webkit QT, which renders text differently from Windows, so once again the PDF that was generated had line wraps or text width that wasn't the same as the original HTML document. Basically, my question is:
What's the best way to ensure that whatever the text the user sees on their browser is exactly what they will see on the PDF? I don't really need it to be exactly pixel-perfect, as long as the text at least follows the same line wraps, with a given width for the containing div. I think the only thing I really need to make sure of is that font hinting is uniform. Or does it all come down to using images?
On an aside, does HTML5 have some sort of cross-browser font-rendering?
I can suggest you two things:
Use em´s for the size of your fonts. em´s are a relative measure.
Don´t use sIFR or anything based on flash rendering due that it won´t work on mobile devices that doesn´t support flash.
There is no way to render the exact same thing across all existing web browsers, that will be like being in heaven. But as we are not there, what I suggest you too is to reduce a little bit the font until it fits your goal.
Regards.
I'm having some trouble with font's on cross-browser compatibility. FireFox and Chrome look virtually the same, maybe a bit smoother on FireFox, but on IE9 it seems condensed and a bit bolder? I've used every CSS value for font to try to set a default for every browser but nothing works. Any ideas what IE9 is doing to distort the font? I do like the way it looks in IE9 but I want it to match between browsers.
It's well documented here that IE9 ignores the OS-wide settings for font smoothing (aka anti-aliasing). Even if font-smoothing and ClearType are disabled in Windows, IE still shows anti-aliased fonts, which some users struggle to read, especially at small font sizes.
Microsoft says,
Internet Explorer 9 takes advantage of Windows DirectWrite and Direct2D APIs to render hardware-accelerated text using sub-pixel Microsoft ClearType font positioning. Recent enhancements to ClearType help improve the readability of text on liquid crystal displays (LCDs) by increasing the sharpness of the tiny details of displayed text. The implementation of sub-pixel positioning in Internet Explorer 9 is useful for web developers because text placement and line breaks will remain constant across different users' configurations
However, there are ways to disable this (mentioned here) but it is a client side technique and your code has no control over it.
The font rendering is dependent not only to the browser but also the operating system.
Please see the following two articles which are explaining the difference and what you can do with CSS to overcome it:
http://css-tricks.com/font-rendering-differences-firefox-vs-ie-vs-safari/
http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/
i recently extended the lovely jquery "flot" charts plugin a bit...goal is to draw what would usually be in the legend directly on the chart.
it looks only a bit rubbish as IE seems to render the font quite weakly.
see here, left side is IE, right side is Firefox:
issue http://i56.tinypic.com/34oq4ci.png
btw...function to draw the text used is fillText()
how can i whip IE into shape?
thanks!
The sad fact is that, as of now font discrepancies between all the browsers exist in Canvas. What looks one way in Firefox will look another way in IE. What looks one way in Chrome will look another way in Safari (even though they are both webkit based)
Change the font to a "safer" one and see what happens. For instance:
ctx.font = "72pt verdana"
ctx.fillText("lalalala", 0, 72);
Ought to render the same in both IE9 and FF4.
That isn't the last of it of course. If you are doing things like scaling and rotating your fonts you'll encounter even weirder problems. Try this in Opera or the non-dev version of Chrome: http://simonsarris.com/misc/scaleText.html
(screenshot of that problem)
So the solution is to simply find a font that ends up looking the same on the browsers you want to target (by trial and error, start with the web-safe font list), and try to never both scale and rotate the canvas before calling fillText. There may even be other transformations that cause odd effects in different browsers, so you should try your font on a simple case and see if it does truly look different.