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.
Related
I am trying this solution for a star rating.
Can someone please explain why the stars are so much bigger in chrome than in firefox? (I know that webkit and gecko are doing different things from time to time but so much difference?)
And has someone a suggestion on how to fix that?
Update:
This is how big the difference is on my mac:
You are seeing the characters in different fonts in different browsers. The size of a character may well very by font (even when the font size is the same).
The technique uses the characters “★” U+2605 BLACK STAR and “☆” U+2606 WHITE STAR, which are present in a few fonts only. If the font-family property on the relevant element does not mention any font containing those characters, browsers will (or at least should) use some backup font, and different browsers use different lists of backup fonts.
You can make it more probable (though not certain) that different browsers in the same system use the same font for the characters by listing suitable fonts in the font-family list. Even then, the results will vary by system, depending on the set of installed fonts. And in some systems, the rendering may even fail, because no font contains those characters.
This issue could be addressed using downloadable fonts, but that would probably be overkill here.
The practical workaround is to use just images, with a sequence of elements like <img src=star.png alt=star> and <img src=whitestar.png alt=""> or (for better accessibility) a pre-made image that contains a specific number of stars, like <img src=stars4.png alt="four stars out of five">.
I had the same issue and have found that using U+2B51 and U+2B52 ("BLACK SMALL STAR" and "BLACK WHITE STAR") displays consistently between Chrome and Firefox. (Haven't tested thoroughly across other browsers and browser versions yet though.)
May be it's strange for you.. But I dont find any difference in the browsers.
find attached image.
Characters in different browsers may vary. Use image as star. Not char. http://i.imgur.com/I2x2Yld.png use {content:''; background:url(....) no-repeat;}
i have created a header on my website that uses custom font-faces and have applied a size with pixels (61). and for some unknown (to me) reason the font is rendered nearly twice as large in ie9 and tor than in chromium and firefox. there are no other css settings that appear to me to be relevant (e.g. no font-weight:bold or similar settings). other font-faces appear to render close to or exactly the same size between browsers.
i've exhausted my ideas on what is the cause of this.. if anyone knows, i'd appreciate some assistance. you can view the header here: http://www.infiniteeureka.com
- the cream words 'infinite eureka' are the ones in focus; the multi coloured smaller words render as desired in both browsers.
Firefox has known issues rendering web fonts. I don't really have time to research your problem, but they have Mozilla-specific CSS to deal with these bugs, font-feature-settings in Firefox. I'd start by reading here: https://developer.mozilla.org/en-US/docs/CSS/font-feature-settings?redirectlocale=en-US&redirectslug=CSS%2F-moz-font-feature-settings
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 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.
In chrome the font appears to be 1px smaller than FF and IE and I cannot see why. The font used is "Georgia" and there are no specific browser commands in the CSS or HTML so I cannot figure out why chrome is displaying it different.
Has anyone come across this before?
Thanks.
This could be based on various factors. Chrome and Firefox use different font rendering engines, and they also differ in how they interpret ClearType font settings within Windows. As well, different browsers apply different default CSS styles to unmarked documents which can cause discrepancies in font-size, among other things. You could try using something like a CSS Reset stylesheet to possibly quell some of the problems, http://www.cssreset.com/ but there's no guarantee that will fix it.
if you want to achieve the same style for every browser, you should try this:
sitewizard
it helped me a lot when i came across the issue. Maybe there is a more elegant solution for the problem but this works definetly.
Text will always differ somewhat between different browsers, and between different systems. Even the same browser on the same operating system may give different results, as there are text rendering settings in the system that may affect the apperance
Also, font sizes aren't really measured in pixels, but in points, so there might be a difference in how browsers translate pixel sizes to points.