Menu
I am getting incorrect line height rendered when using -webkit-text-size-adjust CSS property in UIWebView under iOS 5 and iOS 6. There seems to be a bug in iOS 5 and also in iOS 6, but the behavior is different, and I am trying to fix the presentation so that it works on all IOS versions.
What I am trying to achieve: I am loading the following HTML code into a UIWebView. The code merely sets the font size, the line height, and the text size adjustment on all text.
<html><head>
<style language="text/css">
body {
-webkit-text-size-adjust : 50%;
}
p {
font-size: 2em;
line-height: 3em;
/* line-height: 150%; */
}
</style>
</head><body>
<p>Text text text... </p>
</body>
The value 50% of the attribute -webkit-text-size-adjust should reduce (by 50%) the size of the entire text. It makes sense to reduce both the font size and the line height at the same time, or else the text will look quite ugly. Now, it seems that neither iOS 5.1 nor iOS 6 do this consistently. (In my application, I have to use the attribute -webkit-text-size-adjust because the user should be able to change the text size.)
The behavior of iOS 5.1 is to reduce the font size; the line height remains at the same value. So iOS 5.1 will interpret the above HTML as if I had written font-size: 1em; line-height: 3em;. A UIWebView on iOS 5.1 will show small text with huge gaps between the lines.
The solution for iOS 5.1 was to write line-height: 150%; rather than line-height: 3em. Then iOS 5.1 kept the line-height value unchanged at 150%, while the font size was reduced. The text display was therefore correct.
The behavior of iOS 6.0, as follows from my tests, is to reduce both the font-size and the line-height values, -- even if the line height value is given in percent. (This seems to be a bug.) Therefore, iOS 6.0 will display this text as if I had written font-size: 1em; line-height: 75%;. The result is that the line height is computed to be 75% of the font size, i.e. the lines of text are so close together they almost overlap.
The solution on iOS 6.0 is to write line-height: 3em;. But this will not work on iOS 5.1.
I don't think there is a CSS attribute that is sensitive to the iOS version... How can I make my application work on both iOS versions?
984
Have you tried setting it like this { line-height:1.5 }. It's equates to 3 with a 2em font, but tells the device to render the line-height at 1.5x greater than the font, rather than a hardcoded em value.
EDIT: still don't think it's a bug. I don't think you're telling the CSS enough before firing the size-adjust.
The following code looks identical between both iOS 5.1 and 6.0:
html { font-size:40px }
body {
font-size:0.5em; /* without this.. */
-webkit-text-size-adjust : auto; /* 50% is arbitrary */
}
p {
font-size: 2em;
line-height: 1.5;
margin-bottom:3em;
}
<p>Text text text...</p>
<p>Text text text...</p>
<p>Text text text...</p>
<p>Text text text...</p>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
