Hi (Android, Appcelerator sdk 4.0.0)
I wonder if you have any idea on how to make Verdana render nicely within a webview. Check this ugly layout. The <li> should have the same size, letter-spacing as the other text:
Image samle of the ugly text as seen on Android screen
I have a webview:
var webView = Ti.UI.createWebView({ html: thetext, width: '100%', layout:'vertical', bottom:40, height:Ti.UI.SIZE, showScrollbars:false, enableZoomControls:false }); scrollView.add(webView);Into this webview I am passing "thetext" which is a combination of
"html"=
<p style='margin-top:20px;'><strong>Skärmbilder för CGM-data/ -trender</strong><br /><br /><img src='images/messages/bg_message.png' class='inlinebild'>-symbol, kalibrering behöver utföras.<br /><ul><li>Du behöver kalibrera</li></ul></p></body></html>and
"thetext"=
<html><head><meta name='viewport' content='width=device-width, user-scalable=no' /><link rel='stylesheet' type='text/css' href='css/webviewstyle.css' /></head><body><div style='margin-top:20px; font-size: 22pt; zoom: 50%; width:90%; margin-left:auto; margin-right:auto;'> " + html + "</div>";
The css for the webview is
@font-face { font-family: 'Verdana'; src:url('../fonts/Verdana.ttf'); } body { font-family:'Verdana'; letter-spacing: normal; -webkit-text-size-adjust: none; } li, p{ font-family:'Verdana'; } @media screen and (-webkit-device-pixel-ratio: 1.5) { /* CSS for high-density screens */ body{ font-size: 14px; } } @media screen and (-webkit-device-pixel-ratio: 0.75) { /* CSS for low-density screens */ body{ font-size: 12px; } } /*checka if small screen and low res*/ @media only screen and (min-device-width: 320px) and (max-device-width: 360px) and (-webkit-device-pixel-ratio: 0.75) { body{ font-size: 12px; } }
I have tried a lot of ways to make the fonts render consistant, but still its like some rows are larger or with more letterspacing than others.
I have tried using another font family and I think that worked better. Any other ideas? The customer wants to use Verdana....
Best regards /Tove