Question

I have the following text:

★ ★ ★ ★ ★

consisting of five stars. (character 9733)

I need to have it the same (or approximately same) letter-spacing in all browsers. So far I have tested it in Opera, IE9, FF8 and Chrome 16.

In IE9 and FF it looks the same, in Opera it’s slightly different and Chrome is the most problematic one. See the image:

In this example CSS property letter-spacing is set to “0px”.
Is there any cross-browser way to force equally wide spaces between characters?

I would appreciate any help.

**EDIT: SELF-SOLVED

**EDIT2: Original question was edited to make it more clear what was actually the issue.

Answer 1

I am well aware of the different font rendering in various browsers, but the main issue was the different letter-spacing.

I solved it with JS this way (pseudocode):

expectedOffsetWidth = [number of letter] * [font size in pixels];
offsetDeviation = expectedOffsetWidth - wrapperElement.offsetWidth;
wrapperElement.style.letterSpacing=Math.round([original letter spacing] + parseInt(offsetDeviation) / [font size in pixels])+"px";