I am attempting to display a dynamically created SVG inline in a dojo based application and am running into some difficulty.
When I navigate directly to the SVG, it renders fine in Firefox 3.5/3.6 and Chrome, but when I inline it, verifying I have the right DOCTYPE and XML namespaces, both Firefox and Chrome just display a pile of text from within the SVG. I then attempted to change my content type served up to force it to be application/xhtml+xml but when forced into a XHTML valid mode, both Firefox and Chrome refuse to give dojo access to everything in the DOM that is required for it to work.
The start of my document is:
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:xlink="http://www.w3.org/1999/xlink">
And my inline SVG starts as:
<svg xmlns="http://www.w3.org/2000/svg" width="480" height="1394">
I have also attempted to display the SVG stand alone through an <img> tag, which seems to work fine in Chrome, but Firefox 3.5/3.6 refuses to display the SVG in a dijit.ContentPane, though again navigating directly to the document displays the picture. For this I used:
<img src="test_svg.php" />
And my standalone document starts with:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.0" width="480" height="1394">
And I set the following header:
Content-Type: image/svg+xml
I would use dojox.gfx but I have a rather lot of server side code to generate the SVG that I wouldn't be too keen on trying to translate to dojox.gfx and I am pretty sure that some of the styling I do with the SVG is not easily supported under dojox.gfx.
Just use <embed>.
<embed src="generated.svg" width="500" height="500">
BTW, this method even mentioned in SVG Primer. It is very easy to check if it works for you: http://srufaculty.sru.edu/david.dailey/svg/simplescript.html — taken directly from the SVG Primer. If you can see a quarter-circle it works.
Of course, going this route you are tying your application to SVG-capable browsers. No IE, no mobile browsers that support only Canvas.
Related
I'm working on a webscraping project on the following website http://www.comune.taranto.it/index.php/avvisi. I would like to extract the content of the first table and insert them into a Google Spreadsheet. I'm trying to use different xpath codes:
//td[contains(#class,'list-title')]/a/text()
//tbody[1]/tr/td/a/text()
//tr[contains(#class,'cat-list')]/td/a/text()
All of these codes work when I use the HTML debbugger of Chrome, but when I paste them into IMPORTXML, it returns N/A.
Can someone help me?
The website http://www.comune.taranto.it/index.php/avvisi returns invalid markup.
I just tried to fetch the website from console:
await fetch('http://www.comune.taranto.it/index.php/avvisi').then(res => res.text())
And I got:
<?xml version="1.0" encoding="utf-8"?><!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it-it" lang="it-it" dir="ltr">
<head>
...
So <?xml version="1.0" encoding="utf-8"?> should not be there. That's why IMPORTXML can't parse it. To verify it I just temporary hosted website on repl.it with and without that xml declaration. And IMPORTXML was able to parse when the website was without it.
So what's the solution?
If you can then change the website to return a valid html
Or use Google App Scripts and write the code to parse the website
Or use some kind of proxy website that returns valid html
Since I learned to serve XHTML pages as XML, I have started noticing something odd: whenever I view an XHTML page in the Firefox source code viewer, the DOCTYPE is always marked as an error. According to the tooltip I get from mousing over it, the error in question is a "stray doctype". From what I understand, a "stray doctype" means that there is an extra DOCTYPE in the middle of the document where it doesn't belong, which is certainly not the case here.
Here's an example - this markup will pass validation, and display correctly in all modern browsers:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--FF source viewer will mark the preceding two lines as an error.-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type"
content="application/xhtml+xml; charset=utf-8" />
<title>Sample XHTML Page</title>
</head>
<body>
<p>This is an example.</p>
</body>
</html>
This error message is especially odd, considering that these pages pass validation perfectly, and that a single parsing error would normally break the page.
I am the developer of this feature. You have found a bug. (Filed just now.) Thanks.
View Source syntax highlighting is based on the HTML parser, because our XML parser is not suited for the purpose and XML is rare enough that it doesn't make sense to put resources into implementing proper XML View Source. Hence, the XML View Source feature is a hack on the HTML parser and this aspect doesn't work quite right.
The error appears because the file is saved as UTF-8 BOM instead of UTF-8. Open the file in Notepad and change its encoding.
In addition to #Public Sphere's answer.
This warning can also occur when using <!DOCTYPE html>.
Probably the same warning is then also shown for the <html>, <head> and <body> tags (stray start tag "html").
To check if UTF-8 BOM is the problem:
Click the 'network' tab
Click the first request
On right details panel, click 'Response' tab and expand 'Response Payload'
You'll see the raw response now.
A red dot is in front of the doctype line,
and on hover it displays "\ufeff"
To easily find the files that could cause the problem, you can, in Linux, use this grep to find all files with BOM:
grep -rl $'\xEF\xBB\xBF' .
We're looking to gear up and support HTML5.
I believe that the built-in web controls in asp.net 4.0 output XHTML.
From what I understand the built-in controls do not yet ouput HTML5, however is it possible from them to output HTML4?
I don't particulary want to output a mixmatch of HTML / XHTML as although I'm sure most browsers will just deal with it, it seems like an approach that will have bad surprises.
From what I understand, XHTML5 support isn't great in browsers (though I'm still researching that).
The idea being that the surrounding HTML can make use of HTML5 and the controls just use HTML4 for the moment until asp.net catches up?
HTML5 output is supported:
For HTML5 features to work properly in Web Forms or views, you need to replace <!DOCTYPE> and <html> with their HTML5 counterparts. In ASP.NET Web Forms, this code belongs in the master page. In ASP.NET MVC, this code belongs in the _Layoutpage.cshtml layout page.
Regardless of the file type, the markup is the same, as demonstrated here:
<!DOCTYPE html>
<html>
XHTML5 support is simple to add using a doctype, namespacing and some styles:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta charset="utf-8"/>
<meta name="description" content="XHTML example for styling HTML5 elements in Internet Explorer without Javascript using namespaces."/>
<meta name="author" content="Elco Klingen"/>
<meta name="copyright" content="Copyright (c) 2010 Elco Klingen"/>
<title>HTML5 elements in Internet Explorer without Javascript - XHTML Example</title>
<style>
.section, section, html5\:section {
display: block;
padding: 0 75px;
border: 5px solid #e6e6e6;
background: #cfc;
}
</style>
</head>
<body>
<html5:section>foo</html5:section>
<section>bar</section>
<!--...-->
</body>
</html>
I'm using the HTML Validator Addon in Firefox 4 (great tool I might add).
However, I'm not sure the validation is working the way it should. I'm getting an error saying 'Canvas is not recognized'.
My doctype and html tags are set as follows:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
I believe this is supposed to be the HTML5 way for setting doctypes.
Is there something I'm missing?!
Try removing xmlns="http://www.w3.org/1999/xhtml" from the <html> element.
This simple frameset is not working in Firefox (IE7, 8, Chrome is okay). main doesn't appear but footer does. There's a frame window divider flush to the top of the screen, but even after pulling that divider down, no main content is shown.
It's validated under its DOCTYPE. Any ideas?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="cache-control" content="no-cache"/>
<meta http-equiv="pragma" content="no-cache"/>
</head>
<frameset rows="*,33">
<frame name="main" src="internalpage.html" />
<frame name="footer" src="http://www.example.com/externalpage.html" />
</frameset>
</html>
Okay, so it turns out it was Ad Block Plus. I've enabled it on Firefox to test whether certain Ajax calls were getting through, and forgot it was there.
I've had another problem with Ad Block Plus in the past:
https://stackoverflow.com/questions/3482385/adblock-is-killing-my-xmlhttprequests-work-around
Funny program: kills the free internet, messes up xmlhttprequests, and blocks frame content pulled from a localhost. Boo Ad Block Plus