Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Font sizes in UIWebView does NOT match iOS font size

Here's a UILabel which says "About". Set at exactly 17.7 in iOS.

Below it a UIWebView which also says "About". Also set at exactly 17.7 using css.

enter image description here

They don't match.

How to fix this correctly?

It is bizarre that in Apple's own UIWebView, the size basis is different?

Html to test...

<html><head>
<style type='text/css'>
body {
margin: 0px;
font-family: 'SourceSansPro-Light';
font-size: FONTPOINTSpt;
}
html { -webkit-text-size-adjust:none; }
</style></head>
<body leftmargin=0 topmargin=0>
About
</body></html>

Behavior is identical on device or simulator.

(Note, from here I learned the ratio is, perhaps 72.0/96.0.)

like image 690
Fattie Avatar asked Jul 05 '16 12:07

Fattie


1 Answers

If you want a 1 to 1 relationship between the font size that the UILabel uses and the font size that the UIWebView uses (via CSS) you have to use px instead of pt when defining the font size in your CSS.

Checkout this example HTML / CSS:

<html>
    <head>
        <style type='text/css'>
            body {
               font-family: 'SourceSansPro-Regular';
               padding: 0
            }
            .point {
                font-size: 17pt
            }
            .pixel {
                font-size: 17px
            }
        </style>
    </head>
    <body>
        <p class="point">About (17pt)<p>
        <p class="pixel">About (17px)</p>
    </body>
</html>

When you add a UIWebView and a UILabel to your UIViewController and load the above HTML to the UIWebView and set the same font to the UILabel:

override func viewDidLoad() {
    super.viewDidLoad()

    let webView = UIWebView(frame: CGRect(x: 25, y: 50, width:325 , height: 90))
    view.addSubview(webView)

    let filePath = NSBundle.mainBundle().URLForResource("test", withExtension: "html")
    webView.loadRequest(NSURLRequest(URL: filePath!))

    let label = UILabel(frame: CGRect(x: 25, y: 150, width: 325, height: 40))
    label.font = UIFont(name: "SourceSansPro-Regular", size: 17)
    label.text = "About (UILabel set to 17)"
    view.addSubview(label)
}

You get the following output:

enter image description here

like image 98
joern Avatar answered Sep 22 '22 07:09

joern