We're having the following weird (well...) behavior in all versions of Internet Explorer browsers when using javascript slideshows.
You can see what I mean here http://www.tospirto.net/index.php?ID=photo_gallery&Rec_ID=481
In the last 3 images there are white lines and artifacts created by the browser.
This is true as I said for all versions of Internet Explorer.
Have you seen this before??
Do you ave any idea what is causing this???
Thank you
I can see the artifacts - strange! This is a known issue in IE's JPEG rendering algorithm. If you enlarge the pictures in Photoshop, you will see that the artifacts are restricted within encoding blocks. (Pardon me, but I assume you know roughly how JPEG is encoded.)
Try encoding the images with a different quality, or even in a different format (like PNG, even though that would give you larger files). You can find other thoughs on how to solve this here:
http://forum.jquery.com/topic/ie-dead-pixels-when-fading-images
It's a bug in the alpha filter, which is how transparent fades are implemented in IE (before version 9, which finally supports proper CSS opacity). When used directly on an image, any pixel with the RGB values 2,5,10 (aka #02050A) is treated as transparent.
This is how 1-bit transparency from eg. GIF is implemented in the alpha filter. Evidently Microsoft think this particular colour is so seldom used no-one will notice. Oops.
Avoid the bug by putting the alpha filter (or fade script that uses it) on a container <div> instead of on the image itself.
Alternatively, you can use an AlphaImageLoader filter (same hack as for transparent PNG loading on IE6) to load the image, or just get rid of the alpha filter when you're not in the middle of a fade (you still see the bug during fade but at least it doesn't appear at 100%).
OK I found what was wrong after some searching.
The effect is called swiss army image artifacts and you can find more about it here: http://www.dynamicdrive.com/forums/showthread.php?t=34462
Another great bug from explorers :)
The solution is on the referenced article which is to remove absolute blacks using the levels tool on the photoshop for example. Did a batch change using actions in photoshop for all pictures and works like a charm.
Related
I'm trying to do the same as in this question, but more basic: I have a PNG image with only white and transparent as colors. I need to colorize the white part, without touching the transparent part, in a given RGB hex value.
I'd like to do this with a jQuery plugin. Is there any that can do this?
It has to work in the latest versions of all major browser (IE, FF, GC, Safari), with bonus points for lower version support as well.
Example usage
Things I found / thought of already:
Pixastic, but that doesn't have cross-broswer support
CamanJS, but that isn't for jQuery
Overlaying with another div like here, but that would harm the transparent parts
Making the white parts transparent and vice versa, and then use a background-color - but the images are uploaded by the user and this wouldn't make it more user friendly
How about using SVG instead? SVG is supported in all major browsers since IE 9. As a text-based format, it's small, lightweight, and easy to manipulate.
A quick-and-dirty approach is to use SVG-edit (online) or Inkscape (download) to create your drawing, then simply drop the resulting <svg> element onto your HTML page. Here's a fiddle showing how that could work: http://jsfiddle.net/t6fAb/
Better yet, use SVG.js to create the drawing entirely in JavaScript. Here's a fiddle showing how that could work: http://jsfiddle.net/WEL4J/
How do I print rotated content (divs) in IE8? The DXImageTranform filter options do not appear to be printable.
http://msdn.microsoft.com/en-us/library/ms533014(v=vs.85)
Just to put this into context. I'm writing a pure dom-based canvas library called simpleCanvas. I am desperately trying to offer rotation of text, rectangles and images in IE8 without using a VML fallback, because it's ugly and slow, and error prone. A VML fallback is on my todo list as I concede that it's the only way I know how to do this in IE8 without additional tools. I'm hoping that there is some trick that I'm missing that doesn't come with a third party or server side requirement. If you have found it, a bounty is coming your way.
This is a massive stretch but is the best idea I could come up with:
Explorer Canvas - https://code.google.com/p/explorercanvas/ - Implements the canvas in IE8 by abusing VML.
HTML2Canvas - http://html2canvas.hertzen.com/ - Can render your document onto a canvas, which can then be rotated.
Failing that, I suspect your only option is going to be to generate a rotated document server-side and give that to the client for printing.
Edit: One other last ditch would be to handle the printing via Silverlight, embedding the page in a browsercontrol inside silverlight (yuck), rotating that and printing the result via SL.
Really grasping at straws here though for anything client side in a legacy browser.
According to Printing webpage with rotated text in Internet Explorer 9 you need to use -ms-transform too. Be sure to read the EDIT too as there is something buggy.
Would https://developers.google.com/chrome/chrome-frame/ be acceptable? I'm guessing not if its a LOB application, but it'd give you the features you need without taking the user out of IE8 in the strictest sense. Just another avenue to explore.
https://code.google.com/p/jqueryrotate/ - This will rotate images, it uses VML to do it in IE8. The caveat is that any text you wanted to rotate would have to be as an image.
I've never used it and it would be some work but have you tried svgweb? Basically it uses SVG if the browser supports it and Flash if it doesn't. Because it's a flash object you can print it like an image once rendered.
Here's a few more demos of it: svgweb Demos
I want to create a drawing application where I can place text and images on a canvas. Those elements also need to be interactively manipulated. Eventually the resulting canvas has to be exported to a vector based PDF. An excellent contender for this functionality would be SVG.
However, this application also needs to be crossbrowser compatible. I've been browsing around for some time now and have seen a couple of solutions available. I found among others RaphaelJS and Google's SVGWeb for working with SVG.
Now for converting those SVG files to a PDF I'm not sure if for instance Batik will offer me what I am looking for.
Also, how would bitmap images be handled when converting the SVG to PDF?
Images within a PDF have to be part of the PDF. They can use any number of compression techniques (jpeg, fax, jbig2, zip, gif, a couple others), various bits per color, various colors per pixel, and so forth... but the pixels must be defined within that PDF.
I've used Batik myself. A little clunky in combination with iText (surprisingly large amount of code involved), but quite serviceable. The only thing that really bugged me was that it wouldn't draw text as text... Batik insists on drawing it as paths. They may have overcome this since I started using it a year or two ago. But that was kind of a deal breaker (HUGE pdf bloat) so we ended up rendering our text separately: PITA, potential z-order issues (that never came up for us), plus a couple subtle interal layout issues that didn't turn up till later.
Batik supports script, animation, and a variety of Other Things that don't really matter within the bounds of SVG->PDF conversion. There's at least one other Java SVG library out there that is much more compact(not as feature rich... half empty/half full), though I can't for the life of me remember the name at the moment. The name came up on the iText mailing list maybe a year ago? Don't recall exactly. Quite some time ago, and AFTER I got Batik working. Ah well.
Batik can convert svg to pdf, Inkscape or Adobe Illustrator can too AFAIK.
I think that Inkscape would be your best choice here, it mostly sticks to SVG 1.1 for the shapes it implements (using a few of its own properties, which you can get rid of if you save it as a plain SVG). For me, even when I save as an Inkscape SVG, it displays fine in browsers even with blurs, though it won't work in Internet Explorer. For that, there is no solution besides using an external tool such as (as you've already found) SVGWeb. Unfortunately, javascript support for SVG can differ between browsers, and there is no way to fix this.
As for PDF, I think that raster images are embedded if they are embedded within the SVG itself, or linked if the SVG's is linked. This is easy to do by going to Extensions > Images > select either Embed Images or Extract Images.
You can program a java applet with Processing. It's cross-browser, can export to pdf. Bitmap images would remain bitmap images embedded in the pdf.
I am using Large fonts in my website at a few places and they don't appear anti-aliased or smooth... I was wondering if their is any way to show large anti-aliased fonts for browsers on windows OS which has anti-aliasing switched off as default... Similar to something they have on this website here
You can't control system anti-alias in CSS.
For that, you would have to use Flash text replacement, like sIFR (they are using h2swf)
If the user's OS or browser does not have anti-alias switched on, there's nothing you can do to force either to use it. You can use other rendering platforms like Flash, or using CCS to replace text with images, to allow fonts to be displayed with anti-aliasing, but it does seem like a kludge for something as simple as rendering text. Technologies like Flash will also alienate certain audiences, either whose devices have no support for them or they simply opt out of using them.
If your user does not have AA enabled, arguably they are displaying a preference or simply don't care about the particulars of how the font is rendered. At the end of the day, you simply cannot directly control the client your users will use to consume your website. On the web you will always be at the mercy of the client application. The best you can do is present it clearly and in such a way that it should be easy for users to get the best experience they can achieve with their client.
Don't lose any sleep over whether your pixels are slightly less pretty on one client.
Cufon is an alternative to sIFR. See comparison here:
http://net.tutsplus.com/tutorials/html-css-techniques/six-ways-to-improve-your-web-typography/
Good news : in IE9 (released 3/14/11) they seem to put much larger text as anti aliased by default. I have hardware acceleration disabled - so it probably has this effect for all users.
Warning: this is an exercise in futility but....
I did notice that the text-shadow css property seems to force anti aliasing in some browsers. Unfortunately I think only Chrome at this time...
Here's a sample...
(each heading is shown first normally - and then with a text shadow).
Best viewed in Chrome!
I'm looking for examples of processing.js working in Internet Explorer via ExplorerCanvas or similar.
It can be done! There are some gotchas, however. The page htxt links to is fine, as far as it goes, but please note the following:
1) Both script and canvas elements must have id attributes. The init function uses these attribute id's to associate a given script with a given canvas. I found the simplified init function easier to understand than the official one. You will want to master the official one if you have multiple canvases on one page.
2) If you use internet-style color designations, like #23ff9a, watch out! IE 8 wants all upper case hexadecimal color numbers from Processing.js/canvas. Write #23FF9A! This is what the documentation shows, so it shouldn't be a complete surprise. The error is a sometime thing, which makes it crazy to figure out. Mostly, larger numbers (for lighter colors) with lots of f's seem to be afflicted. White, #ffffff, is OK, but #ff00ff is not. Firefox and Safari are case-insensitive in this regard. The documentation says you can use an alternate hex notation with alpha channel (the CC) that looks like 0xCC006699. This didn't work for me; maybe it's on the to-do list.
3) The .equals() method on strings is missing! Andor Salga, one of the Seneca College crew working on Processing.js, wrote a simple boolean stringsEqual(str1, str2) function you can see here. This will do until the matter is definitively fixed.
4) It's not true that stroke() doesn't work with excanvas.js. It does. However, if your Processing.js code has even one little syntax error (I can't really categorize which kinds, but trying to use .equals() will do it) your routine will probably fail silently in IE8, whereas, in Safari or Firefox, your rectangles may lose their outlines, i.e. stroke() will quit working. IE on Vista, and Safari on the Mac, have both exhibited stronger syntax checking than Safari or Firefox on Vista, which will blow by certain errors and render a defective graphic.
5) Text, invoked using the text() function, renders in Firefox (in an unchangeable font of Firefox's choosing), but, as far as I can tell, not in IE8 or Safari. The Glyph Method is suggested here. The code is in place, but getting the fonts looks like a problem. Inkscape looks pretty impenetrable to me. As far as I can tell, what is needed is a lot like old pen-plotter fonts - a vector path with pen-up and pen-down commands between runs of nodes. Turns out FSF/GNU has some that might be massaged into the right format without too much trouble. I don't know where the format is defined, but it's probably over at W3C somewhere. The approach with real potential for presentable fonts is the IE/VML wing of Cufon. See How does it work? I really want this last link in the chain, but I could use some help.
Processing.js is one whale of a project that deserves our support. It has enormous potential. I would encourage you to pitch in if you are able.
The sparklines example on the processing.js exhibition page uses ExplorerCanvas. It seems like it's just a drop-in solution, no extra coding necessary.
This page describes how to get processing.js + excanvas working together.
It basically involves writing your own onload init method that IE can understand.