Mozilla M16 Gets Alpha Channels
Snorfle writes: "In the recent Mozilla status update, there's a mention that real 8-bit alpha-channel support went quietly into Mozilla last week. Web-publishing types have been crying for this feature, provided principally through (royalty free!) PNG, though other alpha-capable formats will work too." All I want now is anti-aliased fonts for christmas.
I think its important to remember this just is another headace for us webdevelopers. I cant think of a client that would accept a crappy look in IE, and that is what ull get in most cases if you use this feature.. more serverside work is needed, great.
"Theres alotta savages in this town.."
Well.. unfortunately it's not that simple any more. Although the European Patent Convention specifically excludes software from being treated as a patentable 'invention', the European Patent Office ruled that this didn't mean what it said, and computer programs can be patented after all. It just goes to show that patent offices will try as hard as they can to increase what is patentable, without concern for whether such patentability is desirable. The EPO seems no more trustworthy than the USPTO. Following the EPO's decision, the UK patent office has revised its practice on software patents.
Anyway, it is still not certain whether such patents granted are actually enforceable. The European Commission are considering changing the law to catch up with the EPO's behaviour, so that software patents will become officially permitted (rather than de facto permitted as at present). Until then it isn't certain whether a lawsuit based on a European software patent would succeed (IANAL); big companies such as IBM are however stocking up on software patents in the hope of one day being able to use them. (Have a look at freepatents.org for more about stopping this from happening.)
Unisys claim to have a patent on LZW in several European countries, including the UK. I don't know whether they've actually tried to shake down British companies for money though. But you may not be as safe as you think.
-- Ed Avis ed@membled.com
Netscape Navigator has actually had a very weak and undocumented version of alpha channels since at least NS 3.0
The way it works is: Take a gif, double its resolution, then overlay a checkerboard pattern of transparent pixels. Then, create a page with that picture, halving the pixel dimensions so it's compressd down by NS. In most version sof NS 3 (And I believe IE3) this will actually create a 50% non-dithered alpha channel, letting the background show through.
You can see an example of this here, but be warned that it doesn't work on all browsers. There should be two copies of the same image. the first, reduced by 50%, the other full size. Note that on NS 4.7 on Linux the first doesn't show up at all. Elsewhere, YMMV.
Kevin Fox
Kevin Fox
Check out www.icab.de, their browser has supported the alpha channel in PNG images for months, as well as anti-aliased fonts (part of the Mac window toolkit). Is it just me or are there too many OSS users out there that have stopped keeping up with other platforms, and so are really impressed when some piece of old tech makes it to linux?
-- sudo.ca
More notes on alpha channels :
Without alpha channels you cannot composite an image onto a background without a "pixelized border". With an alpha channel the edges of one image can be smoothly faded into the background image. Alpha channels are especially useful in games. Things like smoke/fire are not solid objects they are transparent and they fade out near their extents. To achieve this gradual fade out the alpha channel goes from 255 (or 1.0) in the center of the image to 0 near the edges.
Also, "Alpha Buffers" are slightly different from "Alpha Channels". When drawing to a frame buffer with an Alpha Buffer the alpha values from the source image are usually copied along with the RGB components. In 3d games this is useful for drawing transparent shadows for objects. Without this, you can only draw solid black shadows or have a weird looking shadow.
- First the object is projected onto the ground.
- The screen area where the shadow is to be drawn is cleared in the alpha channel.
- The object is drawn with updates to the RGB channels turned off (i.e. only the alpha channel - also called a stencil buffer - is updated).
- A flat polygon is transparently drawn to the frame buffer where the alpha value is not 0.
The result is a transparent shadow that doesn't overlap itself and get darker where polygons intersect.
On the playstation 2 and several new games truecolor is used. Since 24bit color is difficult to address (requires multiply by 3 or X*2+X) 32bit is usually used. This gives 8bits left over for the alpha/stencil buffer. All sorts of neat tricks can be done with an alpha buffer. I've used it on the PS2 to do depth of field (i.e. distance objects look blurry) rendering without having to draw my scene more than once.
-- Virtual Windows Project
---
Nah. Almost all Be developers came from the Amiga world... They just targetted Mac users...
---
Well, I know that Be has a larger than usual number of ex-Amiga developers, but I'd still say that most came from the Mac (at least, around the time I was heavily involved with the BeOS - between PR1 and R3 mostly).
---
Have you ever seen CBM's "Amiga Style Guide" ?
---
Nope, but I'd be interested in it. Is it available online somewhere?
- Jeff A. Campbell
- VelociNews (http://www.velocinews.com)
- Jeff
There is a mixture of PNG and JPEG called JNG which is supposed to support JPEG compression and an alpha channel. But a short search on the PNG homepage didn't bring any results for me. Maybe if you use a search engine.
In theory, one can simply add an alpha channel to a JPEG file (a second channel for a grayscale or a fourth for a YCbCr color image) -- there is just no software that supports this. The JPEG standard also doesn't say anything about color spaces... Maybe one could wrap the alpha channel into a custom marker. This all makes sense only if it is standardized in some way (so that all major applications support it), which is a very painful and long process. But JPEG2000 is on the way, maybe it adds transparency support of some kind.
I also know Kodak Flashpix, which uses JPEG compression, I don't know about alpha channel support.
I seem to remember that PNG specifies that the pixels should not be pre-multiplied.
I don't remember what the reasoning for this was. I don't really understand what the problem is in what you are describing. Are you just saying that you have to be careful not to multiply twice? Or is there a fundamental flaw in non-pre-multiplied image data?
It seems to me that the only problem is that losing some of the data to quantization, though it seems like it would go the other way -- pre-multiplied would degrade it.
--Kevin
To the "moderator" who labeled this as flamebait;
this is another fine example of what is wrong with Slashdot and "Open Source" in general. Openness is more than about software. It's also about open opinions and free speech, another subject that many slashdotters love to spill endless comments over. If criticism is construed as flamebaiting, then what we have is the Web's equivalent of the Animal Farm, and Napoleon is a penguin.
i suggest reading this http://www.oreillynet.com/pub/a/network/2000/05/19 /magazine/mozilla_vm.html for a start and hold off your sarcasm.
True font anti-aliasing (as opposed to just gaussain blurring the edges of the font slightly, like windoze...) requires, at some level, an abstraction similar to an alpha channe.
One simple (but imperfect -doesn't give enough attention to the destination image) implementation is (for monochrome fonts -colour fonts would require a colour alpha channel):
an outline font is rasterised at high resolution, then this black+white high-res rasterisation is reduced to, say, a 16-level geryscale bitmap - which is used, somewhat like an alpha channel, to place the letter image on the screen
eg. (somewhat contrived squat N shape -I
can't be arsed doing any more manually) :
High-res B/W rasterisation
00 00 00 00 00 00 00 00
00 11 11 00 00 01 11 10
00 11 11 11 00 00 11 10
00 11 10 11 10 00 11 10
00 11 10 01 11 00 11 10
00 11 10 00 11 10 11 10
00 11 10 00 00 11 11 10
00 11 11 00 00 01 11 10
Lower res 4-greyscale image:
02200121
04341042
04214142
04300342
This would then be merged, by
whatever method gives a decent result (here
a simple capped addition is used, more complex
formula would give clearer result..),
with the destination image, which is, for
simplicity, here also a gresycale...
Dest, Dest,
before: after:
01100200 03300321
10100010 14441042
00200000 04414142
02110110 04410442
One other thing - I just downloaded the latest linux nightly build, and it really flies compared to earlier builds (I'm posting form it right now...), and renders 200+ comment slashdot in nested mode in a fraction of a second...
/. loads.
You are right, this thing totally rips now. It is like a turbocharged browser. I like it a LOT. They also fixed the annoying one-back URL bar problem, and the X cut-and-paste, and SFGate front page renders properly...
This seems like things are finally cooking. I really can't believe how fast
As has been mentioned by XFree developers, the most direct way to implement font (and everything-else) antialiasing is to have an alpha channel to use as a mask. So if Gecko now has proper support for 8-bit alpha rendering, it shouldn't be terribly hard to use this code to render masks to antialias fonts in browser windows.
On the other hand, there is talk (again, among the XFree developers) of adding native server-level alpha channel support, which would make everybody's life easier in this respect -- plus, someone might finally be able to properly implement those silly transparent terminal windows. :-) More importantly, though, server level alpha support would make it much easier to render anti-aliased fonts, shaped windows, and such.
Quantum mechanics: the dreams that stuff is made of.
[GIF animations a]re as much a part of the web now as HTML. PNG needs animation support.
There's always MNG, a superset of PNG that supports animation. And there's also JavaScript image rotation, which gives quite a bit more power than the simple rotation in the GIF format. But other than on banner ads (which are gradually moving to Macromedia Flash anyway), where do you see a GIF animation anymore? On somebody's lame homepage?
Will I retire or break 10K?
This is excellent news...however, a question...
.PSD, which was never meant for -really- small file sizes...)
PNG uses a (albiet very good) losless compression format, similar to LZW or RLE. In my photoshop saver, it also has a number of extra filter options for adaptive sampling and dithering, to decrease the size in a lossy manner. However, I am willing to bet that the compression ratio on larger images isn't nearly as good as JPEG for photographic, non-flat art images with lots of detail, where every pixel is a random value.
What I always wanted was an addition to the tag in html where you specify an identically sized greyscale JPEG as your alpha channel, so that img tag loads two jpegs, one with fill, one with alpha, since JPEG doesn't support alpha channels (it should.)
is there any other format that supports jpeg compression and alpha channels? (besides
Also, what kind of keying is it doing? Is it premultiplied over black or straight? It's harder to avoid the fringies on normal images when keying straight, you have to overfill areas with solid colors and key inside those areas so that there's no black bleed on the edges.
The JPEG hack may seem like a pain to most, but I work in television graphics all day long and we use a lot of seperated alpha/fill elements, in both custom hardware and desktop software, like After Effects, for reasons of control and flexibility.
I'd like to hear people's thoughts on this.
---Mike
harlock@raindrop.com
I realize this has nothing to do with alpha channels, but since the day the Mozilla project was announced, there's been one change I've been lobbying for and I'm trying to round up additional support.
In Netscape 0-3, when you opened a link in a new window, the Go menu retained the history of the old window. This changed in Netscape 4, where the new window now starts with an empty history. I find this incredibly frustrating. At a large site, I'll frequently open multiple windows, close them as I read the articles, and then discover that I can't back out because I forgot which window was the parent.
After months of debate, a Netscape employee marked the RFE as "WONTFIX". (It seems to have recently been reopened.) If other people think this would be a useful change to make, please visit the relevant Bugzilla page and comment or vote!!
What I'm listening to now on Pandora...
Not really - I generally avoid the Windows side, and feel no compelling reason to defend it (last I checked, you were right - UI standards are lacking there).
:>), whose main source of influence - Apple - has had a long history of pretty good UI design. The developers, with few exceptions, have been pretty good as well. Admittedly Apple really screwed up with QuickTime 4 and (even moreso) Sherlock 2, but it looks like they might be shaping up even if just a little bit.
On the Unix side, things have traditionally been terrible from the consistancy standpoint. But at least progress is being made. Microsoft on the other hand doesn't have any excuse - it's hard to impress on developers that virtues of a consistant UI when even similar Microsoft apps are completely different.
I personally come from a MacOS background (bet you couldn't tell
BeOS has had a pretty consistant UI between apps, even though it took some time before Be published their UI guidelines. That may have something to do with almost all original BeOS developers coming from the Mac world.
As I mentioned, Unix/Linux seems to be getting better as well. With each release of Gnome and/or Sawmill (and the impending release of Eazel's stuff) I feel less shock upon rebooting into my LinuxPPC partition. I can only hope this trend continues, and developers learn the need for truly intuitive and user friendly interfaces.
- Jeff A. Campbell
- VelociNews (http://www.velocinews.com)
- Jeff
Instead of a manual or semi manual hinting evolver, how about going one better and designing an algorithm that can evolve a "most similar looking" shape for any outline font at any pixel size? Thereby removing the need for predesigned hinting at all.
or at least the Microsoft equivalent anyway.
For what it's worth (possibly not much to anyone here I realize, but hey, you don't get much Microsoft news so what the heck)
Prior to the actual milestone release, Mozilla tends to say that they are adding to "Mx" even though that milestone may not be ready for a while. M16 is supposed to be done by the end of next week, but who knows...
~luge
IAAL,BIANLY
-----------
"You can't shake the Devil's hand and say you're only kidding."
This means that a PNG can have varying levels of transparency. So a PNG of a penguin with a fuzzy shadow behind it will look beautiful on both black and white backgrounds. (Assuming you find penguins beautiful)
I'm going to have to let go of the bitterness... I assumed it had been given up. Yay!
Most computerized images have 3 'channels' (red, green and blue). The alpha-channel is an extra channel of information, usually used for transparency information, so this means that images can have 256 levels of transparency in them, instead of the 2 that GIF uses.
Weird way of getting attention to a bug. Anyway, you can vote for bugs in Bugzilla to mark most important bugs to fix. So far this bug has only got one vote but I also don't think that Slashdot effect should be used to emphasize one bug over others. Just make a search to find other and more fatal bugs.
I'm not really concerned about polka-dotted scrollbars either, but there are some other areas where platform widgets tend to fall down (especially current GTK, as it turns out), and some of those are pretty important. Things like variable opacity for input widgets (this whole article is about variable-alpha, right?) and support for mixed font sets in input widgets (key for decent i18n support). The GTK i18n stuff is being improved dramatically by the Pango project, but it's not ready to deploy yet.
Pluggable toolkit support is broken in M16, but will be repaired, and it then might be possible for you to build your own libwidget_darchmare.so that uses all-native stuff. I'm not really expert on the widget-construction code.
Isn't it past your bed time.
Well at least you act like it.
Here's a nice demo:
http://www.pp.htv.fi/hsivon e1/css-test/bitmapstyle.html
View the source. Check out the PNG in the GIMP. very cool.
Antialiasing font rendering is something that has existed in at least Freetype for some time. However, antialiasing is fairly worthless without decent fonts to begin with. Microsoft and Apple both have manually hinted fonts which have been adjusted to look their best at the most common point sizes. There are very few people on this planet which can do a really good job manually hinting fonts and it's a very long process.
Fonts are one of those things which have very interest protections under the law. You can legally copy underlining font outline out of a font without violating any copyright laws, however the hinting is actually a set of assembly-like instructions embedded into the font which are covered under US law.
Until someone sits down and spends a year manually hinting things like Arial/Helvitica and open sources the hinting instructions, other OS's are doomed to deal with overly thick verticals, misaligned letters and misshaped ovals.
Of course, someone who really wants to be clever can install FreeType (with the old hinting engine which will process the manual hinting correctly) under Windows and create a program which evolves your own font's hinting until the output looks like the Microsoft font output at various sizes w/o aliasing turned on. The basic idea is you render the 'M' at size 36 from Times New Roman with FreeType then you import the outline into your own font file and continually change the hinting instructions until your 'M' and the Times New Roman 'M' are the same when compared pixel by pixel. You wouldn't be copying the hinting instructions, you'd be creating your own and automating the process of checking it against the original.
That would make an interesting PhD thesis.
The world is neither black nor white nor good nor evil, only many shades of CowboyNeal.
The previous threads indicated this would help with font anti-aliasing. How would an alpha channel help with text? Isn't this just for graphics?
Free music from Jack Merlot.
Comment removed based on user account deletion
---
Are you high?
---
Nope, although I've probably got enough caffeine in my system to kill a horse. I doubt that's making a difference, though.
---
To me platform consitency would mean it looking the SAME on most platforms.
---
Umm... Most people who use a given OS use it exclusively, or mostly so. Even if they don't, it's a good bet that they are intimately familiar with the widget set and capabilities of the operating system they use most of the time. Why should we diverge from accepted user interface standards? Should we return to the day when each application had its own user interface? I hope you're not seriously considering such a movement.
---
When I load mozilla on NT it pretty much (minus the window manager) looks the same. that is pretty friggen consistant.
---
But, it's not consistant with the rest of NT. It's certainly not consistant with the MacOS UI. If you install something that performs global changes on the UI (ie. Various themes, Kaleidoscope, etc) then those won't work either. At the very least, this is a pretty blatant duplication of code/effort. At its worst, it's externally inconsistant with the rest of the OS. Bad UI design.
---
Get your head straight and stop dissing a project you most likely know nothing about really.
---
Actually, I do know a bit about the project. I've even done some early work on one of the more popular skins that you can use with it. Check MozillaZine's ChromeZone if you'd like.
Perhaps you should refrain from commenting on something (or in this case, someone) you know nothing about?
- Jeff A. Campbell
- VelociNews (http://www.velocinews.com)
- Jeff
I've read/heard all of this before, mostly in the Mozilla UI design newsgroup. I'm pretty familiar with the arguments.
:> In fact, the article you reference even links to a skin that originated from yours truly (since taken over by a very talented guy by the name of Pete). So yeah, I'm somewhat familiar with the technology behind Mozilla's skins/chrome.
However, when pressed, the main Mozilla folks will blame it on lack of funding for native user interfaces. I'm not sure how designing custom UI widgets is more cost effective than using native UIs, but if this is true then the blame goes to AOL for letting their lack of funding ruin the direction Mozilla's UI has gone.
If they don't want to fund it, don't. At least it won't sully the name of Mozilla with a usability nightmare of a user interface.
Besides, the whole "Web browser as a platform" story is a joke. Frankly, I'd much rather have a decent web browser first. As much as I respect the O'Reilly people, they sure picked the wrong thing to compare Mozilla to. Java apps are notorious for less than acceptable user interface design (yes, even w/Swing).
And no, I'm not talking out my ass.
- Jeff A. Campbell
- VelociNews (http://www.velocinews.com)
- Jeff
I was forced for a long time to use browsers which lagged a long way behind the state of the art. This made me sympathetic to the needs of other people who are stuck with older technology. There's nothing quite so frustrating as trying to find a piece of information only to continually run into dead ends in the form of messages like "Sorry, you need a frames/javascript capable browser to view this page".
Okay, so many animated GIFs are really unnecessary but sometimes a bit of animation can really make a site. Check out http://www.digger.org for example. When creating this animation, I looked at many ways of doing it and picked the way which would download fastest and work best of the widest range of browsers.
I know many people dislike GIFs for ideological reasons (i.e. the Unisys patent) but for those of us that don't live in the USA - we don't care! Algorithms can't be patented in the UK so I'll use GIFs on my web pages for as long as they can be viewed by the greatest proportion of web users.
Mike -
Thanks for the info. Have any 3rd parties (ie. Apple - I can't imagine Microsoft doing so) expressed interest in working on native UI widgets? I'd be very interested in seeing it happen.
Perhaps with Fizzila on OSX...?
- Jeff A. Campbell
- VelociNews (http://www.velocinews.com)
- Jeff
Due to this bug in Mozilla, any web page that has a form and uses a charset that is other than ISO-8859-1 would not work. I hope the severity of this bug is increased ASAP and the fix moved to something other than M19. This bug is known to effect Unicode pages that have forms as well.
--
And before any of your retarded-monkeys tell me to leave (since I dislike it so much), let me save you the trouble and respond with a loud "eat me". Thanks.
-----------
"You can't shake the Devil's hand and say you're only kidding."
Using pre-multiplied Alpha you could, for example, render a 3D text logo on to a black background and save it with the Alpha channel, then blend to screen to get a perfect anti-aliased result on top of any color background. Using standard Alpha blending, you would see a thin dark outline on the logo where the already anti-aliased pixels - Alpha blended towards black in the rendering program - are darkened further by the process of blending.
Traditionally, this is the reason why in some games a bright explosion might have darkened outlines; not because the artist thought it looked good but because digital image processing is a fairly intricate process and the logic of it is not always clear. Even the art guys don't always understand.
Pixels in the image that are fully opaque (i.e. not transparent at all) would have an alpha value of 1.0 and would thus replace the one on destination. Pixels in the image that have only 50% coverage because of anti-aliasing, would multiply the destination by 0.5 but should not be multipled by the alpha internally because they were already rendered on to a black (00,00,00) background. Pixels in the image that are fully transparent would not affect the destination.
The output of these two processes is fundamentally different and choosing between them requires knowing whether the color information in the image is already affected by the alpha information or not. You must do this decision explicitly, for it cannot be determined from the image itself.
Whether there is a switch for this in Mozilla or any other Alpha supporting browser, or whether there is a switch for this in the PNG file format itself I do not know. My point is that there should be, if we're wanting proper output of our blended imagery. Jouni
--
Jouni Mannonen
3D Evangelist
Jouni Mannonen | Game Designer, Consultant
---
On another point: isn't it the OS's duty to create the anti-aliasing in fonts?
---
Yeah, but the Mozilla group doesn't appear to have any qualms overriding the OS when they feel like it (hence the lack of native widgets - so much for platform consistancy).
I guess they're trying to do the Anti-Microsoft. Instead of an OS swallowing up a web browser, damn near everything is going to be part of a browser. Next thing you know, they'll include a fully featured file browser and disk defragmenter in their next release...
<SARCASM>
But hey, at least it'll allow people to have polka-dotted CSS-compliant buttons and scrollbars! Forget good UI design, this is the kind of thing web developers need!
</SARCASM>
- Jeff A. Campbell
- VelociNews (http://www.velocinews.com)
- Jeff