I am trying to use web fonts in my Windows phone application. From the comments I have read, I understood that it is not possible to use fonts embedded into XAP file. So, I am trying to open a webpage that contains Google Web Fonts which is at: http://omercelik.com/e.htm
When I open this page from Internet Explorer on phone, it shows the font correctly. But when I try to load this page from a webBrowser control, it doesn't loads this page. I don't do anything else but this on my app:
private void PhoneApplicationPage_Loaded_1(object sender, RoutedEventArgs e)
{
webBrowser.Navigate(new Uri("http://omercelik.com/e.htm"));
}
So, still no success to show custom fonts in my application. There are suggestions to host font remotely and cache but even without caching, I couldn't show fonts. Can someone provide a working example of this?
It is possible to embed truetype fonts in Windows Phone 8 webapps by setting the embeddable tag on the font to 0 using software like TTFEdit. This might prove a more reliable and elegant solution to your problem.
See my answer to another Stack Overflow question here for all the details.
When using the WebBrowser control, it's very important to include the HTML doctype if you want to get proper IE10 behaviour (ie. not quirks mode) in Windows Phone 8...
<!DOCTYPE html>
<html>
<head>
<style>
#import url(http://fonts.googleapis.com/css?family=Tangerine);
</style>
</head>
<body>
<div id="para" style="font-family:'Tangerine', serif;">Making the Web Beautiful</div>
</body>
</html>
For future reference, Windows Phone 7's WebBrowser control (based on IE9) does not support Web Fonts.
Related
I am trying to use jsPDF.umd.js in SharePoint to create some pdfs in an enterprise environment.
Sadly I have to rely on IE11 in this environment.
I am loading the jsPDF with script tags
<script type="text/javascript" src="/sites/xxxx/polyfills.umd.js"></script>
<script type="text/javascript" src="/sites/xxxx/jsPDF.umd.js"></script>
and try to create an object with
new jspdf.jsPDF();
This works in Firefox and Edge, but Internet Explorer seems to not load the jsPDF.umd.js at all.
The error seems to be
SCRIPT1047: In strict mode, function declarations cannot be nested inside a statement or block. They may only appear at the top level or directly inside a function body.
File: jsPDF.umd.js, Line: 744, Column: 5
I am at a loss, because this works in ff and edge, but not in IE.
The sample (http://raw.githack.com/MrRio/jsPDF/master/#) site works with all browsers.
Is there a way to disable strict mode?
I never had problems with use strict before - though I do not know if and where it is activated.
I am not JavaScript developer - so maybe there is a completely different issue at work here.
edit:
the issue seems to be IE with javascript. I commented the lines with error from jspdf.umd.js out, and now I am getting a syntax error at line 847
let protection = 192;
maybe IE is using a pre ECMAscript 5 engine?
edit2:
navigator.userAgent
outputs
"Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.3; WOW64; Trident/7.0; .NET4.0E; .NET4.0C; .NET CLR 3.5.30729; .NET CLR 2.0.50727; .NET CLR 3.0.30729; Zoom 3.6.0)"
so I think I am in compatibility view - switching Document Mode seems to fix the issues - I don't know how to proceed from here yet, because this cannot be a general solution for all users.
edit3:
so the page contains
<meta http-equiv="X-UA-Compatible" content="IE=10">
so I will need to change that I guess.
Maybe these articles will help:
https://www.dannyjessee.com/blog/index.php/2020/03/rendering-a-single-sharepoint-page-in-ie-using-edge-mode/
https://paultavares.wordpress.com/2015/01/20/how-to-render-a-sharepoint-page-in-ie-using-edge-mode-without-changing-the-master-page/
From the description, I understand that JSPDF can work with the IE 11 or Edge document mode. But Sharepoint site contains the meta tag that loads the site in the IE 10 document mode. That breaks the JSPDF functionality.
To fix the issue, you need to load the site in the IE=edge mode.
You simply need to update your SharePoint's master page to target the latest version of IE, to update your master page, follow these simple steps.
Step 1: Download master page file.
Go to Site Settings.
Then to master pages and page layouts.
Look for the HTML version of your master page. If you are using Seattle as a master page for the site, look for the seattle.html file. If you're using the Oslo master page, then look for the oslo.html file.
Step 2: Update the master page code.
Open the downloaded file into a text editor of your choice, and look for the following meta-tag.
<meta http-equiv="X-UA-Compatible" content="IE=10" />
Update the value of the content attribute to have:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Now Save the file.
Note: The meta tag might be placed multiple times in your master page file, make sure to update them all.
Step 3: Upload master page file.
On the Master pages and page layouts click the ribbon bar, and click Upload Document button.
Now Choose the file you have just edited by clicking the Choose File button, then click OK to upload.
Another dialog will appear asking you to enter some information about the master page. Don't type anything, just click Check In button.
One last step you need to do is to make your changes available to all of your site visitors, which is to publish this master page.
To do that, Select your master page, and click the Publish button from the ribbon bar.
To proceed with publishing click OK on the next dialog.
Reference:
IE Compatibility with SharePoint and Office 365
I made changes in the master page of my SharePoint site. I have added a meta tag in my header like so:
<meta http-equiv="X-UA-Compatible" content="IE=8,9,10,11" />
and I've also changed the doctype, but the emulation is still rendering in IE9 document mode.
Attached is the screenshot.
Please let me know where I need to make changes. This site is using custom master page. I have updated it in the Custom as well as the V4 master page but no luck.
A few suggestions:
Set the content attribute of the <meta> tag to "IE=8" instead of "IE=8,9,10,11".
Make sure that the <meta> tag containing your IE rendering directive is the first <meta> tag in the header.
To prevent the F12 developer tools window from forcing the page into a particular document mode, close all instances of Internet Explorer, then start it up again and revisit the site without the F12 developer tools open. Open the F12 developer tools to check the page document mode only after the page has loaded.
I'm using phantomjs version 1.9.7 which I believe is supposed to support web fonts. I have inserted the font with google web fonts however it is just displaying my fallback font when I automate a screengrab. The webfont is displaying fine in all my browsers. Are there any workarounds for this?
I have struggled with this issue for several hours. Well, there is a simple reason for this controversy: user-agent!
Some services such as Google Fonts are returning different CSS content based on user-agent. When you call a webpage which includes Google Fonts with default PhantomJs user-agent, Google would return TTF version which is supported in PhantomJs.
However, if you set a custom user agent (Chrome, FF, etc.), Google Fonts would return .woff2 version. .woff2 is not supported in PhantomJs 2.x. Obviously, fonts are not going to be loaded.
So, for users who are testing PhantomJs without setting a generic user-agent, Google Fonts is working. If they set for example Google Chrome user-agent, it does not work.
So, you have two options:
Avoid setting a custom user-agent if it is possible.
Avoid using dumb-smart font providers like Google Fonts which does not outputting all font versions in CSS and let the browser decide what it needs.
I believe your belief is wrong :-)
The 1.9.x series of Phantom is still based on the old WebKit code, which people have been reporting web font problems with all along.
The good news is that a technical preview of Phantom 2.0 is apparently about to be released; https://github.com/ariya/phantomjs/wiki/PhantomJS-2 is intended to be the best place to follow status. And, from memory, someone reported success with web fonts using it (but I may be wrong on that as a quick search of the mailing list archives didn't turn up a definitive message saying web fonts work... but they definitely should).
BTW, SlimerJS is an almost drop-in replacement, based on Firefox's Gecko engine, and does support web fonts (though some problems in corner cases, IIRC).
I just had the same issue with PhantomJS 2.1.1.
In my case I was working under a proxy that was blocking PhantomJS from loading the font from Google. After connecting to an open network it rendered correctly.
I tried all fixes listed here to no avail, but here is a work around. Either option resolved this for me.
First Option:
Install the missing web fonts on the local computer that is running PhantomJS. Most web font providers including Google allow you to easily download the fonts for local install. No change needed at the target URL.
Second:
I sites I have control over, I was able to resolve by splitting up the link tags.
Change This from:
<link href='//fonts.googleapis.com/css?family=Roboto:400,500,700|Open+Sans:400italic,700italic,400,700' rel='stylesheet' type='text/css'>
To:
<link href='//fonts.googleapis.com/css?family=Roboto:400,500,700' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700' rel='stylesheet' type='text/css'>
I know this is not an ideal solution but either one works, It depends on if you can modify the target URL.
I have tried this on numerous pc's and are receiving the same error. My webbrowser control isnt displaying javascript or jquery.
Here is a example:
when i visit this url in my browser: https://binarykings.co.uk/traderoom-aspx, it looks great with the charts and prices etc.
example: http://i.imgur.com/1Lmq4em.png
same in internet explorer: http://i.imgur.com/3KP864X.png
however in my vb.net webbrowser control it looks like this: http://i.imgur.com/qjme2Yg.jpg
What is causing this ? Its not just this site but any other site that has a similar way of displaying things via jquery/javascript.
I do have script errors suppressed however when i disabled this and clicked yes to the errors manually it still displayed the same empty page.
Thanks
The WebBrowser control uses the Internet Explorer rendering engine. But by default, for compatibility reasons, it is stuck using the IE 7 rendering engine, even if you have a later version of the browser installed on your computer.
There are a couple of ways to convince it to use a newer version of IE to render the page. One involves editing the registry, while the other involves modifying the web page.
In general, it is best to avoid attempts to solve local problems with global solutions like registry edits. There might be another app running on the same machine that uses the WebBrowser control and relies on the behavior of the IE 7 rendering engine. If you go changing global settings, you'll mess up that other app.
Therefore, the best solution, if possible, is to edit the web page. This is quite simple, and probably a good idea anyway. All you need to do is add the following code inside of the <head> section:
<meta http-equiv="X-UA-Compatible" content="IE=9" >
If you absolutely must use the alternative approach of editing the registry, you'll find the information you need here in the documentation.
I would like to prepare my site for windows 8 pinning and have been reading some documentation on how to add the various images and could figure out that it could be done by using metadata and according to instructions and help on this site I could actually build the following meta tags but i couldn't figure out where I can call the browserdetect.xml file assuming I have the file located at mysitee.com/upload/win8/browserdetetct.xml and the images in the same folder
<meta name="application-name" content="MySite"/>
<meta name="msapplication-TileColor" content="#2d90c6"/>
<meta name="msapplication-TileColor" content="#2d90c6"/>
<meta name="msapplication-square70x70logo" content="http://placehold.it/70x70/000000/ffffff&text=MySite"/>
<meta name="msapplication-square150x150logo" content="http://placehold.it/150x150/000000/ffffff&text=MySite"/>
<meta name="msapplication-wide310x150logo" content="http://placehold.it/310x150/000000/ffffff&text=MySite"/>
<meta name="msapplication-square310x310logo" content="http://placehold.it/310x310/000000/ffffff&text=MySite"/>
Any help please ?
Update: Microsoft Edge on Windows 10 and Windows 10 Mobile now only uses /browserconfig.xml, so stop including meta tags.
I see that Microsoft has — a bit prematurley — updated their wizard to Windows 8.1. Which is not backwards compatible with Windows 8.
What you need (in addition to my comments in the other post) is the older code with a 144x144 px image:
<meta name="msapplication-TileImage" content="/tileimage-144.png" />
That will work in Internet Explorer 10 on Windows 8 in conjunction with the two backwards compatible tags you already have:
<meta name="application-name" content="MySite" />
<meta name="msapplication-TileColor" content="#2d90c6" />
Note that you should not use application-name unless your site is actually a web application. (Per the HTML5 specs.)
You can test the Windows 8.1 (Internet Explore 11, actually) stuff in a virtual machine. Microsoft is handing them out for free over at http://www.modern.ie/en-US/virtualization-tools#downloads
Further enhancements: Internet Explore 11 does not actually need the tags to be present in the document. so you can save users who do not intend to pin your site the bandwidth (thus gaining performance) by including a browserconfig.xml in your root (eg. example.com/browserconfig.xml). IE 11 will read this file when a user tries to pin a site and load the resources needed from there instead of from the meta tags. So what you do is include the two/three tags IE 10 needs, and put the new IE 11 tags in your browser config file. Read up on http://msdn.microsoft.com/en-us/library/ie/hh772707%28v=vs.85%29.aspx (ignore the bits where it tells you to include a meta tag to load the config file. As long as the file name is browserconfig.xml and it is on your root, it will automagically work.)
Making it all darn perfect: Windows 8 requires no padding in their image, only a transparent background. Windows 8.1, however, expect ⅕ of the tile images to be left transparent for padding. You will stick out like a sore thumb amongst the other applications if you do not pay attention to the padding.
Live example: I implemented this on my own site over at Slight Future if you want an working (as of the Windows 8.1 Preview 1) example.
Final thoughts: Why Microsoft have to introduce something new for every single version of Internet Explorer / Windows, I can’t understand. Nothing is backwards compatible. For IE 9 / 10 and pinned sites on the Windows 7 / 8 desktop taskbar, you need a favicon in four different sizes.
You can follow the step-by-step tutorial / wizard at http://www.buildmypinnedsite.com