CODEWITHSUNDEEP
htmlcssfonts
Sean
Sean

Reputation: 6499

Font discrepancies in various browsers, is there a solution to this?

I'm working on a project where the height of the content container is limited, and on a few select browsers (mostly Chrome on Android) the text seems to be breaking in different places, even though almost all font properties seem identical, so far I've checked:

All of which are identical, both in their given and computed values.

This wouldn't usually be a massive problem, but because of the content container height constraint, these discrepancies are causing me a massive headache.

I've managed to replicate the problem in a fiddle with the following code:

HTML

<p>We are not able to sleep or We cannot sleep.</p>

CSS

p {
    font-family: "Times New Roman", serif;
    font-size: 11px;
    font-style: italic;
    letter-spacing: 0;
    max-width: 200px;
}

The text in this example renders on one line in the majority of browsers, however in some the last word "sleep." appears on a new line.

You can see screenshots of this example in a number of different browsers at:

http://www.browserstack.com/screenshots/cf75bb4fa9a22db2e660a0073698be86b55becb6

Is there something I'm missing here? Is there any way to ensure the text will render in the same way accross a number of devices and browers?

Upvotes: 0

Views: 71

Answers (3)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201528

The details of font rendering vary by browser and platform, and they cannot be controlled in CSS. Besides, different computers may have (slightly) different fonts under the same name, or e.g. lack Times New Roman entirely (most smartphones lack it, for example).

As a workaround, if specific line division is crucial, consider writing the text as preformatted (i.e. dividing it into lines in HTML source the way it should appear in display) and using white-space: pre. The drawback is that some lines might hit or even cross the right edge of the area reserved for the element. But if you do not set a background or border, this will be barely noticeable.

Upvotes: 1

Akshay
Akshay

Reputation: 14348

I was able to solve the problem in my browser by replacing the max-width with min-width see this http://jsfiddle.net/79j57L8L/4/

p {
font-family:"Times New Roman", serif;
font-size: 11px;
font-style: italic;
min-width: 200px;
}

Upvotes: 0

Aitor Alejandro
Aitor Alejandro

Reputation: 51

I'm afraid that the only solution here is using an image using width="XXX" or tell the client that is completely impossible to make a web identically on every browsers unless you use disgraceful methods just like using an image instead of text.

Upvotes: 1

Related Questions