I have an ASP.Net MVC site that I want to render some custom HTML 5 canvasses in. I am getting a strange issue with the server serving up extra characters that are not in the source code.
In order to use an HTML 5 canvas in IE 8 you have to add the following tag in the html head:
<!--[if IE]><script src="../../Scripts/excanvas.js"></script><![endif]-->
For some reason this is served up as:
<!--[if IE]>IE]><script src="../../Scripts/excanvas.js"></scr<![endif]-->
Of course the duff markup causes the excanvas script to not be loaded by IE. I can't understand why the line gets garbled. I have the following doctype which is documented at http://www.w3schools.com/html5/tag_doctype.asp:
<!DOCTYPE html>
I'm not familiar with using HTML 5 or the new doctype so I'm suspicious of it. I'm also hosting on Apache with Mono so maybe that's what's garbling the line.
The page in question is at: http://openancestry.org/FamilyTree/Simpsons
Anyone seen this before or know why I cant use the "if IE" syntax?
UPDATE:
Well I'm pretty sure it's either Mono or Apache thats garbling the HTML so I've used the workaround below which adds a compatibility meta tag for IE8 and includes excanvas for any IE that predates IE9.
I'd still appreciate any answers on why the HTML gets garbled.
<% if (Request.Browser.Browser.Contains("IE") && float.Parse(Request.Browser.Version) < 9) { %>
<% if (float.Parse(Request.Browser.Version) > 7) { %>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<% } %>
<script type="text/javascript" src="../../Scripts/excanvas.js"></script>
<% } %>
Before I answer, I want to point out that you are missing type="text/javascript" in your example.
It is possible that the ASP.NET parser in Mono is mangling your comment. What version of Mono are you using (and what platform I suppose).
I just tried this on Mono 2.10 on Mac and did not have this problem.
Related
I'm trying to create a pdf from a html page using wicked_pdf (version 1.1) and wkhtmltopdf-binary gems.
My html page contains a calendar emoji that displays well in the browser whatever font I use
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv='content-type' content='text/html; charset=utf-8' />
<style>
unicode {
font-family: 'OpenSansEmoji', sans-serif;
}
#font-face {
font-family: 'OpenSansEmoji';
src: url(data:font/truetype;charset=utf-8;base64,<-- encoded_font_base64_string-->) format('truetype');
}
</style>
</head>
<body>
<div><unicode>📅</unicode></div>
</body>
</html>
However, when I try to generate the PDF using the WickedPdf.new.pdf_from_html_file method of the gem in the rails console,
File.open(File.expand_path('~/<--pdf_filename-->.pdf'), 'wb+') {|f| f.write WickedPdf.new.pdf_from_html_file('<--absolute_path_of_html_file-->')}
I get the following result:
PDF result with unknown character
As you can see, the first calendar icon is properly displayed, however there is a second character that is displayed, we do not know where it's coming from.
I have investigated through encoding in UTF-8 and UTF-16 and surrogate pair as suggested by this related post stackoverflow_emoji_wkhtmltopdf and looked at this issue wkhtmltopdf_git_issue but still can't make this character disappear!
If you have any clue, it's more than welcome.
Thanks in advance for your help!
EDIT
Following the comments from Eric Duminil and petkov.np, I can confirm - the code above works for me properly on Linux. Seems like this is a Linux vs MacOS issue. Can anyone suggest what the core of the issue in MacOS binding and whether it can be fixed?
I've edited this answer several times, please see the notes at the end as well as the comments.
I'm using macOS 10.12.2 and have the same issue. I'm listing all the browser etc. versions, although I suspect the biggest factor is the OS/wkhtmltopdf build.
Chrome: Version 55.0.2883.95 (64-bit)
Safari: Version 10.0.2 (12602.3.12.0.1)
wkhtmltopdf: 0.12.3 (with patched qt)
I'm using the following example snippet:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<style type="text/css">
p {
font-family: 'EmojiSymbols', sans-serif;
}
#font-face {
font-family: 'EmojiSymbols';
src: local('EmojiSymbols-Regular.woff'), url('EmojiSymbols-Regular.woff') format('woff');
}
span:before {
content: '\01F60B';
}
</style>
</head>
<body>
<p>
😋
<span></span>
😋
😋
😋
</p>
</body>
</html>
I'm calling wkhtmltopdf with the --encoding 'UTF-8' option.
You can see the rendered result here (I'm sorry for the lame screenshot). Some brief conclusions:
Safari doesn't render the 'raw' UTF-8 bytes properly. It seems to treat them just as the raw byte sequence (last line in the html paragraph).
Safari renders everything fine.
Chrome renders everything fine.
With the above option, wkhtmltopdf renders the raw bytes (sort of) ok, but doesn't render the CSS content attribute properly. Every 'proper' occurrence of the unicode symbol is followed by this strange phantom symbol.
I've tried literally everything but the results are the same. For me, the fact that even Safari doesn't render the raw bytes properly indicates some system-level problem that is macOS specific. It's unclear to me wether this should be reported as a wkhtmltopdf issue or there is some misbehaved dependency in the macOS build.
EDIT: Safari seems to work fine, my markup was broken.
EDIT: A CSS workaround may do the trick, please check the comments below.
FINAL EDIT: As shown in the comments, the CSS 'hack' that solves the issues is using text-rendering: optimizeLegibility;. This seems to only be needed on macOS/OS X.
From my comment below:
I just found this issue. It seems irrelevant at first glance, but adding text-rendering: optimizeLegibility; to my styles removed the duplicate characters (on macOS). Why this happens is beyond me. As the issue author also uses
osx, it's apparent there is some problem withwkhtmltopdf builds for this os.
I'm trying to get my dummy Dart webapp running in browsers. Here's the code of my html page:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<!-- Always force latest IE rendering engine or request Chrome Frame -->
<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>
</head>
<body>
<div id='button'>hello world</div>
</body>
<script src='my_app.dart' type='application/dart'></script>
<script src='packages/browser/dart.js'></script>
</html>
and this is what I'm getting in js console when trying to open it:
GET http://localhost:4567/my_app.dart.js 404 (Not Found)
(I'm running it on a local server, thus the url - got the same error if simply opening an html file though).
If I open the same url in Dartium, the webapp works. So the problem, I suppose, is that dart.js doesn't work as expected. What could be the problem?
packages/browser/dart.js is a bootstrap script that checks if a Dart VM is available on your browser. If a Dart VM is available, your dart script is executed directly, otherwise packages/browser/dart.js appends to the document a new js script with a url that points to a file with the same name as your dart file but with a appended .js. Depending on how you work you may have to generate this JS file manually with dart2js :
dart2js --out=my_app.dart.js my_app.dart
Try to "Run as Java Script" it should generate additional files like "my_app.dart.js"
If a user is on IE 7 and I read
<% = Request.Browser.Version %>
I get 7.0
if they have IE 9 and are on compatibility view, I get the same thing.
Is there anything in Request.Browser that can differentiate between a real IE7 user and a user that is using IE8 or IE9 but in compatibility mode?
It would be better to do this on the client side using JavaScript. You can use something like this:
http://code.google.com/p/ie6-upgrade-warning/
You can tweak it to whatever you want.
If your goal is simply to make sure the user is not in compatibility mode, then you can use either the meta tag or http header version of X-UA-COMPATIBLE:
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" >
</head>
<body>
<p>Content goes here.</p>
</body>
</html>
Can someone tell me how to stop IE8 printing the value of the href for an A tag next to the text. For example this markup
Some Link
When printed comes out as
Some Link(/site/page.html)
when printed. How can I stop this?
This doesn't happen for me in IE8 and I've never spotted it. I also can't find it in the Internet Options anywhere.
It is possible that you have some software on your computer that does this, for example AVG Anti-Virus adds content to web pages to tell you that it has checked the links being displayed for potentially harmful content - so your system-security software may be expanding all links to show you where they actually point, to prevent phishing attacks.
If you do have some anti-phishing software on your machine, you'll have to find the option within that.
Update - It is almost certainly some clever CSS.
I have created the following test page to demonstrate how you can add the URL to a link using CSS generated content. If this was used within a print stylesheet, this would explain how the URL is getting added to the link when you are printing the page. To stop this, you would have to save a copy of the web page, remove the style rule from the print-only style sheet and then open your copy and print it!
<html>
<head>
<title>Test</title>
<style type="text/css">
a:after {
content: " [" attr(href) "] ";
}
</style>
</head>
<body>
<h1>Test</h1>
<p>This is a test to see if this
Link Shows A URL</p>
</body>
</html>
In my Grails GSP file I'm using the HTML meta tag:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
The problem is that Grails closes this tag and renders it as:
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
This fails W3C's HTML validation (since my doctype is HTML and not XHTML).
Is there a fix for this? How can I get Grails to not interpret the
meta tag?
I'm using grails-1.2-M4.
Follow up:
I create the Grails bug GRAILS-5696 for this issue.
Not sure that this is the most beautiful solution, but at least it will work for your case:
<%= '<meta http-equiv="Content-Type" content="text/html; charset=utf-8">' %>
Well...this does not work since it is preprocessed by Grails before displayed as is.
So the only solution I see is to create a TagLib and output the content like this:
class MetaTagLib {
static namespace = 'my'
def meta = {
out << "<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\"/>"
}
}
and use it like:
<my:meta />
It works. Tested.
You could validate as HTML5 instead of HTML 4.01, by using <!DOCTYPE html> (that's it, really!). HTML5 allows trailing slashes even in the HTML syntax, in order to allow for systems like this that produce pseudo-XHTML.
Of course, HTML5 is not yet a finished standard; it may change. I think that this aspect of it is unlikely to be changed, but there is still some fairly contentious debate about a lot of the new HTML5 features, so keep in mind that it's not yet finalized.