Is it possible to display <svg> content inside an <html> in an iOS browser without the use of the <embed> or <img> tags which require me to store the <svg> content in a separate file?
The embedding of <svg> content inside <html> seems to work on all other modern browsers (IE9, Chrome, even Safari on Window!).
I have found some references that suggest changing the content-type to 'text/xml' might work, but I am not able to change it as my code is running as part of a mobile server control in SharePoint 2010.
My page contains several <svg> areas, each of which displays a simple graph. The data for these graphs is stored in a serialized object which needs to be deserialized before the svg polylines can be drawn. Since the deserialization process is time-consuming I prefer to do it once and generate all graphs in a single pass, rather than generating resource references to individual svg files which can be referenced by an <embed> tag.
Edit: There are indications that inline <svg> is supported in iOS5.
If you need to embed the SVG directly in the document
Use XHTML (not just HTML), serve it with the correct mime type, and your SVG will work correctly in all major browsers, including on the iPhone and iPad.
This example file uses inline SVG in XHTML, and even uses JavaScript and CSS in the host document to manipulate the SVG:
http://phrogz.net/SVG/svg_in_xhtml5.xhtml
It works fine in iPhone/iPad.
If you need to reference an external file
Use the <img> tag to reference your SVG directly. This works on iOS.
For example, open this on your iPhone/iPad:
http://phrogz.net/SVG/svg-via-img.html
which references
http://phrogz.net/SVG/heart.svg
Note that there is a bug with WebKit related to rendering variable-sized SVGs inside fixed-size <img> tags. (It appears to draw the aspect ratio for the SVG from the aspect ratio of the containing window instead of the dimensions of the <img> element.) You can see the weirdness in Chrome or Safari if you resize your browser window with that test file.
You may need to use inline SVG inside an XHTML compound document. In this case, XML namespaces are used for both the HTML root element and the inline SVG element. See here for a relevant example:
http://www.croczilla.com/bits_and_pieces/svg/samples/dom1/dom1.xml
Other useful examples may be found here:
http://www.croczilla.com/bits_and_pieces/svg/samples
Have you tried using <object>? I haven't done this in a while but you can Google for that.
Related
I have given a source in a Iframe tag, my is issue is that when the page loads on IE the download begins automatically and it generally happens on IE installed on windows 8.
<div> <iframe src="../../Images/Sample.pdf" width="800px" height="800px" ></iframe> </div>
It's downloaded probably because there is not Adobe Reader plug-in
installed. In this case IE (it doesn't matter which version) doesn't
know how to render it and it'll simply download file (Chrome, for
example, has its own embedded PDF renderer).
That said. is not best way to display a PDF (do not forget
compatibility with mobile browsers, for example Safari). Some browsers
will always open that file inside an external application (or in
another browser window). Best and most compatible way I found is a
little bit tricky but works on all browsers I tried (even pretty
outdated):
Keep your but do not display a PDF inside it, it'll be filled
with an HTML page that consists of an tag. Create an HTML
wrapping page for your PDF, it should look like this:
<html>
<body>
<object data="your_url_to_pdf" type="application/pdf">
<embed src="your_url_to_pdf" type="application/pdf" />
</object>
</body>
</html>
Of course you still need the appropriate plug-in installed in the
browser. Also take a look to this post if you need to support Safari
on mobile devices.
1st. Why nesting inside ? You'll find answer here on
SO. Instead of nested tag you may even provide a custom
message for your users (or a built-in viewer, see next paragraph).
2nd. Why an HTML page? So you can provide a fallback if PDF viewer
isn't supported. Internal viewer, plain HTML error messages/options
and so on...
It's tricky to check PDF support so you may provide an alternate
viewer for your customers, take a look to PDF.JS project, it's pretty
good but rendering quality - for desktop browsers - isn't as good as a
native PDF renderer (I didn't see any difference in mobile browsers
because of screen size, I suppose).
See also: HTML embedded PDF iframe
What is the purpose of the div 'data-role' option seen in the TriggerIO template files? Am I to assume that I can ignore this and build my app as if I would build a normal website in HTML5? Or do I need to use different tag options in order to initiate CSS selectors and such? There doesn't seem to be much information about the real differences between your TriggerIO apps and how you would write a normal HTML5 app.
I'm creating a children's story app whereby you can view an image and some text, and swipe for the next page). Should I be using canvas to load the images and text or is it best to use the older school img tags and other markup?
The example app that you get when you create a new app using the TriggerToolkit uses jQuery mobile. The data-role attributes are used by jQuery mobile:
In the body, a div with a data-role of page is the wrapper used to delineate a page, and the header bar (data-role="header") and content region (data-role="content") are added inside to create a basic page (these are both optional). These data- attributes are HTML5 attributes used throughout jQuery Mobile to transform basic markup into an enhanced and styled widget.
From: http://jquerymobile.com/demos/1.2.0/docs/about/getting-started.html
You can delete all this and use whatever markup, stylesheets and JavaScript you would usually when making a website. I'd definitely recommend using <img> and regular text rather than doing everything in a <canvas>. My advice would be to "try it and see", treating the development as you would a mobile website, but with assets stored locally and the ability to leverage forge APIs.
Does anyone know of a best practice print document for printing a website in IE6? I have a specific page that needs to be printed and it comes out well in other browsers except IE6 where it is being chopped off by a huge amount on the right side of my page.
Thanks
I have found the most fool-proof method of making something printable is by providing a print button that links to a PDF version of the document.
Generating the PDF is the major task there but that can be quite simple with the right tool.
I use http://www.xhtml2pdf.com/ which is a Python app to take a page and generate a PDF version. It might need some tweaking so you might need a special stylesheet to fix some things.
Other than that, you're left fixing IE. It might help to add a print stylesheet:
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
And overriding some of your more extravagant positioning methods. If you're centring, pull it back to the left, cut out extraneous margins and padding (remember background-images won't render with standard print settings so you can cut out a lot of padding).
You might find there's some crossover (ie you use some of the print styles in your PDF version) so you might be able to generate a hybrid solution to allow people to grab PDF versions and print straight from HTML.
I want to have a web page coded with HTML5, and I want to be able to put a pdf file onto this page so you can view it without having to click on any links to download it separately. Anyone know how to do this?
I want it to keep the text, images, and layout of the pdf file also. If that weren't the case I would just use an image. Thanks!
Edit: This will be hopefully going onto the ipad. So it won't support adobe. I need to just find a way to somehow make the pdf file show up in an html5 page without using a viewer. I want to keep all of its layers. It doesn't have to stay a pdf file when its on the page, I just need to find a way to transfer all of those layers there without having to do this manually with divs for each image, paragraph, etc.
I don't think this is possible without using Flash. Instead, you might want to convert the PDF to a different format (HTML for example) that can be rendered by the browser. There are tools that can do this from the command line, so making a script to do it on your site won't be too difficult.
You can use the embed tag like this:
<embed src="/path/to/your/file.pdf" />
Maybe you could convert the pdf to images on the server and display the images instead of the original pdf. As far as i know, Apache pdfbox can be used to do such a convert.
A little bit late and maybe issuu is gonna fix it soon but for now you can embed with issuu.com using an iframe and your magazine address ending in ?mode=mobile. Tested in ipad:
<iframe width="850px" height="580px" src="http://www.issuu.com/your_username/docs/your_magazine_name?mode=mobile" frameborder="0" allowfullscreen></iframe>
I would like same mobile version loading in desktop so there is no advertising. If you know how to make the browser to think it's an ipad let me know.
This code would directly embed a pdf viewer in a webpage
<object data="path to pdf " type="application/pdf" width="100" height="100">
<p>Alternative text - include a link to the PDF!</p>
</object>
If you are using ASP.NET, this link may be of interest to you.
Browser Based PDF Viewing And Editing
Hosted entirely on your server,
activePDF Portal is an ASP.NET
WebControl that enables your users to
interactively view and modify PDF
documents from any source - adding
comments, form fields, bookmarks, and
more – directly from within a standard
web browser, without requiring any
client-side software such as Adobe
Reader or Flash, or the use of ActiveX
controls.
- http://portal.activepdf.com/
PDFObject looks promising, but it doesn't work on iPads at the moment.
In order to dramatically reduce the number of HTTP requests on my ASP.NET MVC website, I am programmatically merging the files.
Essentially, I have an MVC URL http://localhost/Optimisation/JavaScript/ that calls my controller. The controller reads the javascript files in a certain order, merges them into a single output and renders it on a view.
This works fine.
I am implementing the same concept for the CSS now, using http://localhost/Optimisation/CSS/ - this merges a number of CSS files in a particular order and renders it onto the view.
This works in internet explorer, but in FireFox the styles are all absent. When I "inspect" the CSS file using FireBug it says that the file is empty. The same technique works perfectly in Internet Explorer, so the code behind is working - and if I browse to http://localhost/Optimisation/CSS/ using FireFox, it shows me the raw CSS that I've merged.
I'm referencing the optimised CSS like this:
<link href="http://localhost/Optimisation/CSS/" type="text/css" rel="Stylesheet" />
Make sure the server is sending it with a content-type of text/css.
I think Firefox will put a warning in the error console if it's not (or you can just look at the headers with your tool of choice).